Skip to content
cccskills
FreePublished on GitHub

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.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md3.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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:

ArgumentTypeRequiredDescription
namestringYesAsset identifier with the assets/ prefix, e.g. assets/15996705518239280238. Top-level, not inside designSystem.
projectIdstringYesBare numeric project id, no projects/ prefix
designSystemobjectYes{displayName, theme} — see below

designSystem — {displayName, theme} only

FieldTypeRequiredDescription
displayNamestringYesHuman-readable name
themeDesignThemeYesVisual 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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus management, and screen reader support.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

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

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and Stitch-ready prompt snippets. Use this before stitch-loop or any multi-page build to establish design consistency.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

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. Run this before framework conversion skills.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom properties for theming, dark mode via prefers-color-scheme, mobile-first responsive, zero framework dependencies. Works in browsers, WebViews, Capacitor, and Ionic. Only the Stitch route needs an API key.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

See all skills by gabelul

Report a problem with this skill