一键导入
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Updates an existing Stitch Design System's theme, tokens, or guidelines. Requires the asset name from create or list operations.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
Master entry point for all Stitch design workflows. Routes from user request → design spec → prompt assembly → screen generation → iteration (edit, variants, design systems) → design system extraction → framework conversion (Next.js, Svelte, HTML, React Native, or SwiftUI) → optional quality pass.
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.
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.
Creates a reusable Stitch Design System from theme tokens — colors, fonts, roundness, saturation. Can be applied to future screens for visual consistency.
Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.
| 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*:*"] |
Updates an existing Stitch Design System. Use this to modify theme properties, design tokens, or style guidelines without creating a new design system.
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:
stitch-mcp-list-design-systemsname returned from stitch-mcp-create-design-system{
"name": "update_design_system",
"arguments": {
"designSystem": {
"name": "assets/ds_abc123",
"displayName": "SaaS Dashboard Theme v2",
"theme": {
"colorMode": "DARK",
"font": "GEIST",
"headlineFont": "GEIST",
"bodyFont": "GEIST",
"labelFont": "GEIST",
"roundness": "ROUND_TWELVE",
"saturation": 2,
"customColor": "#818CF8",
"backgroundLight": "#F9FAFB",
"backgroundDark": "#09090B"
},
"designTokens": "--color-primary: #818CF8;\n--color-bg: #09090B;",
"styleGuidelines": "Dark mode first. Geist font. Subtle indigo accent."
}
}
}
designSystem — required, Asset wrapperThe object must include the name field (asset identifier) plus any fields you want to update:
| Field | Type | Required | Description |
|---|---|---|---|
name | string | Yes | Asset name from create or list (e.g., assets/ds_abc123) |
displayName | string | No | Updated human-readable name |
theme | DesignTheme | No | Updated visual configuration (see stitch-mcp-create-design-system for full reference) |
designTokens | string | No | Updated CSS custom properties |
styleGuidelines | string | No | Updated design rules |
Note: This is a full replacement, not a merge. Include all theme fields you want to keep, not just the ones you're changing.
Returns the updated Asset object:
{
"name": "assets/ds_abc123",
"displayName": "SaaS Dashboard Theme v2",
"designSystem": { ... }
}
stitch-mcp-apply-design-system