Stitch Design System

Configure and apply visual themes for Google Stitch projects via the mcp__stitch__* tools. This skill governs color, typography, and shape tokens — not screen content or layout (see other stitch-* skills for that). It runs in both directions: the sections below through "Reference files" cover authoring a design system into Stitch (Path A or Path B); the "Exporting a design system out of Stitch" section covers the reverse — reading an existing project's theme back out to local files.

Two paths to a design system

Every design system starts from one of two inputs. Pick the path based on what the user gives you.

Path A — Structured tokens. Use when the user states concrete brand values: a hex color, named fonts, "rounded corners," "dark mode," or a style adjective you can map to tokens (see the recipe table below). Call create_design_system, then immediately update_design_system.

Path B — DESIGN.md. Use when the user already has a written design document, brand guidelines file, or free-form prose describing their visual style at length (more than a few bullet points). Call upload_design_md, then immediately create_design_system_from_design_md. Full detail, including a worked example and the exact base64 steps for each OS, is in references/design-md.md — open it before running this path.

If the user gives you both a document and specific overrides ("use our brand doc, but make the primary color #FF0000"), prefer Path B for the base system, then follow up with update_design_system to layer the override on top.

Mandatory call pairs — do not skip the second call

Both creation paths are two-call sequences. The Stitch tools' own documentation states this explicitly, and skipping the second call is the single most common failure mode: