stitch-design-system

Installation
SKILL.md

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.

Related skills

More from acedergren/agentic-tools

Installs
9
GitHub Stars
14
First Seen
Mar 9, 2026