What is the stitch-manage-design-system skill?
The stitch-manage-design-system skill gives a Stitch project one source of truth for its design language. The agent writes or reads a DESIGN.md, asks you to approve a summary, uploads it, creates the design system with an MCP call, and can then apply that system to chosen screens.
The README sums it up as managing design systems in Stitch: upload a DESIGN.md and apply themes to screens. It is part of the stitch-design plugin in Google's stitch-skills repository and relies on the Stitch MCP server.
The point of a design system here is that Stitch holds the tokens at project level. After creation, later generation prompts no longer need to repeat colors, fonts or roundness.
Where the DESIGN.md comes from
- From existing screens. The agent finds the project and a representative screen, reads its screenshot and HTML URLs with get_screen, and defers to the design-md skill.
- From a description. For a new project, such as dark theme, blue and purple, rounded, Inter font, the agent maps vague terms to hex codes, font families and roundness values.
- From code. The extract-design-md skill writes the file, and this skill uploads it.
Two-step creation with a checkpoint
- The agent pauses and shows a summary of the design system to be created, covering display name, key colors, fonts and roundness. Nothing uploads until you approve.
- It uploads DESIGN.md, either with the uploader script, which sends the file in-process to the batchCreate endpoint, or with the upload_design_md tool for files under about 5KB.
- It calls create_design_system_from_design_md with the project ID and the returned screen instance.
- It can then call apply_design_system on selected screens.
Who the stitch-manage-design-system skill is for
Best for
- Teams that want every Stitch screen to share one palette and type system.
- Developers who generate a DESIGN.md from a codebase and need it inside Stitch.
- Designers retheming existing screens, since apply_design_system targets chosen screen instances.
Not for
- Writing the DESIGN.md format itself. The skill defers to design-md for that. Related: create-design-md.
- Generating screens. Use the generate-design skill once the system exists.
- Setups without the Stitch MCP server, since every step calls its tools.
Use it with UiChemy
A Stitch design system lives inside Stitch, not WordPress. UiChemy can bring a finished design into WordPress through AI to WordPress, Composer or Figma. Click Get Started on uichemy.com. Related: stitch-design-taste.
How to install Stitch Manage Design System Skill: Upload DESIGN.md and Apply It
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeConfigure the Stitch MCP server
Follow https://stitch.withgoogle.com/docs/mcp/setup/ and register the server with your agent, including the credentials that guide describes.
Install the plugin family
Claude Code users run
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. Cursor users run it with--scope workspace --target cursor. This skill is in stitch-design.Mind the dependencies
The README warns that Stitch skills depend on each other. If you install selectively, include the ones this skill calls, such as upload-to-stitch.
Have an API key ready
The uploader script option needs a Stitch API key, so set one up before you start.
Ask for the upload
Use a request like the README's, asking the agent to upload the design system from .stitch/DESIGN.md and apply it to all screens.
Check that it loaded
Ask the agent to upload your DESIGN.md. It should first show a summary of name, colors, fonts and roundness and wait for your approval, then upload and call create_design_system_from_design_md.
Key features
- Project and screen retrievallist_projects finds the project, list_screens finds screens such as Home or Main Dashboard, and get_screen returns screenshot and HTML download URLs.
- Synthesis from a descriptionFor a new project the agent maps loose wording to precise hex codes, font families and roundness values before writing DESIGN.md.
- User confirmation checkpointThe agent must present the display name, key colors, fonts and roundness, and wait for explicit approval before uploading.
- Uploader script optionA Python script base64-encodes the markdown file in-process and posts it to the batchCreate endpoint, which avoids output token limits.
- Direct MCP upload optionFor files under about 5KB, upload_design_md accepts the base64 content in a designMdBase64 field.
- Design system creationcreate_design_system_from_design_md takes the project ID and the selected screen instance returned by the upload step.
- Apply to screensapply_design_system takes a project ID, an asset ID and screen instances, and the instances may carry only id and sourceScreen or the request fails.
- ID lookup recipeget_project returns screen instances, list_design_systems returns the asset name, and instances of type DESIGN_SYSTEM_INSTANCE must be filtered out.
- Metadata and schema filesThe skill writes .stitch/metadata.json to track the project, screens and design system, and bundles a tool schema reference and an example metadata file.
Frequently asked questions
What does the stitch-manage-design-system skill do?
It creates and applies design systems inside Stitch. The agent turns a DESIGN.md into a project-level design system through two MCP steps, uploading the file and then creating the system, and can apply that system to chosen screens so they share the same tokens.
Why does the agent stop and ask me first?
The skill sets a user confirmation checkpoint before any upload. The agent must show the display name, key colors, fonts and roundness it plans to create and wait for your explicit approval, and it is told not to upload until you confirm.
How do I install the stitch-manage-design-system skill?
Register the Stitch MCP server, then run the repository's plugin install, for example npx plugins add google-labs-code/stitch-skills with a project scope and your agent as the target. Codex users add the repo as a plugin marketplace. It ships in stitch-design.
How is the DESIGN.md uploaded?
The recommended path is the bundled uploader script, which encodes the markdown in-process and sends it to the batchCreate endpoint, bypassing output token limits. For files under about 5KB, the upload_design_md MCP tool can take the encoded content directly.
Why did my apply_design_system call fail?
The SKILL.md warns that selectedScreenInstances must contain only id and sourceScreen. Including x, y, width or height fields causes an invalid argument error. Also filter out any instance whose type is DESIGN_SYSTEM_INSTANCE, since only real screens belong in the list.
Do I still describe colors in generation prompts?
No. Once the upload and create_design_system_from_design_md calls have both completed, Stitch holds the design tokens at project level, and you do not need to repeat them in generation prompts. Repeating them can conflict with the stored system.
What is the generated-by value for?
It tags which skill or tool produced the DESIGN.md. Inside another skill the agent passes that skill's name, and for standalone use it passes the agent or tool name. If it is omitted, the script falls back to a default value called UserUploadedDesignMd.