stitch::manage-design-systemby Google Labs

Stitch Manage Design System Skill.

A Claude Code and Codex skill for brand and design-system work: creates, updates, and applies design systems in Stitch through MCP tools.

Brand & Design Systems
Design system

Download OpenDesign View usage guide

google-labs-code/stitch-skills · plugins/stitch-design/skills/manage-design-system/SKILL.mdSKILL.md

--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata

Front matter and section headings read from the upstream file on 2026-09-14 · 5,630 characters in full

01 What it does

What the stitch::manage-design-system Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Manages the design system that acts as a project's source of truth in Stitch, using MCP tools. It retrieves project metadata and screen assets (list_projects, list_screens, get_screen, read_url_content), synthesizes tokens either from existing screens via the design-md skill or from a plain description, writes .stitch/DESIGN.md, then uploads the markdown and calls create_design_system_from_design_md.

A hard checkpoint requires user approval of the display name, colors, fonts and roundness before anything is uploaded. After creation, apply_design_system pushes the tokens onto existing screens using only screen instance ids, and .stitch/metadata.json records the project, screens, and design system summary.

What it produces

A DESIGN.md design file generated for the project.
A .stitch/metadata.json file tracking the project id, title, all known screens and a design system summary.
Project-level design tokens held inside Stitch, which later generation prompts do not need to restate.

See the example prompt ↗

How It Works

01
Retrieve Project and Screen Assets
list_projects finds the target projectId, list_screens surfaces representative screens such as Home or Main Dashboard, and get_screen returns the screenshot and htmlCode download URLs before the HTML is fetched.
02
Synthesize the Design System
Existing screens are interpreted with the design-md skill; a brand-new project or a direct description is handled by mapping the user's loose words onto precise values first.
03
Upload DESIGN.md and Create the Design System
The recommended uploader script base64-encodes the markdown in-process and posts it to the project's batchCreate endpoint, bypassing output token limits; create_design_system_from_design_md then runs with the projectId and the returned screen instance.
04
Apply the System to Existing Screens
apply_design_system takes the projectId, the assetId, and a list of screen instances so already-built screens adopt the stored tokens.

02 Find your fit

When to Use the stitch::manage-design-system Skill

Use the stitch::manage-design-system skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

A project that needs one authoritative design language holding future screens together.
A new Stitch project with no screens yet, where the user only supplies a written style description.
Reverse-engineering a design system out of screens that already exist in the project.

Know the Boundaries

Any DESIGN.md over roughly 5KB cannot go through the direct MCP upload tool and needs the script path instead.
Guidance on how to describe design elements is not in this file; it is delegated to another skill.
The full designSystem object schema is not written out here; it lives in a separate reference file.

What to Provide

The Stitch project idIdentifies which project the design system belongs to, and is needed by the upload script and every MCP call afterwards.
Representative screensScreens such as Home or Main Dashboard act as the visual source when tokens are extracted from an existing project.
A plain-language style descriptionUsed when no screens exist, for example a short phrase naming palette, roundness and font.
Script arguments for the uploadThe uploader script needs project id, file path, API key and a generated-by value passed on the command line.

03 Inside the skill

Rules the stitch::manage-design-system Skill Gives Claude Code and Codex

6 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Stop for User Approval Before Upload
The skill must pause and ask before uploading anything to Stitch, presenting display name, key colors, fonts and roundness, and wait for explicit approval.
Send Only Id and sourceScreen When Applying
selectedScreenInstances carries no position or dimension data at all, just the two identifying fields.
Exclude design-system Instances from the Target List
Instances typed DESIGN_SYSTEM_INSTANCE are filtered out; only real screens get passed to apply_design_system.
Tag Who Generated the Markdown
The generated-by argument names the skill or tool that produced the DESIGN.md; omitting it falls back to a fixed default label.
Create the System Right After the Upload
create_design_system_from_design_md is called immediately after the upload step, with the projectId and selectedScreenInstance.
Read the Asset Id Out of the Design System Name
list_design_systems returns a name in the form assets/{assetId}; the part after assets/ is the assetId used when applying.

04 Put it to work

Install stitch::manage-design-system in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add stitch::manage-design-system to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::manage-design-system

Generic skills CLI form for plugins/stitch-design/skills/manage-design-system/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Confirm the upload actually returned both identifiers before moving on.
Verify that both the upload script and the create call finished, since only then are the tokens stored at project level.
Pull the screen instance ids from get_project rather than guessing them, so apply_design_system has valid targets.
Check the generated DESIGN.md against the structure defined elsewhere before uploading it.

In OpenDesign import stitch::manage-design-system from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
Skill file: plugins/stitch-design/skills/manage-design-system/SKILL.md Content checksum recorded at verification; commit 0337446
License: Apache-2.0 From LICENSE.
Repository stars: 8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for stitch::manage-design-system.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

📥 RetrievalFour ordered steps to pull project, screen and HTML assets through Stitch MCP tools.
🧠 Synthesis from DescriptionWhen to reuse the design-md skill and how to turn vague wording into concrete values.
📝 Output StructureSays DESIGN.md follows the structure defined in the design-md skill.
🚀 Create or Update Design System in StitchTwo-step upload and create flow behind a mandatory user-confirmation checkpoint.
🎨 Apply Design System to ScreensExact JSON shape plus the three steps for gathering the required ids.
📋 Update Project MetadataWrite .stitch/metadata.json with project id, title, screens and system summary.
Schema ReferencePoints to reference/tool-schema.md for the full designSystem object schema.
💡 Best PracticesDefers design-element description advice to the design-md skill.

The Skill's Own Description

“- Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.”

Front-matter description from SKILL.md. The full file is about 5,630 characters. Read the full file on GitHub.

06 Before you install

Questions About the stitch::manage-design-system Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does anything get uploaded to Stitch without me agreeing to it?

No. There is an explicit checkpoint: the skill must present a summary of the design system it is about to create, covering display name, key colors, fonts and roundness, and wait for approval before uploading.

What if my DESIGN.md is larger than a few KB?

Use the recommended uploader script instead of the direct MCP tool. It base64-encodes the markdown in-process and sends it to the batchCreate endpoint, which sidesteps output token limits.

Where do the ids for applying a design system come from?

get_project returns the screenInstances with their id and sourceScreen, again filtered to real screens only.

Can it work on a brand-new project with no screens at all?

Yes. When there are no screens or the user gives a direct description, the skill maps the vague terms to precise values, choosing concrete hex codes, font families and roundness, then generates DESIGN.md.

Stitch Manage Design System

Run stitch::manage-design-system on a Real Brand and design-system Work Task.

Download OpenDesign, import stitch::manage-design-system from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills