Stitch Design System Documentation Skill

Name: Design Md: AI Agent Skill
Rating: 8 (1 reviews)
Author: google-labs-code

Install

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

Example Prompt

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

Skill Structure

This repository follows the Agent Skills open standard. Each skill is self-contained with its own logic, workflow, and reference materials.

design-md/
├── SKILL.md           — Core instructions & workflow
├── examples/          — Sample DESIGN.md outputs
└── README.md          — This file

How it Works

When activated, the agent follows a structured design analysis pipeline:

Retrieval: Uses the Stitch MCP Server to fetch project screens, HTML code, and design metadata.
Extraction: Identifies design tokens including colors, typography, spacing, and component patterns.
Translation: Converts technical CSS/Tailwind values into descriptive, natural design language.
Synthesis: Generates a comprehensive DESIGN.md following the semantic design system format.
Alignment: Ensures output follows Stitch Effective Prompting Guide principles for optimal screen generation.

Frequently Asked Questions

What is Design Md?

Design Md is a free, open-source AI agent skill. Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

How do I install Design Md?

Install Design Md with a single command:

npx mdskills install google-labs-code/design-md

This downloads the skill files into your project and your AI agent picks them up automatically.

What platforms support Design Md?

Design Md works with Claude Code, Claude Desktop, Cursor, Vscode Copilot, Windsurf, Continue Dev, Codex, Gemini Cli, Amp, Roo Code, Goose, Opencode, Trae, Qodo, Command Code. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.

Design Md