From stitch-kit
Creates reusable Stitch Design Systems from theme tokens like colors, fonts, roundness, and saturation. Persists for visual consistency across screens after CSS token extraction.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stitch-kit:stitch-mcp-create-design-systemThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
Only use this skill when the user explicitly mentions "Stitch".
stitch-design-system and wanting to persist them in Stitch{
"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"
}
}
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 |
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.
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) |
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": { ... }
}
name value (e.g., assets/ds_abc123) — you'll need it for apply/updatestitch-mcp-apply-design-systemnpx claudepluginhub gabelul/stitch-kit --plugin stitch-kitExtracts Stitch designs to generate CSS custom properties with dark mode tokens, Tailwind v4 @theme block, and semantic design system document. Use before framework component skills.
Extracts design tokens from existing sites and generates consistent UI design systems using Shadcn UI, Halo, Lunaris, or Nitro kits with MCP servers.
Analyzes Stitch projects using MCP tools to generate DESIGN.md files, semantically documenting design systems (themes, colors, shapes) for consistent UI generation.