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

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.

font (the deprecated singular font field), backgroundLight, backgroundDark, preset, and description are not accepted as input — they only ever appear in API responses (getproject, listprojects, etc.), never in what you send here.

Available fonts (68 options)

Sans-serif: INTER, DMSANS, GEIST, SORA, MANROPE, RUBIK, MONTSERRAT, WORKSANS, SPACEGROTESK, PLUSJAKARTASANS, PUBLICSANS, SOURCESANS3, NUNITOSANS, ARIMO, HANKENGROTESK, IBMPLEXSANS, SPLINESANS, LEXEND, EPILOGUE, BEVIETNAMPRO, GOOGLESANS, GOOGLESANSFLEX, GOOGLESANSTEXT, NOTOSANS, OPENSANS, KARLA, LIBREFRANKLIN, FIRASANS, CHIVO, QUESTRIAL, OUTFIT, BRICOLAGEGROTESQUE, COMFORTAA, QUICKSAND, RALEWAY, ROBOTOFLEX, SYNE, OSWALD, ANYBODY, ATKINSONHYPERLEGIBLENEXT

Serif: NOTOSERIF, NEWSREADER, DOMINE, LIBRECASLONTEXT, EBGARAMOND, LITERATA, SOURCESERIF4, IBMPLEXSERIF, MERRIWEATHER, PLAYFAIRDISPLAY, BODONIMODA, VOLLKORN

Mono / code: JETBRAINSMONO, GOOGLESANSCODE, GOOGLESANSMONO, SPACEMONO, COURIER_PRIME

Condensed / display: BEBASNEUE, ANTON, ARCHIVONARROW, BARLOWCONDENSED, CLIMATECRISIS, POIRET_ONE, METROPHOBIC

Deprecated aliases (still valid, prefer the replacement): SOURCESERIFFOUR → SOURCESERIF4, SOURCESANSTHREE → SOURCESANS3, METROPOLIS → no direct successor

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:

There's no input field for exact background hex values — backgroundLight/backgroundDark are response-only. Light/dark backgrounds come from colorMode plus the palette Stitch derives from customColor and colorVariant; use overridePrimaryColor etc. if you need to pin a specific palette slot instead.

Output

Returns an Asset object with a name field — store this for future updatedesignsystem and applydesignsystem calls:

{
  "name": "assets/15996705518239280238",
  "displayName": "SaaS Dashboard Theme",
  "designSystem": { ... }
}

After creating

• Store the name value (e.g., assets/15996705518239280238). It's used two different ways:

- updatedesignsystem's designSystem.name — pass it as-is, with the assets/ prefix - applydesignsystem's assetId — strip the prefix, pass the bare numeric id - generatescreenfrom_text's designSystem param — pass it as-is, with the prefix

• Offer: "Apply this design system to existing screens?" → stitch-mcp-apply-design-system
• The orchestrator stores this for automatic application in Step 5b