Stitch Design System

Extract Stitch designs into semantic DESIGN.md files that serve as authoritative references for generating new screens with consistent visual language.

NEVER

• Never use technical CSS values in DESIGN.md without semantic translation — rounded-xl means nothing to Stitch; write "generously rounded corners" so visual intent is clear.
• Never omit hex codes — color names are ambiguous; Ocean-deep Cerulean (#0077B6) enables exact replication, "blue" does not.
• Never omit functional roles — "blue button" is unusable; "Deep Ocean Blue (#0077B6) for primary call-to-action" is actionable.
• Never use unspecific atmosphere words like "modern", "nice", or "clean" — every design is these things; write sensory descriptions like "airy and minimal with generous whitespace" or "dense, information-rich, utilitarian".
• Never name colors by appearance alone — name them by purpose: primary, secondary, destructive, surface, muted.
• Never skip shadows and spacing — these define perceived elevation and hierarchy, which Stitch uses to understand visual weight.

What Makes a Good DESIGN.md

Stitch generates new screens from natural language descriptions. DESIGN.md is the bridge between technical assets (HTML/CSS) and Stitch's language model. The quality of translation directly determines consistency of generated screens.