awesome-design-md: Ready-Made Design Systems for AI Coding Agents

What awesome-design-md Is

VoltAgent has published awesome-design-md, an open-source repository (MIT) collecting DESIGN.md files extracted from websites like Stripe, Vercel, Airbnb, Linear, Notion, and 40+ others. Each file contains design tokens — colors, typography, spacing, components — in plain Markdown. An AI agent reads the file and generates interfaces that visually match the original brand. No Figma exports, no JSON schemas, no special tooling needed.

The DESIGN.md concept comes from Google Stitch, a tool for AI-driven UI generation. The premise is straightforward: Markdown is the format LLMs read best. A structured text file outperforms any proprietary schema in portability and model comprehension.

The project has already passed 13,500 GitHub stars, with 1,700 forks and 63 watchers. Written entirely in HTML (for previews), each file weighs just a few KB.

How It Works in Practice

Every site in the collection ships three files:

• DESIGN.md — the core document with color palettes, type scales, spacing, border radii, shadows, and UI components
• preview.html — a visual preview of the design system in light mode
• preview-dark.html — the dark mode preview

The workflow is direct. Copy the desired site's DESIGN.md into your project root and tell your AI agent to build the interface following those specs. It works with any agent that reads project context: Claude Code, Cursor, Gemini CLI, Copilot.

The collection is organized by category:

• AI & ML — Claude, Mistral AI, Ollama, Replicate, ElevenLabs, xAI
• Developer Tools — Cursor, Vercel, Supabase, Linear, Sentry, Warp, Raycast
• Infrastructure — Stripe, ClickHouse, MongoDB, HashiCorp
• Design & Productivity — Figma, Notion, Framer, Miro, Webflow
• Fintech — Coinbase, Revolut, Kraken, Wise
• Enterprise — Apple, BMW, SpaceX, Spotify, Uber, NVIDIA

Every DESIGN.md follows the format defined by Google Stitch documentation, with extended sections covering site-specific components.

Why It's Useful and Where It Falls Short

The main advantage is prototyping speed. Instead of starting from scratch or screenshotting a site and hoping the AI replicates it, you provide a structured document with exact tokens. The CSS values are real, extracted from public websites.

For AI agents, this context is far more effective than a screenshot. An image is ambiguous — Markdown is not. Specs like border-radius: 12px, font-weight: 500, color: #635BFF leave zero room for interpretation.

The limitations are clear. Extracted design systems are static snapshots of sites that evolve constantly. Stripe could change its palette tomorrow and the repository's DESIGN.md would be outdated. Also, capturing CSS tokens doesn't mean capturing the full user experience — animations, micro-interactions, and responsive layout logic don't always surface in a Markdown file.

There's also an intellectual property question. The repository explicitly disclaims ownership of any site's visual identity, and the tokens are publicly visible CSS values. But using Stripe's design system to build a product that looks like Stripe raises legitimate questions.

Contributing is simple: open a GitHub issue with the dedicated template to request a new DESIGN.md generation.

FAQ

Do I need Google Stitch to use DESIGN.md files? No. Any AI agent that reads Markdown files from project context can use them — Claude Code, Cursor, Copilot, Gemini CLI.

Are the design tokens up to date? They're extracted once from public sites. They can become outdated if the site updates its design system.

Can I contribute a DESIGN.md for a site not yet included? Yes, the repository accepts contributions. Open an issue first to discuss the proposal with maintainers.