PlugWiki

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

Makes your agent read a Google Stitch project and write a DESIGN.md describing its look in plain words and hex codes.

Installs
65.4K
on skills.sh
Stars
8.7K
on GitHub
Files
2
besides SKILL.md
Updated
Aug 2026
last repo commit

design-md makes the agent analyze a project in Google Stitch and write a DESIGN.md file. It looks up your project and screen through the Stitch MCP server, downloads the screen's HTML and screenshot, then describes the atmosphere, color palette, shapes and depth in natural language with exact hex codes.

The point is a source of truth you can use when prompting Stitch for new screens that match the old ones. It needs the Stitch MCP server set up first. The repo README says this is not an officially supported Google product.

Good for

  • Designers using Google Stitch who want a reusable design brief
  • Developers who need a design system written from a Stitch screen
  • Teams prompting Stitch to make new screens that match old ones

Install design-md

Claude Code

  1. 1

    Copy this prompt.

    Install the design-md skill in Claude Code. Run this command:

npx skills add google-labs-code/stitch-skills --skill design-md --global

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Set up the Stitch MCP server first (https://stitch.withgoogle.com/docs/mcp/setup/); the skill cannot read a project without it. Pick one route. The plugins route installs the whole Stitch suite into the current project, not just design-md. The repo README warns that Stitch skills often depend on each other, so include dependencies if you choose skills one by one.

From the project README. Source.

What's in the skill

When it loads

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Sections in SKILL.md

  1. Overview
  2. Prerequisites
  3. The Goal
  4. Retrieval and Networking
  5. Analysis & Synthesis Instructions
  6. 1. Extract Project Identity (JSON)
  7. 2. Define the Atmosphere (Image/HTML)
  8. 3. Map the Color Palette (Tailwind Config/JSON)
  9. 4. Translate Geometry & Shape (CSS/Tailwind)
  10. 5. Describe Depth & Elevation
  11. Output Guidelines
  12. Output Format (DESIGN.md Structure)
  13. 1. Visual Theme & Atmosphere
  14. 2. Color Palette & Roles
  15. 3. Typography Rules
  16. 4. Component Stylings

Key facts

Author
google-labs-code (repo owner)
Installs on skills.sh
65,365 (Nov 2, 2026)
GitHub stars
8,653 on the stitch-skills repo (Nov 2, 2026)
License
Apache-2.0
Last commit
2026-08-17
What installs
3 files including SKILL.md: README.md and examples/DESIGN.md
Needs
The Stitch MCP server set up, and a Stitch project with at least one designed screen
Works in
Codex, Antigravity, Gemini CLI, Claude Code, Cursor and OpenCode (manual install), per the README
Allowed tools
Any Stitch tool, Read, Write and web_fetch (from its frontmatter)

What it includes

  • Runs list_tools to find the Stitch MCP prefix

    Uses that prefix for every later call.

    Runs code · Namespace discovery

  • Calls list_projects and list_screens to find the target IDs

    Skipped when you give the project and screen ID.

    Network · Project and screen lookup

  • get_screen and get_project return screenshot and HTML URLs and the design theme

    Includes color mode, fonts, roundness and custom colors.

    Network · Metadata fetch

  • Fetches the screen HTML and optionally the screenshot with web_fetch

    Parses Tailwind classes, custom CSS and component patterns from the HTML.

    Network · Asset download

  • Describes the mood with evocative adjectives

    For example airy, dense, minimalist or utilitarian.

    Define the atmosphere

  • Names each color, gives its hex code and its role

    For example Deep Muted Teal-Navy (#294056) for primary actions.

    Map the color palette

  • Turns border radius values into plain descriptions

    rounded-full becomes pill-shaped; rounded-none becomes sharp, squared-off edges.

    Translate geometry and shape

  • Explains shadows and layering

    From flat to heavy drop shadows.

    Describe depth and elevation

  • Creates DESIGN.md in the project directory in a fixed structure

    Uses the Write tool.

    Write · Write DESIGN.md

  • A sample output file

    Shows the expected format.

    Read · examples/DESIGN.md

From the official docs

Permissions

Medium risk

It uses your Stitch account through an MCP server and writes a file in your project. Check which project it reads and where it saves the file.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • It acts on your Stitch account

    It lists your projects and reads screens through the Stitch MCP server. Make sure the server credentials only reach what you want shared.

  • It downloads files from URLs Stitch returns

    The skill uses web_fetch for the screen HTML and screenshot. Check the downloads came from your own Stitch project.

  • It writes DESIGN.md into your project

    Its frontmatter lists the Write tool, so it can create or overwrite that file. Commit first so you can compare.

  • The plugin routes install the whole Stitch suite

    The README's Claude Code and Codex routes set up three plugins that hold 16 skills in the repo, not just design-md. Some of them bundle shell, TypeScript, Python or Node scripts (for example fetch-stitch.sh and upload_to_stitch.py). The plugin manifests list no hooks or MCP servers. The skills CLI route with --skill design-md installs only this skill, which bundles no scripts.

Technical details
Talks toStitch MCP server. URLs returned by Stitch

Questions

What does design-md do?

It makes Claude turn a Stitch project into a DESIGN.md file. The file describes the design system in natural language with hex codes, so it can steer Stitch when you generate new screens.

How do I install design-md?

Use the install box above and set up the Stitch MCP server first. The skill README lists npx skills add google-labs-code/stitch-skills --skill design-md --global, and the repo README also lists a plugins route for Claude Code and a Codex marketplace.

Does it need the Stitch MCP server?

Yes. The SKILL.md lists access to the Stitch MCP server and a Stitch project with at least one designed screen as prerequisites, and the repo README links the setup guide.

How is it different from extract-design-md?

Per the repo README, design-md analyzes Stitch projects and generates a DESIGN.md. extract-design-md, a different skill in the same repo, extracts one directly from frontend source code.

Is it safe to use?

It connects to your Stitch account through the MCP server, downloads files from URLs that Stitch returns and writes a DESIGN.md in your project. Check where it saves the file before approving.

Does it work in Codex or Cursor?

The repo README says the Stitch skills are compatible with Codex, Antigravity, Gemini CLI, Claude Code, Cursor and OpenCode (manual install). It documents plugin routes for Codex, Claude Code and Cursor.

Does it work in the Claude app?

This page shows no Claude app route. The skill reads your project through the Stitch MCP server, and the Stitch README documents setting that server up for coding agents, not for the Claude app. Use Claude Code, Codex or another agent from the install box.

Information

updated Nov 2, 2026

Repository
google-labs-code/stitch-skills
Folder
plugins/stitch-utilities/skills/design-md

google-labs-code/stitch-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5
  1. design-md README · github.com
  2. stitch-skills README · github.com
  3. design-md SKILL.md · github.com
  4. skills CLI commands · github.com
  5. stitch-utilities plugin.json · github.com

Updated Nov 2, 2026.