What is the design-md skill?
The design-md skill is a SKILL.md in google-labs-code/stitch-skills. It makes an AI coding agent read a Stitch project with the Stitch MCP tools, download a screen's HTML and screenshot, and write a DESIGN.md in five sections: theme, color roles, typography, components and layout. Other prompts then reuse it.
The design-md skill is part of Google's stitch-skills collection and sits in the stitch-utilities plugin. It analyzes a project in Google Stitch and writes a DESIGN.md that the project calls a semantic design system.
The collection says it is not an officially supported Google product. The skill needs the Stitch MCP server, because it reads the project through the list_projects, list_screens, get_screen and get_project tools.
What changes in your agent's output
- The agent downloads a screen's HTML and screenshot from Stitch before it writes anything.
- DESIGN.md has five sections: Visual Theme and Atmosphere, Color Palette and Roles, Typography Rules, Component Stylings and Layout Principles.
- Colors are written as a descriptive name, a hex value and a role, instead of a bare hex.
- CSS is translated into plain language, so
rounded-fullbecomes pill-shaped.
Who the design-md skill is for
Best for
- Keeping later Stitch prompts on the same look by reusing one DESIGN.md.
- Handing a design's rules to a coding agent in a form it can follow.
- Projects built in Stitch that need a written design record.
Not for
- Projects not built in Stitch. The skill reads Stitch through MCP.
- Extracting tokens from a live website. See the designlang MCP for that.
- Writing a Stitch taste guide from scratch. stitch-design-taste encodes taste rules.
Use it with UiChemy
UiChemy covers the step after Stitch: bring a design or an AI build into WordPress. AI to WordPress imports an existing AI build or clones a site, and Composer edits the result in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Design MD Skill: Write a DESIGN.md From a Stitch Project
git clone https://github.com/google-labs-code/stitch-skills.gitSet up the Stitch MCP server
These skills assume the Stitch MCP server is configured in your agent. Follow the Stitch MCP setup docs first.
Clone the repository
Run
git clone https://github.com/google-labs-code/stitch-skills.git. This skill is at plugins/stitch-utilities/skills/design-md.Copy the skill folder
Copy that folder into your agent's skills folder with every file in it. The project's own plugin installer,
npx plugins add google-labs-code/stitch-skills, is the alternative and installs the whole collection.Invoke it
Ask your agent to use design-md on a named Stitch project and screen. Review the DESIGN.md it writes before you reuse it.
Check that it loaded
Run it on one Stitch screen. You should get a DESIGN.md with five headed sections, colors listed as name, hex and role, and component descriptions in plain words. If the agent cannot list projects, the Stitch MCP is not connected.
Key features
- Reads Stitch through MCPIt uses list_projects, list_screens, get_screen and get_project to locate the right project and screen.
- HTML and screenshotThe agent downloads both the screen's HTML and its screenshot to describe what is actually there.
- Five-section outputTheme, color roles, typography, component styles and layout principles make up every DESIGN.md.
- Descriptive color namesEach color gets a human name, a hex value and a functional role.
- Plain-language translationTechnical CSS becomes words a designer or a prompt can use, such as pill-shaped for fully rounded corners.
- Reusable prompt contextThe file is meant to be injected into later Stitch prompts to keep screens consistent.
- Prompting guide referenceThe skill points to the Stitch effective prompting guide for vocabulary.
- Limited tool accessThe skill allows the Stitch MCP, Read, Write and web_fetch.
Frequently asked questions
What is the design-md skill?
It is a skill in google-labs-code/stitch-skills, in the stitch-utilities plugin. It makes an AI coding agent read a Stitch project through MCP and write a DESIGN.md describing the design in five sections: theme, colors, typography, components and layout.
How do I install design-md?
Set up the Stitch MCP server first. Then clone google-labs-code/stitch-skills and copy plugins/stitch-utilities/skills/design-md into your agent's skills folder, or use the project's plugin installer for the whole collection. Ask the agent to run it on a Stitch project.
What does DESIGN.md contain?
Visual Theme and Atmosphere, Color Palette and Roles, Typography Rules, Component Stylings and Layout Principles. Colors appear as a descriptive name with a hex value and a role, and CSS is rewritten in plain language.
Do I need Stitch to use it?
Yes. The skill reads a project through the Stitch MCP tools and downloads screen files from it. For a similar record of a live website instead, use an extraction tool like the designlang MCP.
Is it an official Google product?
The repository's README says it is not an officially supported Google product. It lives under the google-labs-code organization on GitHub. Treat it as a community-grade project and test it on a copy of your work.
Which AI agents can use design-md?
The README lists Codex, Antigravity, Gemini CLI, Claude Code, Cursor and OpenCode, with OpenCode set up manually. Each agent also needs the Stitch MCP server configured to read projects. Check your agent's documentation for where skills folders live.
How does it fit with the other Stitch skills?
Run design-md first to capture the look, use enhance-prompt to inject it into prompts, and stitch-loop to generate pages in sequence. For taste rules written ahead of time, see stitch-design-taste.