design-md

Analyze Stitch project assets to generate a DESIGN.md design system document.

8.0k|1.1k|Updated Jan 16, 2026

Search Tags:#design-system #design-tokens #stitch #screen-generation #design-md #semantic-design

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/google-labs-code/stitch-skills/tree/main/skills/design-md
Command: npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md-google-labs-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams generate comprehensive DESIGN.md design-system documentation from Stitch projects by analyzing screens, tokens, and color metadata, creating a single source of truth for design language.

Core Features & Use Cases

Retrieve screen metadata and design assets from the Stitch MCP Server and parse design tokens (colors, typography, spacing, components).
Translate technical CSS/Tailwind patterns into descriptive, human-friendly design language suitable for prompting Stitch.
Synthesize a complete DESIGN.md that documents the design system and can guide future screen generation and collaboration.
Align outputs with Stitch Effective Prompting Guide to ensure consistent, high-quality prompts across projects.

Quick Start

Analyze a Stitch project and generate a DESIGN.md that documents its design system.

Frequently Asked Questions about design-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate design system documentation from Stitch screens?▼

Generate design system documentation from Stitch by analyzing screen assets and HTML/CSS patterns to extract design tokens, producing a natural-language DESIGN.md file that codifies your semantic design language.

What is a semantic design system and how does Stitch use it?▼

A semantic design system translates technical CSS and Tailwind patterns into human-friendly design guidance, serving as an authoritative source for prompting Stitch to generate visually consistent screens.

How do I extract design tokens from existing screens and CSS patterns?▼

Extract design tokens like colors, typography, and spacing by retrieving screen metadata from the Stitch MCP Server and parsing HTML and CSS patterns to synthesize a complete design system document.

Can I use a DESIGN.md file to guide future Stitch screen generation?▼

Yes, you can use a generated DESIGN.md as a single source of truth to prompt Stitch, ensuring future screen generation aligns with your established design language and consistent design tokens.

Does generating a design doc require manually mapping Tailwind classes to design tokens?▼

No, generating a design doc does not require manual mapping because the process automatically translates technical CSS and Tailwind patterns into descriptive, human-friendly design language for your documentation.

What are the limitations of using design tokens for Stitch screen generation?▼

A limitation is that the generated DESIGN.md relies entirely on the existing Stitch project assets, meaning incomplete or inconsistent screen metadata will result in an incomplete semantic design system.