Kipt

Your prompts and skills, one keystroke away.

Explore

design-md skill: turn a Stitch project into a DESIGN.md

The design-md skill from google-labs-code reads a Stitch project and writes a DESIGN.md that describes its colors, type and layout. How to install and use it.

By the Kipt team · Updated 28 October 2026

Source: google-labs-code/stitch-skills · Maintainer: Google Labs Code (google-labs-code) · License: Apache-2.0 · Checked: 28 October 2026

What is the design-md skill?

The design-md skill has a coding agent read a Google Stitch project and write a DESIGN.md file: a plain-language description of the design system, with exact hex codes, that you then use when prompting Stitch for new screens. It is for people who design in Stitch and want every new screen to match the ones they already have.

It ships in google-labs-code/stitch-skills, which the README calls "A collection of agent skills and plugins for Google Stitch." The repo's contributing guide asks for Google's Contributor License Agreement and follows Google's open source community guidelines; several source files carry a "Copyright 2026 Google LLC" notice, and the README says, "This is not an officially supported Google product."

The skill's description reads: "Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files." As of 28 October 2026, its skills.sh page listed about 65,000 installs (snapshot, 28 October 2026), the most of the 18 stitch-skills entries listed there.

What does it do?

The SKILL.md casts the agent as "an expert Design Systems Lead" and gives it a retrieval step, an analysis step and a fixed output format. The folder also holds a README.md and examples/DESIGN.md, a finished sample for a furniture collections project.

Retrieval. The agent works through the Stitch MCP server. It runs list_tools to find the server's prefix, then uses list_projects, list_screens, get_screen and get_project to find your project and screen. get_screen returns download links for the screen's HTML and CSS and a screenshot; get_project returns the designTheme with color mode, fonts, roundness and custom colors. The agent downloads the HTML and reads the Tailwind classes and custom CSS.

Analysis. Five steps turn code into words:

  • Project identity: the title and project ID.
  • Atmosphere: the mood in adjectives such as "Airy," "Dense," "Minimalist."
  • Colors: a descriptive name, the hex code and the job, for example "Deep Muted Teal-Navy" (#294056) for primary actions.
  • Geometry: rounded-full becomes "Pill-shaped," rounded-lg becomes "Subtly rounded corners."
  • Depth: how shadows behave, from "Flat" to "Heavy, high-contrast drop shadows."

Output. A DESIGN.md with five numbered sections:

Section What it holds
Visual Theme & Atmosphere Mood, density and aesthetic philosophy
Color Palette & Roles Name, hex code and functional role per color
Typography Rules Font family, weights for headers and body, letter spacing
Component Stylings Buttons, cards and containers, inputs and forms
Layout Principles Whitespace, margins and grid alignment

The rules ask for designer language over class names ("generously rounded corners," not rounded-xl), exact values in parentheses, and the reason behind each choice. The skill's README sums up the pipeline as retrieval, extraction, translation, synthesis and alignment with the Stitch prompting guide.

How do you install the design-md skill?

First set up the Stitch MCP server. The repo README says the skills need it "configured and running in your agent's environment" and points to Google's Stitch MCP setup instructions for credentials and environment variables.

Just this skill. The command on skills.sh uses the skills CLI:

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

The skill's own README uses npx skills add google-labs-code/stitch-skills --skill design-md --global to install it for all projects. Claude Code reads skills from .claude/skills/ in a project or ~/.claude/skills/ globally, per the Claude Code skills docs.

As a plugin. design-md is part of the stitch-utilities plugin, next to enhance-prompt, stitch-loop, taste-design and site-md. For Claude Code, the README gives:

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

For Cursor, swap in --scope workspace --target cursor. For Codex, run codex plugin marketplace add google-labs-code/stitch-skills --ref main, then install stitch-utilities. See Codex skills and Cursor skills.

OpenCode. The README says OpenCode needs a manual copy of the skill folder into .opencode/skills/ and a remote MCP entry for Stitch.

How do you use it?

Name the project and, if you know it, the screen. The repo README's example is "Analyze Stitch project projects/123 and generate a DESIGN.md."

Example prompts (suggestions, not quotes from the repo):

  • Generate a DESIGN.md from the Home screen of my "Recipe Box" Stitch project.
  • List my Stitch projects, then write a DESIGN.md for the one called Checkout v2.
  • Rewrite the color section of DESIGN.md so every color has a functional role.
  • Compare the Settings screen to our DESIGN.md and list anything that doesn't match.

The last two lean on the format rather than the retrieval steps, so check the result against the template. Once the file exists, paste the relevant sections into your Stitch prompts, or upload it with the repo's stitch::manage-design-system skill.

Tips and limits

From the repo and skills.sh, not from testing:

  • Stitch only. It needs the Stitch MCP server and a project with at least one designed screen. To derive a DESIGN.md from React, Vue, Svelte, Angular or plain CSS source instead, the same repo has stitch::extract-design-md, with a reference file per framework.
  • Not the DESIGN.md spec format. The same google-labs-code org also publishes a DESIGN.md format spec that combines "machine-readable design tokens (YAML front matter or interleaved YAML code blocks) with human-readable design rationale." The skill's template is prose with hex codes and no YAML block, so add tokens yourself if you want the spec's npx @google/design.md lint checks.
  • Tool names vary by agent. allowed-tools lists stitch*:*, Read, Write and web_fetch. The repo README warns that tool names inside skill instructions may differ in OpenCode.
  • It writes one file. The skill creates DESIGN.md in the project directory and runs no scripts.
  • Security audits. On skills.sh, Snyk rated the skill Warn (medium risk) on 15 September 2026 for third-party content exposure, because the workflow parses screen HTML fetched from a Stitch project as free text; Snyk scored the risk low (0.10). Gen Agent Trust Hub rated it Pass (Safe) on 15 September 2026, noting tools limited to the Stitch namespace and web_fetch. Socket rated it Pass on 15 September 2026.
  • License. The folder has no license of its own, so the repo's Apache License 2.0 applies. You can copy and modify it if you include the license and mark files you changed.

Save it in your Kipt library

The template is the part worth editing: add a section for motion or icons, or rename sections to match your team's design docs. In Kipt, open Skills and paste the skill's GitHub folder link into the import box, or drop the folder or a .zip; the example DESIGN.md comes with it. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Google or google-labs-code.

Similar skills

Questions

What is the design-md skill?

design-md is an Agent Skill in google-labs-code/stitch-skills, a collection of skills for Google Stitch. It has the agent pull a Stitch project's screens through the Stitch MCP server and write a DESIGN.md file that describes the design system in plain language with exact hex codes.

How do I install the design-md skill?

Run npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md, the command on skills.sh. The skill's own README adds --global to install it for all projects. It belongs to the stitch-utilities plugin, which the repo README shows how to install for Codex, Claude Code and Cursor.

Does the design-md skill work without Google Stitch?

No. Its prerequisites are access to the Stitch MCP server and a Stitch project with at least one designed screen. To build a DESIGN.md from your own frontend code instead, the same repo has a separate skill, stitch::extract-design-md.

What goes in the DESIGN.md it writes?

Five sections: visual theme and atmosphere, color palette and roles, typography rules, component stylings, and layout principles. Colors get a descriptive name, a hex code and a functional role, and CSS values such as rounded-full become words like pill-shaped.

Is design-md the same as the DESIGN.md format spec?

They are related but separate. The google-labs-code/design.md repo defines a format that combines YAML design tokens with prose and ships a lint command. The design-md skill's template is a prose-only Markdown file with hex codes and no YAML front matter.

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.