| name | revanced-stitch |
| description | Generates a project DESIGN.md (semantic design contract) for handoff to design tools and coding agents. Captures atmosphere, color roles, type, components, layout, motion, responsive rules, and anti-patterns. Use when the user wants a DESIGN.md for Google Stitch, agent handoff, or revanced-frontend project contracts. Does not call external APIs by itself. |
Revanced Stitch - Design Contract Writer
Author: chloevpin · Inspired by: taste-skill stitch / DESIGN.md handoff ideas - original wording
Note: This skill writes files. It does not run Google Stitch or any image API. Pair with those tools yourself if needed.
Goal: produce a precise, opinionated DESIGN.md that another agent or tool can implement without inventing a new aesthetic.
1. When to use
- User asks for a design system doc / DESIGN.md
- Preparing handoff to Stitch or similar
- Bootstrapping
revanced-frontend project contract from a brief or existing UI
2. Inputs to gather
From the user message, repo, or screenshots:
- Product name and purpose
- Audience
- Vibe words / references
- Existing tokens (if any)
- Light/dark requirements
- Motion appetite
If a critical input is missing, ask one question, then proceed with explicit assumptions listed in the doc.
3. Synthesis rules
Atmosphere
Describe mood in prose. Encode axes in words:
- Density: gallery-airy · balanced · cockpit
- Layout risk: symmetric · offset · experimental
- Motion: static · fluid · cinematic
Color
For each token: Name · Hex · Role
Rules:
- One accent (saturation controlled)
- Neutrals in one family (warm or cool)
- No pure
#000 large fills; prefer off-black
- No purple-neon default stack unless brand is actually purple
Typography
- Display, body, mono (if needed)
- Hierarchy via weight/size/color - not only huge type
- Body measure guidance (~65ch)
- Note dashboard constraint: avoid decorative serif as UI face
Hero
- Asymmetry guidance when layout risk is mid/high
- CTA count (prefer one primary)
- Ban scroll lecture and version stickers unless product requires them
Components
Document buttons, cards, inputs, nav, loaders, empty/error - shape, fill, border, hover/active, focus.
Layout
- Grid-first
- Max width
- Section rhythm
- Mobile collapse rules (single column, 44px targets, no horizontal page scroll)
Motion
- What is allowed at the chosen budget
- Spring vs CSS
- Reduced motion required text
Anti-patterns
Explicit NEVER list tailored to this product (include global AI tells: 3 equal cards, Jane Doe, mesh purple, emoji icons, fake div product shots, em-dash chrome, etc.).
4. Output file format
Write DESIGN.md (project root unless user specifies a path) using this skeleton:
# Design System: [Project Title]
## 1. Visual Theme & Atmosphere
…
## 2. Color Palette & Roles
- **Token Name** (#HEX) - role
## 3. Typography Rules
- **Display:** …
- **Body:** …
- **Mono:** …
- **Notes:** …
## 4. Component Stylings
- **Buttons:** …
- **Cards:** …
- **Inputs:** …
- **Nav:** …
- **Loaders / empty / error:** …
## 5. Layout Principles
…
## 6. Motion & Interaction
…
## 7. Responsive Rules
…
## 8. Anti-Patterns (Banned)
…
## 9. Implementation Notes for Agents
- Axes suggestion: LAYOUT_RISK=· MOTION_BUDGET=· INFO_DENSITY=·
- Stack preferences: …
- Assets: …
Be specific (hex, rem ranges, radius px). Vague DESIGN.md files are failed outputs.
5. Quality bar
6. Handoff
After writing DESIGN.md, tell the user:
- Path written
- Suggested axes for
revanced-frontend
- That image/Stitch tools (if any) are outside this skill
Do not pretend you generated Stitch frames unless a separate tool actually did.
