Skip to content
Get packs

Manage Stitch Design Systems

Create, update, and apply reusable design systems to Google Stitch projects via MCP tools.

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
3 files

What it does

This skill teaches an AI agent how to work with Google Stitch, a design tool, to set up a project-wide design system (colors, fonts, roundness and similar rules) that acts as a single source of truth. The agent can read an existing Stitch project's screens, or build a DESIGN.md file from a plain-language description, then upload it to Stitch, create the design system, and apply it to existing screens. It also keeps a small metadata.json file in sync with the project.

Great for

  • Designers who want new Stitch screens to share one consistent visual style
  • Front-end developers starting a new Stitch project from a written brand description
  • Teams standardising colours, fonts and roundness across many generated screens

Skip it if

  • Users without a Stitch account or MCP access, since every step depends on Stitch tools and an API key
  • Anyone who wants the upload run automatically without review: the skill requires explicit user approval before uploading, and an agent that skips this checkpoint would send design data to Stitch
  • Projects where the design files must stay offline, because the upload script sends DESIGN.md content to Google's Stitch API over the network

Try asking

  • “Create a design system for my project from this description: dark theme, blue and purple, rounded corners, Inter font”
  • “Pull the design language from my Stitch project's Home screen and save it as a DESIGN.md”
  • “Apply the existing design system to all screens in project 1234”
  • “Update .stitch/metadata.json with the current screens and design system summary”
Step-by-step guide: how to use Manage Stitch Design SystemsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    manage-design-system.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip manage-design-system.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip manage-design-system.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Review the design summary the agent presents before approving the upload, since it becomes project-level design data in Stitch.
  • Pass your API key via an environment variable or secure config rather than pasting it into chat, because the example command places it on the command line.
  • Install the companion stitch-utilities skills (design-md, generate-design) too, as this skill depends on them for structure and colour mapping.

What's inside

  • examples/metadata.json
  • reference/tool-schema.md
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.