stitch-a11y
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes,…
Updates an existing Stitch Design System's theme, tokens, or guidelines. Requires the asset name from create or list operations.
Claude Code
$ npx -y skills add gabelul/stitch-kit --skill stitch-mcp-update-design-system --agent claude-code
Codex
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-update-design-system -a codex -y
Cursor
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-update-design-system -a cursor -y
Gemini CLI
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-update-design-system -a gemini-cli -y
GitHub Copilot
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-update-design-system -a github-copilot -y
OpenCode
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-update-design-system -a opencode -y
Windsurf
$ npx skills add gabelul/stitch-kit --skill stitch-mcp-update-design-system -a windsurf -y
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:
{
"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"
}
}
}
}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 |
| 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.
Returns the updated Asset object:
{
"name": "assets/15996705518239280238",
"displayName": "SaaS Dashboard Theme v2",
"designSystem": { ... }
}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.
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes,…
Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte…
Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex…
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4…
Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom…
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive…
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
Ask which skill or flow fits your situation. A router over the skills in this repo.