Stitch Wand
Wire Google Stitch design tokens into your agent workflow so you can validate, diff, and export a consistent design system without leaving the IDE.
Overview
Stitch Wand is a MCP server for the Build phase that converts, validates, diffs, lints, generates, and exports Google Stitch design tokens for agent-driven design-system work.
What is this MCP server?
- Convert, validate, diff, and lint Google Stitch design-md and design-token payloads
- Generate and export token sets for downstream design-system and implementation handoff
- Accessibility-oriented checks aligned with design-system workflows (tags: accessibility, figma)
- stdio npm package @stitchwand/mcp-server v0.1.1 for local Claude Code / Cursor registration
- Stitch Wand publisher tags: design-tokens, design-system, google-stitch, design-md
- MCP server version 0.1.1
- npm package @stitchwand/mcp-server (stdio transport)
- Publisher tags include design-tokens, design-system, google-stitch, design-md, accessibility, figma
What problem does it solve?
Design tokens from Google Stitch are easy to break with manual edits, so UI and agents drift from the real design system without automated validate-and-diff tooling.
Who is it for?
Indie builders using Google Stitch or design-md who want Claude or Cursor to gate token changes before they hit production CSS or component libraries.
Skip if: Teams with no Stitch or token pipeline who only need generic color pickers or full Figma file authoring outside token export.
What do I get? / Deliverables
After you register Stitch Wand, your agent can programmatically check and export Stitch tokens so frontend implementation matches the approved design-md source.
- Validated and linted Stitch-compatible token payloads
- Diff reports between token revisions
- Generated or exported token artifacts ready for frontend implementation
Recommended MCP Servers
Journey fit
Design tokens and Stitch exports land while you are implementing UI and theming, which is the canonical Build shelf even though tokens also inform later polish. Frontend is where token conversion, linting, and Figma-adjacent export paths directly affect components, spacing, and accessibility in the product.
How it compares
MCP design-token integration for Google Stitch, not a general-purpose browser automation or hosting skill.
Common Questions / FAQ
Who is Stitch Wand for?
Solo and small-team builders who treat Google Stitch design tokens as source of truth and want their coding agent to validate and export them safely.
When should I use Stitch Wand?
Use it during Build when you are syncing Stitch outputs to code, comparing token versions, or linting before a design-system release.
How do I add Stitch Wand to my agent?
Add the stdio MCP entry for npm package @stitchwand/mcp-server (v0.1.1) in your Claude Code, Cursor, or Windsurf MCP config, then restart the client.