stitch-mcp-create-design-system

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-system and 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",
        "headlineFont": "DM_SANS",
        "bodyFont": "DM_SANS",
        "labelFont": "DM_SANS",
        "roundness": "ROUND_EIGHT",
        "customColor": "#6366F1",
        "colorVariant": "TONAL_SPOT"
      }
    },
    "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 and styleGuidelines are not accepted — the live API has no such fields on DesignSystemInput. Don't send them.

theme (DesignTheme) — the visual configuration

Required: colorMode, headlineFont, bodyFont, roundness, customColor.

Field	Type	Values	Description
colorMode	enum	LIGHT, DARK	Base appearance mode
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	Optional. Typeface for labels, captions, and UI chrome
roundness	enum	ROUND_FOUR, ROUND_EIGHT, ROUND_TWELVE, ROUND_FULL (ROUND_TWO also exists but is deprecated/unused)	Border radius scale
customColor	string	Hex color	Primary brand color
colorVariant	enum	MONOCHROME, NEUTRAL, TONAL_SPOT, VIBRANT, EXPRESSIVE, FIDELITY, CONTENT, RAINBOW, FRUIT_SALAD	Optional. Palette generation strategy from customColor
designMd	string	—	Optional. Design system markdown document
overridePrimaryColor / overrideSecondaryColor / overrideTertiaryColor / overrideNeutralColor	string	Hex color	Optional. Exact color overrides, take precedence over customColor
spacing	object	Map of name → CSS value	Optional. e.g. {"sm": "8px"}
typography	object	Map of level name → Typography token	Optional. Each token: fontFamily, fontSize, fontWeight, letterSpacing, lineHeight