Skip to content
Get packs

Guide · Agent skill

How to use the Stitch DESIGN.md Generator agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The design-md skill is an agent skill that reads a screen from a Google Stitch project and writes a DESIGN.md file describing its look in plain language. This guide explains what agent skills are, how to install this one, how to trigger it, and what it needs and does on your machine. By the end you will be able to generate a DESIGN.md for a Stitch screen and use it to prompt Stitch for new screens that match.

Stitch DESIGN.md Generatorgoogle-labs-code/stitch-skills · Apache-2.0

Quick start

  1. 1Download and unzip. Download the skill ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder.
  2. 2Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
  3. 3Confirm Stitch access. Make sure the agent can call stitch* tools through the Stitch MCP Server.
  4. 4Ask for a DESIGN.md. Request an analysis of a named Stitch project and screen, such as the Home screen.
  5. 5Review the output. Check the colours, hex codes and descriptions in the generated DESIGN.md against the screen.
  6. 6Use it to prompt Stitch. Reference the DESIGN.md when prompting Stitch for new screens that should match.

What the design-md skill makes the agent do

An agent skill is a folder with a SKILL.md file of instructions that an AI agent loads when a task matches it. This skill tells the agent to act as a design systems lead: analyse a Stitch project and write a file named DESIGN.md.

To do this, the agent uses the Stitch MCP Server to find the project and screen, then downloads the screen's HTML/CSS and screenshot. It then describes the mood, named colours with hex codes, corner shapes, shadows, typography and layout. The result is a source of truth you can use when prompting Stitch for new screens.

Install the design-md skill

Download the ZIP of the skill from this page and unzip it. The skill folder contains SKILL.md, README.md and an examples folder.

Install it in one of these ways. For a personal setup, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.

  • Personal: ~/.claude/skills/
  • Project only: .claude/skills/ inside your project
  • Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with a natural request

You do not need a special command. Ask the agent in plain language to analyse a Stitch project or screen and generate a DESIGN.md. The skill's instructions are meant to be triggered by requests like this.

The project's README gives this example prompt, which you can adapt to your own project and screen names.

Analyze my Furniture Collection project's Home screen and generate a comprehensive DESIGN.md file documenting the design system.

Check the Stitch connection before you start

The skill needs the Stitch MCP Server, so the agent must be able to call stitch* tools. The agent first runs list_tools to find the Stitch prefix, such as mcp_stitch:, and uses it for every later call. If that fails, the skill cannot read your project.

You need a Stitch project with at least one designed screen. If you do not give a project or screen ID, the agent looks them up by title using list_projects and list_screens.

  • Access to the Stitch MCP Server
  • A Stitch project with at least one screen
  • An MCP-capable agent runtime with stitch* tools available

Use the DESIGN.md file when prompting Stitch

The generated file follows a fixed structure: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, and Layout Principles. Each colour is given a descriptive name, its hex code and its functional role.

Paste or reference the file when you ask Stitch for new screens so the new designs follow the same language. Review the output before relying on it, because the colours may be approximated from HTML and the text is an interpretive description, not an exact token export.

  • Atmosphere: mood, density and philosophy
  • Colours: name, hex code and role
  • Components: buttons, cards and inputs
  • Layout: whitespace, margins and grid

Safety notes: scripts and network access

This skill does not run scripts. It does use the network: the agent calls Stitch MCP Server tools and uses web fetch to download the htmlCode and screenshot URLs for the screen. The skill's allowed tools are stitch* tools, Read, Write and web_fetch.

Because it reads and writes files, check the DESIGN.md it creates before committing it to a shared repository. The skill is licensed under Apache-2.0.

  • Runs scripts: no
  • Uses network: yes (Stitch MCP Server and web fetch of asset URLs)
  • Writes a DESIGN.md file in your project directory

What people use it for

  • Writing a style guide for a Stitch project so new screens follow the same look
  • Documenting an existing Stitch design for front-end developers on your team
  • Keeping several Stitch screens in a project visually consistent
  • Creating a shared reference of named colours with hex codes and their roles

Frequently asked questions

What is the design-md skill?

It is an agent skill that analyses a Google Stitch project and writes a DESIGN.md file. The file describes the project's mood, colours with hex codes, shapes, shadows, typography and layout in plain language.

How do I install the design-md skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills.

What do I need to use it?

You need Stitch MCP Server access with a Google Stitch account and project, an MCP-capable agent runtime with stitch* tools, and web fetch capability to download the screen's HTML and screenshot URLs.

Is the design-md skill free?

The skill is licensed under Apache-2.0, as stated on this page. Check the licence file in the repository for the full terms. Stitch access is a separate requirement.

Can it work with Figma or other design tools?

No. The skill depends on Stitch MCP Server data and can only read Stitch projects. It cannot read other design tools.

Why does the agent say it cannot find my project or screen?

The skill needs the Stitch MCP Server to be connected and a project with at least one designed screen. Check that stitch* tools are available to the agent, and try giving the exact project title or screen ID.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you work in Google Stitch and want a written style guide that Stitch can follow for new screens, or if you need to document a Stitch design for your team. Pick something else if your designs live outside Stitch or if you need exact design-token exports, since the output is an interpretive description with colours that may be approximated.

Download the skill