Design System Generator — Claude Code Skill

Generate design.md, design-guidelines.md, and design-components.md from any design references

🇨🇳 中文 | 🇪🇸 Español | 🇺🇸 English

Stop manually documenting your design system. Upload any design reference and get 3 production-ready markdown files that AI coding tools (Cursor, Claude Code, Copilot) understand natively.

Or use the web version — no setup required

A Claude Code skill that generates comprehensive design system documentation from any reference materials — images, PDFs, links, screenshots, brand guidelines, or existing code. Non-technical users (designers, PMs) can use the web version directly.

The Problem

Design systems live in Figma, brand PDFs, and scattered docs — but the documentation AI coding tools need lives nowhere. Every time you start a new project, you manually write token specs, component guidelines, and accessibility rules.

The Solution

One command. Three documents. From any design reference.

/design-system

What It Generates

How It Works

Step 1  Provide any design references (images, PDFs, links, text, code)
Step 2  AI analyzes the design language across all materials
Step 3  Generate 3 structured markdown files
Step 4  Write files to your project directory
Step 5  Confirm with user before saving

Accepted Inputs

Output Format

Each file:

• Starts with an H1 title and cross-references to the other 2 files
• Uses markdown tables for token values and component specs
• Includes specific measurements (dp/sp/px), hex colors, and CSS values
• Organizes do's/don'ts by category (Color, Shape, Elevation, Typography, etc.)
• Groups components by workflow (Actions, Input, Navigation, Containment, Feedback)

Component Coverage

Install

# Clone into your .claude/skills directory
git clone https://github.com/albertzhangz10/design-system-skill.git .claude/skills/design-system

Or copy the SKILL.md file into your project's .claude/skills/design-system/ directory.

Usage

/design-system                    # generates in current directory
/design-system ./docs/            # custom output path

Then provide your design references — drag & drop images, paste links, or describe the design language.

Requirements

License

MIT License — see the LICENSE file for details.

Credits

Built by Albert Zhang.

Inspired by Google Stitch design.md — the design.md format and structure are based on their work.