What is the stitch-design-system skill?
The stitch-design-system skill, part of stitch-kit, extracts a Stitch design and writes three files: design-tokens.css with light and dark mode CSS custom properties, tailwind-theme.css with a Tailwind v4 @theme block, and an extended DESIGN.md. Run it before framework conversion skills.
The stitch-design-system skill is a design systems engineer role for an AI coding agent. It analyzes Stitch designs and generates code artifacts you import into your codebase, not only documentation.
Where the design-md skill produces a human-readable markdown file, this skill produces CSS custom properties with dark mode, Tailwind v4 configuration and typography tokens. Its generated tokens become the foundation for later component generation.
The three files it writes
- design-tokens.css: CSS custom properties to import in your framework's global CSS.
- tailwind-theme.css: a Tailwind v4 @theme block to paste into globals.css.
- DESIGN.md: an extended design document that includes dark mode and animation tokens.
Where the values come from
The skill reads the project's DesignTheme through get_project. If namedColors is present, a 40+ token semantic color map, it is used as the authoritative color system, and HTML is read only for motion, spacing pixel values and shadows.
Run order
Run this skill first, before stitch-nextjs-components or stitch-svelte-components. The framework skills then import design-tokens.css instead of hardcoding values, and Section 6 of DESIGN.md feeds stitch-loop for multi-page consistency.
Who the stitch-design-system skill is for
Best for
- Starting a new project from a Stitch design.
- Updating an existing project's design system after a Stitch design update.
- Requests that mention design tokens, CSS variables, dark mode tokens or a Tailwind config.
How to install Stitch Design System Skill: Tokens, Tailwind v4 and DESIGN.md
npx @booplex/stitch-kit
/plugin marketplace add https://github.com/gabelul/stitch-kit.git
/plugin install stitch-kit@stitch-kitnpx @booplex/stitch-kit update.Run the installer
npx @booplex/stitch-kitdetects the supported clients you have installed, such as Claude Code, Codex CLI, OpenCode, Crush, Cursor, VS Code and Gemini CLI, and wires up whatever each one supports.Add the skills
Inside Claude Code, run the two /plugin commands above. The npx installer handles the agent and MCP wiring, and the plugin adds the 36 skills.
Connect Stitch
Generating designs needs Google Stitch. Sign in with any Google account, then get an API key from the Stitch settings.
Run the skill
Ask your agent to extract a Stitch project into design tokens. Use
npx @booplex/stitch-kit statusto check what is installed.
Check that it loaded
After a run, the project root holds design-tokens.css, tailwind-theme.css and DESIGN.md.
Key features
- Three code artifactsWrites design-tokens.css, tailwind-theme.css and DESIGN.md to the project root, or wherever you specify.
- Light and dark token setsdesign-tokens.css holds full light and dark mode tokens. Dark mode applies through a .dark class or a [data-theme="dark"] attribute.
- DesignTheme as ground truthget_project supplies the exact primary color, fonts and full semantic color map, so the skill does not guess from HTML.
- Theme field mappingFields such as overridePrimaryColor, backgroundLight, backgroundDark, headlineFont, bodyFont and roundness map to --color-primary, --color-background, --font-sans, --font-body and --radius-md.
- Font enum mappingA table maps Stitch font enums such as INTER, DM_SANS, GEIST and SPACE_GROTESK to CSS font-family stacks.
- Token namingTokens use --color-*, --font-*, --spacing-*, --radius-*, --shadow-* and --motion-* names, with motion durations of 150ms, 250ms and 400ms.
- Tailwind v4 theme blocktailwind-theme.css wires Tailwind color utilities, fonts, radius and animation duration utilities to the CSS variables. Tailwind v3 projects get a tailwind.config.js section.
- Extended DESIGN.mdSeven sections, including a Stitch prompt copy-paste block in Section 6 to paste into every Stitch prompt and a dark mode notes section.
- Setup snippetsStep 6 gives import examples for Next.js and SvelteKit.
Frequently asked questions
What does the stitch-design-system skill do?
It 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. The files are design-tokens.css, tailwind-theme.css and DESIGN.md, written to the project root unless you specify another place.
How do I install it?
Install stitch-kit with npx @booplex/stitch-kit, which detects installed clients and wires up the agent and MCP. Then, inside Claude Code, add the gabelul/stitch-kit marketplace with /plugin marketplace add and run /plugin install stitch-kit@stitch-kit, which adds the 36 skills. The agent works without the skills, but the skills are what make the output good.
How is it different from the design-md skill?
The design-md skill produces a human-readable markdown file. This skill produces files you import into your codebase: CSS custom properties with dark mode, Tailwind v4 configuration and typography tokens. Its DESIGN.md is richer than design-md and includes dark mode and animation tokens.
Where do the colors come from?
From the Stitch API. The skill calls get_project, reads designMd when present and extracts namedColors, a 40+ token semantic color map covering primary, secondary, tertiary, surface, utility, state and inverse roles. When namedColors is missing, it falls back to extracting colors from the HTML.
Does it support Tailwind v3?
Tailwind v4 is the main target, with an @theme block in tailwind-theme.css. For Tailwind v3 projects that have a tailwind.config.js, the skill generates a tailwind.config.js section from the extracted hex values instead. To tell them apart, check package.json: v4 uses tailwindcss ^4 and no config file.
When should I run it?
Run it first, before stitch-nextjs-components or stitch-svelte-components. The framework skills then import design-tokens.css instead of hardcoding values. Use it when starting a new project from a Stitch design or when updating a project's design system after a Stitch design update.
What if tokens do not apply or a font does not load?
The skill's troubleshooting table covers it. Make sure design-tokens.css is imported before component CSS. If a font is not loading, add a Google Fonts @import to design-tokens.css. For dark mode hex values it cannot determine, use the light-mode hue, desaturate slightly and raise lightness by 30 to 40%.