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.
npx claudepluginhub gabelul/stitch-kit --plugin stitch-kitThis skill is limited to using the following tools:
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.
Extracts 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.
Builds scalable design systems using token hierarchies, semantic tokens, component APIs, theme switching, and documentation. For component libraries and UI foundations.
Extracts UI design tokens from sites/URLs using Harvester v5 or scaffolds systems from Shadcn/Halo/Lunaris/Nitro kits via Pencil.dev and Google Stitch.
Share bugs, ideas, or general feedback.
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-system