Create DESIGN.md

Use this skill to produce a DESIGN.md file that can guide future implementation agents without visual drift.

Workflow

1. Gather design inputs from the current conversation, attached images, existing code, screenshots, mockups, brand notes, product requirements, and any existing DESIGN.md.
2. If official or user-provided Design.md requirements are referenced but not included, browse or read them when available. User-provided schema always takes precedence. For Google Stitch Design.md guidance, use the official docs:
   • https://stitch.withgoogle.com/docs/design-md/overview/
   • https://stitch.withgoogle.com/docs/design-md/specification/
3. Inspect the project before writing so the output matches the intended framework and file conventions.
4. Write or update DESIGN.md at the location requested by the user. If no location is specified, use the project root.
5. Use exact values for every token: hex colors, font families, font weights, px or rem sizing, spacing, radii, shadows, breakpoints, and motion timings.
6. Include CSS variable names or utility class names for every token.
7. Include an implementation token contract that maps design tokens to expected code artifacts such as global CSS variables, Tailwind theme entries, font loading, component folders, chart primitives, and content schemas when relevant.
8. Add implementation rules that prevent drift: layout rules, component states, accessibility rules, content tone, data/privacy rules when relevant, and quality checks.
9. Add a compact task-oriented document map near the top so implementation agents can route themselves to the right sections without rereading the whole file.
10. Validate the Markdown structure and required headings after writing.