83.3K+Download
Skip to the usage guide
design-mdby Google Labs

Design MD Skill.

A Claude Code and Codex skill for brand and design-system work: analyzes Stitch projects and writes a semantic DESIGN.md.

  • Brand & Design Systems
  • DESIGN.md
Download OpenDesignView usage guide
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
Front matter and section headings read from the upstream file on 2026-09-14 · 7,644 characters in full

01 What it does

What the design-md Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill turns an existing Stitch project into a DESIGN.md that serves as the source of truth for prompting Stitch to generate new screens in the same design language. It is for designers and developers with Stitch MCP access and at least one designed screen: the skill discovers the MCP namespace, resolves the project and screen IDs, fetches the screen object plus its HTML and screenshot, and reads the project designTheme.

It then documents the visual theme and atmosphere, colors as descriptive names with hex codes and functional roles, typography, component stylings and layout principles, in evocative design language rather than raw technical values.

What it produces

  • A five-part design system covering visual theme and atmosphere, the color palette with roles, typography rules, component stylings for buttons, cards and inputs, and layout principles.
See the example prompt ↗

How It Works

  1. 01
    Discover the MCP Namespace

    Run list_tools to find the Stitch MCP prefix, then reuse that prefix for every later call to the server.

  2. 02
    Resolve Project and Screen

    List owned projects when no Project ID is given, then list screens for the numeric project ID and match a screen title such as Home or Landing Page.

  3. 03
    Fetch the Screen Object and Assets

    get_screen returns the screenshot and HTML download URLs, the screen dimensions, device type and designTheme; the HTML is then downloaded and parsed for Tailwind classes and component patterns.

  4. 04
    Read project-level Design Theme

    A get_project call with the full projects/{id} path returns the designTheme object with color mode, fonts, roundness and custom colors.

  5. 05
    Synthesize the Semantic System

    Extract design tokens from the screen, capture the overall vibe with evocative adjectives, and translate technical values into descriptive language.

  6. 06
    Write DESIGN.md

    Create DESIGN.md in the project directory following the prescribed five-section format exactly.

02 Find your fit

When to Use the design-md Skill

Use the design-md skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • You already have a Stitch project containing at least one designed screen and want a written design system extracted from it.
  • You want a source of truth for prompting Stitch to generate new screens that match an existing design language.
  • You know the project only by title or URL and want the skill to find the Project ID from your owned projects.
  • You want the mood named through evocative adjectives rather than a restatement of the CSS.

Know the Boundaries

  • It cannot run without the Stitch MCP Server and a Stitch project that already has a designed screen.
  • It produces a Markdown design system, not new screens; the DESIGN.md is input for later Stitch prompting.
  • Untranslated technical jargon such as rounded-xl is explicitly listed as a pitfall to avoid.
  • Dropping hex codes and keeping only descriptive color names is called out as a failure.

What to Provide

  • Project ID (optional)If it is not provided, the skill lists owned projects and matches the target by title or URL pattern.
  • Screen ID (optional)If it is not provided, the skill reviews screen titles to identify the target screen.
  • Stitch Effective Prompting GuideReference for the language and patterns the design write-up should use.

03 Inside the skill

Rules the design-md Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Numeric IDs Only

    Pass projectId and screenId as numeric IDs, never the full projects/{id} path, except to get_project which takes the full name.

  2. Never a Bare Color

    Every color gets a descriptive natural language name, the exact hex code in parentheses, and its functional role, such as Deep Muted Teal-Navy (#294056) used for primary actions.

  3. Translate Geometry, Do Not Quote It

    Convert border-radius and layout values into physical descriptions: rounded-full becomes Pill-shaped, rounded-lg becomes Subtly rounded corners, rounded-none becomes Sharp, squared-off edges.

  4. Ban Generic Vocabulary

    Avoid terms like blue or rounded; prefer Ocean-deep Cerulean (#0077B6) or Gently curved edges.

  5. Hold the Prescribed Structure

    The file opens with the project title and Project ID, then five numbered sections: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles.

  6. Explain Why, Not Just What

    Include exact values in parentheses after the descriptive wording, and always state what each design element is used for.

  7. Keep Terminology Consistent

    Use the same terminology throughout the document so the design system reads as one system.

04 Put it to work

Install design-md in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design-md to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

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

Generic skills CLI form for plugins/stitch-utilities/skills/design-md/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or Codex.

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

Source: SKILL.md example (verbatim).

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Confirm the format matches the prescribed DESIGN.md structure exactly rather than an improvised layout.
  • Check every color code is accurate and each color keeps both a descriptive name and its hex value.
  • Verify each element's functional role is stated, not just its appearance.
  • Check the atmosphere section is specific rather than vague, and that shadows and spacing were not skipped.

In OpenDesign design-md is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
Skill file
plugins/stitch-utilities/skills/design-md/SKILL.md Content checksum recorded at verification; commit 0337446
License
Apache-2.0 From LICENSE.
Repository stars
8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for design-md.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. OverviewDefines DESIGN.md as the source of truth for prompting new Stitch screens.
  2. PrerequisitesNeeds Stitch MCP access, a designed screen, and the prompting guide.
  3. The GoalRestates that Stitch reads visual descriptions backed by specific color values.
  4. Retrieval and NetworkingSix steps: namespace, project, screen, metadata, asset download, project designTheme.
  5. Analysis & Synthesis InstructionsExtract identity, atmosphere, color palette, geometry and elevation.
  6. Output GuidelinesDescriptive language only, clean Markdown, exact hex codes, explain the why.
  7. Output Format (DESIGN.md Structure)Templated five-section Markdown skeleton to fill in verbatim.
  8. Usage ExampleWalkthrough using the Furniture Collection project and its Home page.
  9. Best PracticesBe descriptive, functional, consistent, visual and precise.
  10. Tips for SuccessBig picture first, look for patterns, name semantically, document hierarchy.
  11. Common Pitfalls to AvoidNo untranslated jargon, no missing codes, no vague or incomplete descriptions.
The Skill's Own Description
“Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files”

Front-matter description from SKILL.md. The full file is about 7,644 characters. Read the full file on GitHub.

06 Before you install

Questions About the design-md Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Which tools does the skill use to reach Stitch?

It declares the stitch tools plus Read, Write and web_fetch. In practice it runs list_tools first to find the MCP prefix, then calls list_projects, list_screens, get_screen and get_project with that prefix.

What exactly do I get at the end?

A DESIGN.md file created in the project directory, structured as project title and ID followed by sections on visual theme and atmosphere, color palette and roles, typography rules, component stylings and layout principles. It is meant to be reused as the source of truth when prompting Stitch for new screens.

Does it replace doing this by hand?

It does the extraction and drafting for you, but with a specific vocabulary requirement: colors get evocative names plus exact hex codes and functional roles, and radius values become phrases like Pill-shaped or Sharp, squared-off edges instead of raw class names. It also asks you to explain the why behind each decision.

Design MD

Run design-md on a Real Brand and design-system Work Task.

The design-md skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

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