Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.
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.
Use this skill when:
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) |
list_tools to find the Stitch MCP prefix.[prefix]:get_screen with projectId and screenId.bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"
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.
From the Stitch HTML and screenshot, extract:
Identify every distinct color. For each, determine:
<head>, or infer from screenshot)Aim for 8-12 semantic tokens, not 50 specific shades.
px or rem values used in the design)design-tokens.cssCreate design-tokens.css with full light + dark mode token sets.
Naming convention:
--color-* — Color tokens--font-* — Typography--spacing-* — Spacing scale--radius-* — Border radius--shadow-* — Elevation--motion-* — Animation timingTemplate:
/* =============================================================
Design Tokens — extracted from Stitch project: [Project Name]
Generated by stitch-design-system skill
============================================================= */
/* ---- Light mode (default) ---- */
:root {
/* Colors: Semantic roles, not visual names */
--color-background: [hex]; /* Page background */
--color-surface: [hex]; /* Card, panel backgrounds */
--color-surface-elevated: [hex]; /* Tooltip, dropdown backgrounds */
--color-primary: [hex]; /* Primary CTA, key actions */
--color-primary-hover: [hex]; /* Primary at hover state */
--color-primary-fg: [hex]; /* Text/icon on primary bg */
--color-secondary: [hex]; /* Secondary actions, accents */
--color-secondary-fg: [hex]; /* Text/icon on secondary bg */
--color-text: [hex]; /* Body text */
--color-text-muted: [hex]; /* Secondary, supporting text */
--color-text-disabled: [hex]; /* Disabled element text */
--color-border: [hex]; /* Dividers, input borders */
--color-border-focus: [hex]; /* Focus ring color */
--color-error: [hex]; /* Error states */
--color-success: [hex]; /* Success states */
--color-warning: [hex]; /* Warning states */
/* Typography */
--font-sans: [font-family-stack]; /* Heading and UI font */
--font-body: [font-family-stack]; /* Body text font (may equal --font-sans) */
--font-mono: [monospace-stack]; /* Code, technical content */
/* Type scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* Spacing scale (base 4px) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* Geometry */
--radius-sm: [value]; /* Small elements: badges, chips */
--radius-md: [value]; /* Buttons, inputs */
--radius-lg: [value]; /* Cards, panels */
--radius-xl: [value]; /* Modals, drawers */
--radius-full: 9999px; /* Pills, avatars */
/* Shadows */
--shadow-sm: [value]; /* Subtle card lift */
--shadow-md: [value]; /* Dropdown, tooltip */
--shadow-lg: [value]; /* Modal, sheet */
/* Motion tokens */
--motion-duration-fast: 150ms; /* Hover states, micro interactions */
--motion-duration-base: 250ms; /* Typical UI transitions */
--motion-duration-slow: 400ms; /* Page-level, large panel */
--motion-ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* Material ease */
--motion-ease-out: cubic-bezier(0, 0, 0.2, 1); /* Entries */
--motion-ease-in: cubic-bezier(0.4, 0, 1, 1); /* Exits */
--motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy open */
}
/* ---- Dark mode ---- */
/* Applied via .dark class (Next.js + next-themes) or [data-theme="dark"] (Svelte) */
.dark,
[data-theme="dark"] {
--color-background: [dark-hex];
--color-surface: [dark-hex];
--color-surface-elevated: [dark-hex];
--color-primary: [dark-hex]; /* Same hue, lighter for dark bg contrast */
--color-primary-hover: [dark-hex];
--color-primary-fg: [dark-hex];
--color-secondary: [dark-hex];
--color-secondary-fg: [dark-hex];
--color-text: [dark-hex];
--color-text-muted: [dark-hex];
--color-text-disabled: [dark-hex];
--color-border: [dark-hex];
--color-border-focus: [dark-hex];
--color-error: [dark-hex];
--color-success: [dark-hex];
--color-warning: [dark-hex];
/* Typography, spacing, geometry, motion tokens: unchanged in dark mode */
}
tailwind-theme.cssFor projects using Tailwind v4 (no tailwind.config.js), generate a @theme block.
Important: Tailwind v4 uses @theme in CSS, not a JS config file. Map tokens to Tailwind's namespace:
/* tailwind-theme.css — paste into your globals.css or import it */
@import "tailwindcss";
@theme {
/* Wire Tailwind color utilities to your CSS variables */
--color-background: var(--color-background);
--color-surface: var(--color-surface);
--color-primary: var(--color-primary);
--color-primary-hover: var(--color-primary-hover);
--color-text: var(--color-text);
--color-text-muted: var(--color-text-muted);
--color-border: var(--color-border);
/* Fonts */
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
/* Radius */
--radius-sm: var(--radius-sm);
--radius-md: var(--radius-md);
--radius-lg: var(--radius-lg);
/* Animation duration utilities */
--animate-duration-fast: var(--motion-duration-fast);
--animate-duration-base: var(--motion-duration-base);
--animate-duration-slow: var(--motion-duration-slow);
}
For Tailwind v3 projects (with tailwind.config.js), instead generate a tailwind.config.js section using the extracted hex values directly.
DESIGN.mdProduce an extended design document. It has all sections from the standard design-md skill plus:
# Design System: [Project Name]
> Generated by stitch-design-system from Stitch project [ID]
> Screens analyzed: [list]
## 1. Visual Theme & Atmosphere
[Mood, density, aesthetic philosophy — 2-3 sentences]
## 2. Color Palette & Roles
| Token | Light | Dark | Role |
|-------|-------|------|------|
| --color-primary | #... | #... | Main CTA, key actions |
| --color-background | #... | #... | Page background |
| ... | | | |
## 3. Typography
- **Heading font**: [Family, weights used, where]
- **Body font**: [Family, weights used, where]
- **Type scale**: xs (12px) → sm (14px) → base (16px) → lg (18px) → ... → 4xl (36px)
## 4. Geometry & Elevation
- **Border radius**: sm [Xpx] | md [Xpx] | lg [Xpx] | xl [Xpx]
- **Shadows**: [describe the elevation system]
## 5. Motion System
- **Micro** (hovers, toggles): [duration]ms [easing]
- **Meso** (panels, drawers): [duration]ms [easing]
- **Macro** (page transitions): [duration]ms [easing]
- **Spring** (playful elements): cubicOut spring
## 6. Stitch Prompt Copy-Paste Block
Use this block in every Stitch prompt for design consistency:
[Primary color: NAME (#HEX)] — used for buttons and key actions [Background: #HEX] — clean and [mood adjective] [Typography: FONT NAME] — [weight] weight for headings, regular for body [Aesthetic: 2-3 adjectives describing the visual style] [Border radius: SIZE — rounded/sharp/pill-shaped elements]
## 7. Dark Mode Notes
[Specific notes on how the dark theme differs — any color roles that change significantly, any elements that need special treatment in dark mode]
Write all three files to the project root (or wherever the user specifies):
design-tokens.csstailwind-theme.cssDESIGN.mdThen tell the user how to use them:
For Next.js:
// app/globals.css
@import '../design-tokens.css';
@import '../tailwind-theme.css';
For SvelteKit:
<!-- src/app.css -->
@import '$lib/design-tokens.css';
For the Stitch loop:
Copy Section 6 from
DESIGN.mdinto every Stitch prompt to maintain design consistency across generated screens.
| Issue | Fix |
|---|---|
| Can't determine dark mode hex values | Use the light-mode hue, desaturate slightly, and increase lightness by 30-40% |
| Font not loading | Add Google Fonts @import to design-tokens.css |
| Tailwind v3 vs v4 confusion | Check package.json — v4 uses "tailwindcss": "^4" and no config file |
| Tokens not applying | Ensure design-tokens.css is imported BEFORE component CSS |
stitch-nextjs-components or stitch-svelte-componentsdesign-tokens.css instead of hardcoding valuesDESIGN.md Section 6 feeds into stitch-loop for multi-page consistencyresources/tokens-template.css — Full template with all token categories