Google Stitch Native UI

DESIGN.md + Google Stitch

Configuration reference: Direct import

Prerequisites

  • Access to Google Stitch
  • A DESIGN.md file — grab one from the library, generate with the design-md skill, or export from Stitch itself

Setup

1. Import DESIGN.md

Google Stitch created the DESIGN.md format. Support is native. To import:

  1. Open your project in Stitch
  2. Go to Settings → Design System → Import DESIGN.md
  3. Select the file or paste the content
  4. Stitch validates and applies the rules automatically
Stitch UI:
Settings → Design System → Import DESIGN.md → Select file

2. Verify the import

After importing, Stitch displays a summary of the loaded design system:

  • Color palette with swatches
  • Typographic scale
  • Spacing scale
  • Component patterns
  • Constraints (Do’s and Don’ts)

Check that all values were interpreted correctly. Stitch parses the Markdown and extracts structured values from it.

3. Generate UI with the design system

With DESIGN.md imported, every UI generation in Stitch follows the defined rules:

Prompt: Create a dashboard with sidebar, header, and a grid of cards

Stitch automatically applies the colors, typography, spacing, and component patterns from the imported DESIGN.md. No need to reference the file in every prompt.

4. Export DESIGN.md from Stitch

If you built your design system directly in Stitch, export it for use with other agents:

  1. Go to Settings → Design System → Export DESIGN.md
  2. Stitch generates the file in the standard format
  3. Save it at the project root for use with Claude Code, Cursor, Kiro, or Windsurf

Troubleshooting

  • Import failed — check that your DESIGN.md follows the standard structure with Markdown headings (## Colors, ## Typography, etc.). Stitch expects specific sections to parse correctly.
  • Colors not recognized — use hex format (#1A73E8) in color definitions. Stitch may not recognize color names without hex values (e.g., “dark blue” without a value).
  • Components not applied — the Components section needs patterns with concrete values. “Rounded button” is vague. Use “rounded-lg, py-2 px-4, bg brand-primary” instead.
  • Stale design system — re-import DESIGN.md after edits. Stitch doesn’t watch the file for changes automatically.

Useful combinations

  • Stitch → other agents — export DESIGN.md from Stitch and use it with Claude Code, Cursor, Kiro, or Windsurf. The format is the same. It works in any agent that reads repository files.
  • designmd.app library → Stitch — copy a DESIGN.md from the library and import it into Stitch for a ready-made design system in seconds. Customize the values afterwards.
  • Stitch + prototyping — Stitch uses DESIGN.md for instant prototyping. Combine with the infinite canvas and voice interaction to iterate on designs rapidly.
  • Version control — keep DESIGN.md in Git even when using Stitch. This gives you change history and lets you use the file simultaneously with other agents outside the Google ecosystem.

Next steps

Useful links