// Skill profile
VoltAgent/awesome-design-md is a curated collection of DESIGN.md files — plain-text design system documents that AI agents read to generate visually consistent UI. With 112K+ GitHub stars and ranked #150 globally on GitHub, it provides ready-to-use design specifications extracted from 70+ real websites including Apple, Stripe, Linear, Vercel, Nike, Figma, Notion, and more. Each DESIGN.md follows the Google Stitch format with extended sections covering visual theme and atmosphere, color palette with semantic roles, typography rules and hierarchy tables, component stylings with states, layout principles, depth and elevation systems, do's and don'ts, responsive behavior, and agent prompt guides. Drop one into your project root and any AI coding agent or Google Stitch instantly understands how your UI should look. Categories span AI/LLM platforms, developer tools, fintech, e-commerce, automotive, media, and even retro web nostalgia from the 1990s. MIT-licensed.
awesome-design-md is a curated collection of DESIGN.md files extracted from the design systems of 70+ real websites. DESIGN.md is a concept introduced by Google Stitch: a plain-text markdown file that AI agents read to understand how a project’s UI should look and feel. Where AGENTS.md tells coding agents how to build, DESIGN.md tells design agents how the project should look. No Figma exports, no JSON schemas, no special tooling — just a markdown file in the project root.
The collection covers brands across every major category: AI platforms (Claude, Mistral, xAI), developer tools (Cursor, Vercel, Raycast), fintech (Stripe, Revolut, Coinbase), e-commerce (Nike, Shopify, Airbnb), automotive (Tesla, Ferrari, BMW), media (Spotify, Apple, NVIDIA), and even retro web nostalgia from the 1990s (Dell 1996, Nintendo 2001). With 112K+ GitHub stars, it is the most popular design-system-for-agents resource on GitHub.
Every file follows the Stitch DESIGN.md format with nine extended sections: visual theme and atmosphere (mood, density, philosophy), color palette with semantic roles (hex values and functional mapping), typography rules (font families, full hierarchy table), component stylings (buttons, cards, inputs, navigation with states), layout principles (spacing scale, grid, whitespace philosophy), depth and elevation (shadow system, surface hierarchy), do’s and don’ts (design guardrails and anti-patterns), responsive behavior (breakpoints, touch targets, collapsing strategy), and an agent prompt guide (quick color reference, ready-to-use prompts). Each site also ships preview.html and preview-dark.html visual catalogs.
Frontend developers and designers use awesome-design-md to give AI coding agents visual context when generating UI. Copy a brand’s DESIGN.md into your project, tell your agent “build me a landing page that looks like Linear” or “generate a dashboard matching Stripe’s design language,” and the agent produces UI that stays visually consistent with the target design system. Useful for rapid prototyping, design exploration, learning design patterns from best-in-class products, and ensuring AI-generated UI meets a specific visual standard.
These are extracted design tokens from publicly visible CSS, not official design system packages from the brands themselves. The repository does not claim ownership of any site’s visual identity. DESIGN.md files represent a snapshot — brand design systems evolve, so tokens may drift from current production. Best used as high-quality starting points rather than authoritative brand guidelines.
awesome-design-md is for frontend developers and designers who use AI coding agents (Claude Code, Cursor, Codex, Google Stitch) and want their generated UI to match the quality and consistency of a real design system without manually specifying every color, font, and spacing value. It is also valuable for design-system learners studying how top products structure their visual language.
AI agents that work well with awesome-design-md.
Single 70-line CLAUDE.md derived from Karpathy's LLM coding-pitfall observations — #1 GitHub trending for 28 consecutive days.
A complete software development methodology and composable skills framework for coding agents — brainstorm, plan, execute, review, ship.
Agent skill that makes your coding agent think like the laziest senior dev in the room — skip unnecessary code, reuse existing patterns, and write 54% less code while staying 100% safe.