Design Md

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

8,644 stars 1,049 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

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

Manual install

git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git /tmp/stitch-skills
mkdir -p ~/.claude/skills
cp -r /tmp/stitch-skills/plugins/stitch-utilities/skills/design-md ~/.claude/skills/design-md

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Stitch DESIGN.md Skill

You are an expert Design Systems Lead. Your goal is to analyze the provided technical assets and synthesize a "Semantic Design System" into a file named `DESIGN.md`.

## Overview

This skill helps you create `DESIGN.md` files that serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.

## Prerequisites

- Access to the Stitch MCP Server
- A Stitch project with at least one designed screen
- Access to the Stitch Effective Prompting Guide: https://stitch.withgoogle.com/docs/learn/prompting/

## The Goal

The `DESIGN.md` file will serve as the "source of truth" for prompting Stitch to generate new screens that align perfectly with the existing design language. Stitch interprets design through "Visual Descriptions" supported by specific color values.

## Retrieval and Networking

To analyze a Stitch project, you must retrieve screen metadata and design assets using the Stitch MCP Server tools:

1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `mcp_stitch:`) for all subsequent calls.

2. **Project lookup** (if Project ID is not provided):
   - Call `[prefix]:list_projects` with `filter: "view=owned"` to retrieve all user projects
   - Identify the target project by title or URL pattern

Read the full skill on GitHub

Details

Skill name: design-md
Repository: google-labs-code/stitch-skills
Path: plugins/stitch-utilities/skills/design-md/SKILL.md
License: Apache-2.0
Repo updated: 17 August 2026
Listed in: heilcheng/awesome-agent-skills

FAQ

What does the Design Md skill do?

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

How do I install the Design Md skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add google-labs-code/stitch-skills --skill design-md. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Md popular?

It lives in google-labs-code/stitch-skills, which has 8,644 GitHub stars and 1,049 forks, and is included in 1 curated skill list.

Related skills

Enhance Prompt

8.6k

google-labs-code/stitch-skills

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

AI, LLMs & AgentsIn 1 list1k

Shadcn UI

8.6k

google-labs-code/stitch-skills

Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

Frontend & DesignIn 1 list1k

Stitch Loop

8.6k

google-labs-code/stitch-skills

Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

AI, LLMs & AgentsIn 1 list1k

Frontend Dev

14k

MiniMax-AI/skills

Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.

Frontend & DesignIn 1 list1.2k

Stitch::react Components

8.6k

google-labs-code/stitch-skills

Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.

Frontend & DesignIn 1 list1k

Gsap Scrolltrigger

18k

greensock/gsap-skills

Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is specified.

Frontend & DesignIn 1 list1.1k

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.