Skip to content
Development
Skill

/stitch-mcp-update-design-system

Updates an existing Stitch Design System's theme, tokens, or guidelines. Requires the asset name from create or list operations.

From plugin
stitch-kit
4736 skills1 agent2 hooks

Claude Code

$ npx -y skills add gabelul/stitch-kit --skill stitch-mcp-update-design-system --agent claude-code

SKILL.md

stitch-mcp-update-design-system.SKILL.md
name: stitch-mcp-update-design-system
description: Updates an existing Stitch Design System's theme, tokens, or guidelines. Requires the asset name from create or list operations.
allowed-tools:
  - "stitch*:*"

Stitch MCP — Update Design System

Updates an existing Stitch Design System. Use this to modify theme properties, design tokens, or style guidelines without creating a new design system.

Critical prerequisite

**Only use this skill when the user explicitly mentions "Stitch".**

You must have the design system's asset `name` before calling this. If you don't have one:

  • List existing design systems via `stitch-mcp-list-design-systems`
  • Or use the `name` returned from `stitch-mcp-create-design-system`

When to use

  • User wants to modify colors, fonts, or roundness of an existing design system
  • After reviewing a design system and wanting to adjust specific properties
  • Updating design tokens after a brand refresh

Call the MCP tool

{
  "name": "update_design_system",
  "arguments": {
    "name": "assets/15996705518239280238",
    "projectId": "3780309359108792857",
    "designSystem": {
      "displayName": "SaaS Dashboard Theme v2",
      "theme": {
        "colorMode": "DARK",
        "headlineFont": "GEIST",
        "bodyFont": "GEIST",
        "labelFont": "GEIST",
        "roundness": "ROUND_TWELVE",
        "customColor": "#818CF8"
      }
    }
  }
}

Parameter reference

Three **sibling** top-level arguments — `name` is not nested inside `designSystem`:

| Argument | Type | Required | Description | |----------|------|----------|-------------| | `name` | string | **Yes** | Asset identifier **with** the `assets/` prefix, e.g. `assets/15996705518239280238`. Top-level, not inside `designSystem`. | | `projectId` | string | **Yes** | Bare numeric project id, no `projects/` prefix | | `designSystem` | object | **Yes** | `{displayName, theme}` — see below |

`designSystem` — `{displayName, theme}` only

| Field | Type | Required | Description | |-------|------|----------|-------------| | `displayName` | string | **Yes** | Human-readable name | | `theme` | DesignTheme | **Yes** | Visual configuration (see `stitch-mcp-create-design-system` for the full field reference) |

> `update_design_system` takes the asset id **prefixed** (`assets/159967...`), while `apply_design_system` takes the same id **bare**. Two tools, same identifier, different formats.

`designTokens` and `styleGuidelines` are **not** accepted — the live API has no such fields on `DesignSystem`. Don't send them.

**Note:** This is a full replacement, not a merge. Include all theme fields you want to keep, not just the ones you're changing.

Output

Returns the updated Asset object:

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

After updating

  • Offer: "Re-apply this updated design system to existing screens?" → `stitch-mcp-apply-design-system`
  • Screens generated before the update won't automatically reflect changes — they need to be re-applied
Read more
@gabelul
Ships withstitch-kit

Your coding agent writes decent code and designs terrible UI. stitch-kit fixes the second half — it wires agents into Google Stitch (text prompts → genuinely beautiful screens) and teaches them to drive it properly.

4736 skills1 agent
Get the whole plugin

Stars on GitHub

Momentum

stars in total
47
Star history of gabelul/stitch-kit on GitHub, a chart by star-history.com

Other skills on stitch-kit.

stitch-a11y

stitch-a11y

Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes,…

@gabelul@gabelulInstall Skill
stitch-animate

stitch-animate

Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte…

@gabelul@gabelulInstall Skill
stitch-design-md

stitch-design-md

Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex…

@gabelul@gabelulInstall Skill
stitch-design-system

stitch-design-system

Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4…

@gabelul@gabelulInstall Skill
stitch-html-components

stitch-html-components

Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom…

@gabelul@gabelulInstall Skill
stitch-ideate

stitch-ideate

Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive…

@gabelul@gabelulInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill

Questions about stitch-mcp-update-design-system.

Which coding agents can use stitch-mcp-update-design-system?
stitch-mcp-update-design-system installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.