@yaohui12138: Damn! I thought Claude Design was the strongest, but this project is surprisingly useful too. On Saturday night, a friend’s SaaS dashboard UI had too much 'AI vibe' and was so ugly the client replied with a dismissive 'hehe'..... I completely redid it for him in just one hour using a GitHub project. It’s basically a Markdown file called DESIGN.md.

X AI KOLs Timeline 05/10/26, 04:12 AM Tools

Summary

The article introduces 'awesome-design-md', an open-source collection of DESIGN.md files that reverse-engineer the design systems of major tech companies. It allows developers to use AI coding agents like Claude or Cursor to generate UI with specific brand styles by simply adding a markdown file to their project.

Damn! I thought Claude Design was the ultimate tool, but this project is surprisingly powerful too. On Saturday night, a friend showed me a SaaS dashboard UI he’d built. It had that heavy 'AI-generated' feel and was so ugly the client just replied with a dismissive 'hehe'..... I completely redid it for him in just one hour using a GitHub project. Essentially, it all came down to a Markdown file called DESIGN.md. The `design-md` project has reverse-engineered the design systems of 70+ major tech companies like Stripe, Vercel, Linear, Notion, Apple, and Tesla, converting them into Markdown files available under the MIT license. Each file contains complete design tokens — colors, typography, spacing, components, animations, and brand tone. Here’s how to use it in three steps: 1. Download the DESIGN.md file you want (e.g., linear.md), rename it to DESIGN.md, and drop it into your project’s root directory. 2. Open Claude Code / Cursor / Gemini CLI and tell it: 'Build a settings page following the DESIGN.md guidelines.' 3. The AI will automatically read the file, and the generated UI will instantly carry Linear’s visual style — with consistent rounded corners, typography, and transition animations. No need to write a single line of CSS. The underlying logic is simple — a design system is essentially a set of rules documented in text. This gives AI the ability to 'generate interfaces according to brand guidelines.' However, keep in mind: DESIGN.md is a 'style guide,' not a 'component library.' You still need to define the interaction logic yourself. For heavily regulated industries (finance, healthcare, or classified/confidential projects), it’s recommended to create a custom DESIGN.md rather than directly copying from major companies' GitHub repositories.

Original Article Export to Word Export to PDF

View Cached Full Text

Cached at: 05/10/26, 02:29 PM

Wow! I thought Claude Design was already the strongest, but this project is surprisingly good too. On Saturday night, my friend’s SaaS backend UI looked too “AI-generated” and was so ugly that the client just sent back a “Hehe”….. I directly used a GitHub project to redo it for him in 1 hour.

It turns out to be just a Markdown file called DESIGN.md.

design-md reverse-engineers the design systems of 70+ major companies like Stripe, Vercel, Linear, Notion, Apple, and Tesla, turning them into Markdown files that are free to use under the MIT license.

Each file contains complete design tokens — colors, fonts, spacing, components, animations, and brand tone.

Usage in Three Steps:

Download the DESIGN.md you want (e.g., linear.md), rename it to DESIGN.md, and drop it into your project root directory.
Open Claude Code / Cursor / Gemini CLI and tell it: “Build me a settings page following DESIGN.md.”
It will automatically read the file, and the generated UI will directly match Linear’s visual style — consistent rounded corners, fonts, and transition animations. No need to write a single line of CSS.

The underlying logic is simple — design systems are essentially sets of rule documents, giving AI the ability to “generate interfaces according to brand specifications.”

However, I think we should also note: DESIGN.md is a “style guide,” not a “component library.” Interaction logic still needs to be defined by yourself. For heavily regulated industries (finance / healthcare / classified projects), it is recommended to customize your own DESIGN.md rather than copying big tech ones directly.

GitHub: —

VoltAgent/awesome-design-md

Source: https://github.com/VoltAgent/awesome-design-md

Curated collection of DESIGN.md files inspired by developer-focused websites.

Awesome DESIGN.md Count Last Update Discord

Awesome DESIGN.md

Copy a DESIGN.md into your project, tell your AI agent “build me a page that looks like this” and get pixel-perfect UI that actually matches.

What is DESIGN.md?

DESIGN.md is a new concept introduced by Google Stitch. A plain-text design system document that AI agents read to generate consistent UI. It’s just a markdown file. No Figma exports, no JSON schemas, no special tooling. Drop it into your project root and any AI coding agent or Google Stitch instantly understands how your UI should look. Markdown is the format LLMs read best, so there’s nothing to parse or configure.

File	Who reads it	What it defines
`AGENTS.md`	Coding agents	How to build the project
`DESIGN.md`	Design agents	How the project should look and feel

This repo provides ready-to-use DESIGN.md files extracted from real websites.

Request a DESIGN.md

You can request a DESIGN.md for specific website, including private requests delivered exclusively to you.

Sponsors ❤️ Become a Sponsor

[1M+ view] — your logo here and get listed on getdesign.md

Collection

AI & LLM Platforms

Claude - Anthropic’s AI assistant. Warm terracotta accent, clean editorial layout
Cohere - Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic
ElevenLabs - AI voice platform. Dark cinematic UI, audio-waveform aesthetics
Minimax - AI model provider. Bold dark interface with neon accents
Mistral AI - Open-weight LLM provider. French-engineered minimalism, purple-toned
Ollama - Run LLMs locally. Terminal-first, monochrome simplicity
OpenCode AI - AI coding platform. Developer-centric dark theme
Replicate - Run ML models via API. Clean white canvas, code-forward
Runway - AI creative-tools platform with an editorial film-festival aesthetic — cinematic dark heroes, paper-white reading bands, single proprietary sans, and pure black pill CTAs.
Together AI - Open-source AI infrastructure. Technical, blueprint-style design
VoltAgent - AI agent framework. Void-black canvas, emerald accent, terminal-native
xAI - Elon Musk’s AI lab. Stark monochrome, futuristic minimalism

Developer Tools & IDEs

Cursor - AI-first code editor. Sleek dark interface, gradient accents
Expo - React Native platform. Dark theme, tight letter-spacing, code-centric
Lovable - AI full-stack builder. Playful gradients, friendly dev aesthetic
Raycast - Productivity launcher. Sleek dark chrome, vibrant gradient accents
Superhuman - Fast email client. Premium dark UI, keyboard-first, purple glow
Vercel - Frontend deployment platform. Black and white precision, Geist font
Warp - Modern terminal. Dark IDE-like interface, block-based command UI

Backend, Database & DevOps

ClickHouse - Fast analytics database. Yellow-accented, technical documentation style
Composio - Tool integration platform. Modern dark with colorful integration icons
HashiCorp - Infrastructure automation. Enterprise-clean, black and white
MongoDB - Document database. Green leaf branding, developer documentation focus
PostHog - Product analytics. Playful hedgehog branding, developer-friendly dark UI
Sanity - Headless content platform with a dark-first editorial marketing surface — 112px display type, IBM Plex Mono technical eyebrows, and a single coral-red accent reserved for the highest-priority CTA.
Sentry - Error monitoring. Dark dashboard, data-dense, pink-purple accent
Supabase - Open-source Firebase alternative. Dark emerald theme, code-first

Productivity & SaaS

Cal.com - Open-source scheduling. Clean neutral UI, developer-oriented simplicity
Intercom - Customer messaging. Friendly blue palette, conversational UI patterns
Linear - Project management for engineers. Ultra-minimal, precise, purple accent
Mintlify - Documentation platform. Clean, green-accented, reading-optimized
Notion - All-in-one workspace. Warm minimalism, serif headings, soft surfaces
Resend - Email API for developers. Minimal dark theme, monospace accents
Zapier - Automation platform. Warm orange, friendly illustration-driven

Design & Creative Tools

Airtable - Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic
Clay - Creative agency. Organic shapes, soft gradients, art-directed layout
Figma - Collaborative design tool. Vibrant multi-color, playful yet professional
Framer - Website builder. Bold black and blue, motion-first, design-forward
Miro - Visual collaboration. Bright yellow accent, infinite canvas aesthetic
Webflow - Visual web builder. Blue-accented, polished marketing site aesthetic

Fintech & Crypto

Binance - Crypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency
Coinbase - Crypto exchange. Clean blue identity, trust-focused, institutional feel
Kraken - Crypto trading platform. Purple-accented dark UI, data-dense dashboards
Mastercard - Global payments network. Warm cream canvas, orbital pill shapes, editorial warmth
Revolut - Digital banking. Sleek dark interface, gradient cards, fintech precision
Stripe - Payment infrastructure. Signature purple gradients, weight-300 elegance
Wise - International money transfer. Bright green accent, friendly and clear

E-commerce & Retail

Airbnb - Travel marketplace. Warm coral accent, photography-driven, rounded UI
Meta - Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs
Nike - Athletic retail. Monochrome UI, massive uppercase Futura, full-bleed photography
Shopify - E-commerce platform. Dark-first cinematic, neon green accent, ultra-light display type
Starbucks - Coffee retail flagship. Four-tier earth-green system, warm cream canvas, proprietary SoDoSans typography

Media & Consumer Tech

Apple - Consumer electronics. Premium white space, SF Pro, cinematic imagery
HP - PC and printer maker. Pure white canvas, HP Electric Blue signal CTA, geometric Forma DJR Micro, blue chevron decorations
IBM - Enterprise technology. Carbon design system, structured blue palette
NVIDIA - GPU computing. Green-black energy, technical power aesthetic
Pinterest - Visual discovery platform. Red accent, masonry grid, image-first
PlayStation - Gaming console retail. Three-surface channel layout, cyan hover-scale interaction
SpaceX - Space technology. Stark black and white, full-bleed imagery, futuristic
Spotify - Music streaming. Vibrant green on dark, bold type, album-art-driven
The Verge - Tech editorial media. Acid-mint and ultraviolet accents, Manuka display type
Uber - Mobility platform. Bold black and white, tight type, urban energy
Vodafone - Global telecom brand. Monumental uppercase display, Vodafone Red chapter bands
WIRED - Tech magazine. Paper-white broadsheet density, custom serif, ink-blue links

Automotive

BMW - Luxury automotive. Dark premium surfaces, precise German engineering aesthetic
BMW M - Performance automotive. Motorsport-inspired contrast, M color accents, precision-driven layout
Bugatti - Luxury hypercar. Cinema-black canvas, monochrome austerity, monumental display type
Ferrari - Luxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness
Lamborghini - Luxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk
Renault - French automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons
Tesla - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans

What’s Inside Each DESIGN.md

Every file follows the Stitch DESIGN.md format with extended sections:

#	Section	What it captures
1	Visual Theme & Atmosphere	Mood, density, design philosophy
2	Color Palette & Roles	Semantic name + hex + functional role
3	Typography Rules	Font families, full hierarchy table
4	Component Stylings	Buttons, cards, inputs, navigation with states
5	Layout Principles	Spacing scale, grid, whitespace philosophy
6	Depth & Elevation	Shadow system, surface hierarchy
7	Do’s and Don’ts	Design guardrails and anti-patterns
8	Responsive Behavior	Breakpoints, touch targets, collapsing strategy
9	Agent Prompt Guide	Quick color reference, ready-to-use prompts

Each site includes:

File	Purpose
`DESIGN.md`	The design system (what agents read)
`preview.html`	Visual catalog showing color swatches, type scale, buttons, cards
`preview-dark.html`	Same catalog with dark surfaces

How to Use

Copy a site’s DESIGN.md into your project root
Tell your AI agent to use it.

Contributing

See CONTRIBUTING.md for guidelines.

Improve existing files: Fix wrong colors, missing tokens, weak descriptions
Report issues: Let us know if something looks off

Before opening a PR, please open an issue first to discuss your idea and get feedback from maintainers.

License

MIT License - see LICENSE

This repository is a curated collection of design system documents extracted from public websites. All DESIGN.md files are provided “as is” without warranty. The extracted design tokens represent publicly visible CSS values. We do not claim ownership of any site’s visual identity. These documents exist to help AI agents generate consistent UI.