Skip to content
Get packs

Stitch DESIGN.md Generator

Turns a Stitch project's screens into a DESIGN.md design-system file for generating matching screens

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
3 files

What it does

Once installed, the agent can read a project from Google's Stitch design tool through the Stitch MCP Server, pull a screen's HTML/CSS, screenshot and theme settings, and write a DESIGN.md file. That file describes the project's mood, named colours with hex codes, corner shapes, shadows, typography and layout in plain language, so future prompts to Stitch can produce new screens that match the existing look.

Great for

  • Designers who want a written style guide that Stitch can follow for new screens
  • Front-end developers documenting an existing Stitch design for their team
  • Teams keeping several Stitch screens visually consistent

Skip it if

  • Projects not built in Stitch, since the skill depends on the Stitch MCP Server data (the skill cannot read other design tools)
  • Anyone expecting exact design-token exports, because the output is an interpretive natural-language description and colours may be approximated from HTML

Try asking

  • “Create a DESIGN.md for my Furniture Collection project in Stitch”
  • “Analyze the Home page screen and summarise its colour palette and button shapes into DESIGN.md”
  • “Generate a design system document from my Stitch landing page so new screens match it”
Step-by-step guide: how to use Stitch DESIGN.md GeneratorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    design-md.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip design-md.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip design-md.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide the Project ID and Screen ID up front to skip the lookup steps and save time
  • Review the generated hex codes against the screenshot, since the skill asks for exact values but they are derived from the HTML
  • Check examples/DESIGN.md in the repository to see the expected output format before running it

What's inside

  • examples/DESIGN.md
  • README.md
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.