Sync Design Systems

If you generate every screen from a blank slate, your colors, fonts, and spacing will drift from one screen to the next. DESIGN.md gives your Stitch project a visual memory.

Once you bind a DESIGN.md file to your Stitch Canvas project, every screen you generate (stitch generate screen) or edit (stitch edit screen) follows those tokens and layout rules automatically.

Generate and sync with the /stitch skill

The fastest way to create and sync a DESIGN.md is with the bundled /stitch skill (stitch agent-skills add). You don’t need to write token definitions by hand.

If you’re working inside an existing codebase, ask your coding agent to extract your current styles and bind them to your Stitch project:

If you’re starting a new concept from scratch, describe the vibe and let the /stitch skill author the specification and upload it for you:

Behind the scenes, the skill links your directory to your Stitch project if needed, authors ./DESIGN.md (or .stitch/DESIGN.md), validates the structure, and uploads it to the Stitch Canvas.

What makes a strong DESIGN.md

Whether your agent writes DESIGN.md or you write it yourself, focus on four things that steer visual generation most effectively:

• Materiality and surface metaphor — Describe how surfaces should feel (like warm paper, brushed aluminum, or high-contrast ink) and call out what to leave out (like unnecessary status dots, floating pill badges, or nested card borders).
• Color palette with exact hex codes — Define your background surfaces, structural borders, primary accents, and text ink colors with real hex values so Stitch doesn’t have to guess.
• Typographic hierarchy — Pick your primary UI font, a monospaced font for tabular numbers, and a clear scale from display headings down to captions.
• Spatial layout and grid — Set your target viewport width, 4px/8px spacing rhythm, and padding rules so screens stay airy and aligned.

If you already have a screen on the Stitch Canvas that nails the look you want, you can also pull its HTML (stitch get screen <screen-id> --code) and ask your agent to turn its CSS variables and font choices into your project’s DESIGN.md.

Sync from the terminal

Whenever you edit DESIGN.md directly, push your changes to the Stitch Canvas with stitch upload design:

stitch upload design DESIGN.md

If you haven’t pinned a default project for your folder yet (stitch config set project <project-id>), pass -p <project-id>. Uploading creates or updates the design system on your Stitch project so your very next generation uses the new rules.

Apply a design system to existing screens

New screens pick up your project’s active design system automatically. If you want to restyle an older screen on your canvas to match an updated DESIGN.md, list your project’s design systems and apply one directly with stitch edit screen:

stitch find design-systems
stitch edit screen <screen-id> --design-system <design-system-id>