Summary
This in-depth article explores awesome-design-md, an open-source repository by VoltAgent that collects DESIGN.md files from 55+ popular websites including Stripe, Vercel, Linear, Claude, Notion, and Apple. It explains Google Stitch's DESIGN.md concept: a plain Markdown file that describes a design system in tokens, typography, components, layout principles, elevation, responsive rules, do's and don'ts, and an agent prompt guide, so large language models can generate UI that matches a target brand. The piece covers why Markdown is the natural language of LLMs, three usage methods (curl, clone, or AI prompt), the dual-file pattern of AGENTS.md plus DESIGN.md, and the broader paradigm shift from human-only design tools (Figma, Storybook, PDFs) to text-first, version-controlled, AI-readable specifications. It also notes real limitations: DESIGN.md encodes tokens and patterns but not exact layouts, outputs still need iteration, and trademark concerns remain.
Key points
- What awesome-design-md is: A GitHub repository by VoltAgent (released March 2025, ~8.7k stars, ~1.1k forks) that bundles DESIGN.md files, light-theme preview.html, and dark-theme preview-dark.html for 55+ popular products across AI/ML (Claude, Mistral, ElevenLabs, xAI, Ollama), developer tools (Vercel, Linear, Supabase, Cursor, Raycast), design tools (Figma, Framer, Webflow), productivity (Notion, Airtable), fintech (Stripe, Coinbase, Wise), and consumer brands (Apple, Spotify, Airbnb, SpaceX).
- What DESIGN.md is: A Google Stitch concept — a plain Markdown specification of a design system that any LLM can parse and execute, replacing the need for AI to read Figma files or rely on hand-written style guides.
- Why Markdown: LLMs are pre-trained on huge amounts of Markdown, so headings, lists, bold text, and tables map directly to model understanding; humans can read and edit it with any text editor; and Git workflows (diff, PR review, version control) apply out of the box.
- Anatomy of a DESIGN.md file: nine standardized sections — Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles, Depth & Elevation, Do's and Don'ts, Responsive Behavior, and Agent Prompt Guide. Both positive rules and negative constraints are used to prevent technically correct but on-brand-violating AI output.
- How to use it (three methods):
1. curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe/DESIGN.md
2. git clone https://github.com/VoltAgent/awesome-design-md.git
3. Tell an AI agent to read the project's DESIGN.md and build UI accordingly.
- The AGENTS.md + DESIGN.md dual-track pattern: AGENTS.md instructs coding agents on how to build the project (languages, testing, coverage), while DESIGN.md instructs design agents on how it should look. Together they form a two-file project "soul" without JSON configs or complex toolchains.
- Why it matters: design democratization (non-designers get professional-looking output), automated consistency (every AI-generated PR follows the same tokens), tool-agnostic compatibility (Claude Code, GitHub Copilot, Cursor, Google Stitch, and any LLM), and composability (design systems become reusable like npm packages).
- Limitations: DESIGN.md captures tokens and patterns, not specific layout decisions; AI output still typically requires 1–2 iteration rounds; the repository's disclaimer states that extracted tokens represent publicly visible CSS values and are not intended to replicate trademarked brand identity.
- Paradigm shift: design moves from human-facing tools (Figma, Storybook, PDF specs that drift out of sync) to a text-first, AI-readable, version-controlled abstraction layer that travels with the codebase.
References
- awesome-design-md: https://github.com/VoltAgent/awesome-design-md
- Google Stitch: https://stitch.withgoogle.com/
- Google Stitch DESIGN.md documentation: https://stitch.withgoogle.com/docs/design-md/overview/
- VoltAgent: https://github.com/VoltAgent
- AGENTS.md specification: https://github.com/VoltAgent/awesome-agent-skills
*Article written April 5, 2026, drawing on the awesome-design-md repository, Google Stitch documentation, and community discussion.*
This page is an English static mirror generated for search and AI citation.
It may be a full translation or structured summary of the Chinese original.
Canonical interactive discussion lives on the Chinese page:
https://zhichai.net/topic/177169556