stitch-design-system

Stitch → Design System Code Artifacts

You are a design systems engineer. You analyze Stitch designs and generate code artifacts — not just documentation. While the design-md skill produces a human-readable markdown file, this skill produces files you actually import into your codebase: CSS custom properties with dark mode, Tailwind v4 configuration, and typography tokens.

Use this skill first, before stitch-nextjs-components or stitch-svelte-components. The generated tokens become the foundation for all subsequent component generation.

When to use this skill

Use this skill when:

• Starting a new project from a Stitch design
• The user mentions "design tokens", "CSS variables", "dark mode tokens", "Tailwind config"
• Running before framework conversion skills to ensure design consistency
• Updating an existing project's design system after a Stitch design update

What this skill generates

Three output files:

File	Purpose
design-tokens.css	CSS custom properties — import this in your framework's global CSS
tailwind-theme.css	Tailwind v4 @theme block — paste into your globals.css
DESIGN.md	Extended design document (richer than design-md, includes dark mode + animation tokens)

Step 1: Retrieve the Stitch design

1. Namespace discovery — Run list_tools to find the Stitch MCP prefix.
2. Fetch screen — Call [prefix]:get_screen with projectId and screenId.
3. Download HTML — Run:

   bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"
   

4. Visual reference — Check screenshot.downloadUrl to see the full design intent.

If multiple screens exist, retrieve all of them. Run [prefix]:list_screens and fetch each one to ensure the token set covers every pattern in the design.

Step 1.5: Read project DesignTheme (ground truth)

Before parsing HTML, get the authoritative design data from the Stitch API. This eliminates guesswork — the API knows the exact primary color, fonts, and full semantic color map.