Stitch MCP — Create Design System
Creates a new Stitch Design System — a reusable theme configuration that can be applied to any screen. This bridges the gap between local CSS token extraction (via stitch-design-system) and Stitch-native design tokens that persist across generations.
Critical prerequisite
Only use this skill when the user explicitly mentions "Stitch".
When to use
- After extracting CSS tokens via
stitch-design-systemand wanting to persist them in Stitch - User wants consistent theming across multiple screens or projects
- The orchestrator's Step 7 offers to create a Stitch Design System from extracted tokens
- User explicitly asks to create a design system in Stitch
Call the MCP tool
{
"name": "create_design_system",
"arguments": {
"designSystem": {
"displayName": "SaaS Dashboard Theme",
"theme": {
"colorMode": "LIGHT",
"font": "DM_SANS",
"headlineFont": "DM_SANS",
"bodyFont": "DM_SANS",
"labelFont": "DM_SANS",
"roundness": "ROUND_EIGHT",
"saturation": 3,
"customColor": "#6366F1",
"backgroundLight": "#FFFFFF",
"backgroundDark": "#18181B",
"description": "Professional SaaS aesthetic — clean, indigo accent, airy spacing"
},
"designTokens": "--color-primary: #6366F1;\n--color-bg: #FFFFFF;\n--font-family: 'DM Sans';",
"styleGuidelines": "Use indigo for interactive elements. Gray-50 backgrounds for cards. 8px border radius."
},
"projectId": "3780309359108792857"
}
}Parameter reference
designSystem — required object
| Field | Type | Required | Description |
|---|---|---|---|
displayName | string | Yes | Human-readable name for the design system |
theme | DesignTheme | Yes | Visual configuration — see below |
designTokens | string | No | CSS custom properties or token definitions |
styleGuidelines | string | No | Natural-language design rules |
theme (DesignTheme) — the visual configuration
| Field | Type | Values | Description |
|---|---|---|---|
colorMode | enum | LIGHT, DARK | Base appearance mode |
font | enum | See font list below | Deprecated — sets all three font roles. Use the specific fields below instead |
headlineFont | enum | See font list below | Typeface for headings and titles |
bodyFont | enum | See font list below | Typeface for body text and paragraphs |
labelFont | enum | See font list below | Typeface for labels, captions, and UI chrome |
roundness | enum | ROUND_FOUR, ROUND_EIGHT, ROUND_TWELVE, ROUND_FULL | Border radius scale |
saturation | int | 1–4 | Color vibrancy (1 = muted, 4 = vivid) |
customColor | string | Hex color | Primary brand color |
backgroundLight | string | Hex color | Light mode background |
backgroundDark | string | Hex color | Dark mode background |
preset | string | — | Optional preset theme name |
description | string | — | Brief aesthetic description |
Available fonts (28 options)
Sans-serif: INTER, DM_SANS, GEIST, SORA, MANROPE, RUBIK, MONTSERRAT, WORK_SANS, SPACE_GROTESK, PLUS_JAKARTA_SANS, PUBLIC_SANS, SOURCE_SANS_THREE, NUNITO_SANS, ARIMO, HANKEN_GROTESK, IBM_PLEX_SANS, SPLINE_SANS, LEXEND, EPILOGUE, BE_VIETNAM_PRO, METROPOLIS
Serif: NOTO_SERIF, NEWSREADER, DOMINE, LIBRE_CASLON_TEXT, EB_GARAMOND, LITERATA, SOURCE_SERIF_FOUR
projectId — optional, numeric only
✅ "3780309359108792857"
❌ "projects/3780309359108792857"If provided, associates the design system with a specific project. If omitted, creates a global design system.
Mapping CSS tokens to DesignTheme
When creating from extracted design-tokens.css:
| CSS Variable | → DesignTheme field |
|---|---|
--color-primary | customColor |
--color-bg or --bg-light | backgroundLight |
--bg-dark | backgroundDark |
--font-family | font (map to closest enum value) |
--radius or --border-radius | roundness (4px→FOUR, 8px→EIGHT, 12px→TWELVE, 16px+→FULL) |
Output
Returns an Asset object with a name field — store this for future update_design_system and apply_design_system calls:
{
"name": "assets/ds_abc123",
"displayName": "SaaS Dashboard Theme",
"designSystem": { ... }
}After creating
- Store the
namevalue (e.g.,assets/ds_abc123) — you'll need it for apply/update - Offer: "Apply this design system to existing screens?" →
stitch-mcp-apply-design-system - The orchestrator stores this for automatic application in Step 5b