awesome-design-md
Curated collection of 54 DESIGN.md files extracted from real developer-focused websites (Vercel, Stripe, Linear, Notion, Figma, etc.). Use when a user wants to build UI that matches a specific brand's design system, needs a DESIGN.md template, asks for design tokens/color palettes/typography of known products, or says 'make it look like [brand]'. Load the matching reference file and use it as the design spec.
- Installs
- 46
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bighardperson/computer-science-skills-collection --skill awesome-design-md- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads awesome-design-md automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Awesome DESIGN.md
A curated collection of 54 DESIGN.md files extracted from real, developer-focused websites. Each file is a complete design system specification that AI agents can read to generate pixel-perfect, brand-consistent UI.
What is DESIGN.md?
DESIGN.md is a 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. Drop it into your project root and any AI coding agent instantly understands how your UI should look.
How to Use
- User says "make it look like [brand]" → Find the matching reference file below
- Read the reference file from
references/{site-name}.md - Copy the DESIGN.md content into the user's project root as
DESIGN.md - Use the design tokens (colors, typography, spacing, components) when generating UI code
Available Design Systems
AI & Machine Learning
| Site | Reference | Style |
|---|---|---|
| Claude | references/claude.md | Warm terracotta accent, clean editorial layout |
| Cohere | references/cohere.md | Vibrant gradients, data-rich dashboard aesthetic |
| ElevenLabs | references/elevenlabs.md | Dark cinematic UI, audio-waveform aesthetics |
| Minimax | references/minimax.md | Bold dark interface with neon accents |
| Mistral AI | references/mistral.ai.md | French-engineered minimalism, purple-toned |
| Ollama | references/ollama.md | Terminal-first, monochrome simplicity |
| OpenCode AI | references/opencode.ai.md | Developer-centric dark theme |
| Replicate | references/replicate.md | Clean white canvas, code-forward |
| RunwayML | references/runwayml.md | Cinematic dark UI, media-rich layout |
| Together AI | references/together.ai.md | Technical, blueprint-style design |
| VoltAgent | references/voltagent.md | Void-black canvas, emerald accent, terminal-native |
| xAI | references/x.ai.md | Stark monochrome, futuristic minimalism |
Developer Tools & Platforms
| Site | Reference | Style |
|---|---|---|
| Cursor | references/cursor.md | Sleek dark interface, gradient accents |
| Expo | references/expo.md | Dark theme, tight letter-spacing, code-centric |
| Linear | references/linear.app.md | Ultra-minimal, precise, purple accent |
| Lovable | references/lovable.md | Playful gradients, friendly dev aesthetic |
| Mintlify | references/mintlify.md | Clean, green-accented, reading-optimized |
| PostHog | references/posthog.md | Playful hedgehog branding, developer-friendly dark UI |
| Raycast | references/raycast.md | Sleek dark chrome, vibrant gradient accents |
| Resend | references/resend.md | Minimal dark theme, monospace accents |
| Sentry | references/sentry.md | Dark dashboard, data-dense, pink-purple accent |
| Supabase | references/supabase.md | Dark emerald theme, code-first |
| Superhuman | references/superhuman.md | Premium dark UI, keyboard-first, purple glow |
| Vercel | references/vercel.md | Black and white precision, Geist font |
| Warp | references/warp.md | Dark IDE-like interface, block-based command UI |
| Zapier | references/zapier.md | Warm orange, friendly illustration-driven |
Infrastructure & Cloud
| Site | Reference | Style |
|---|---|---|
| ClickHouse | references/clickhouse.md | Yellow-accented, technical documentation style |
| Composio | references/composio.md | Modern dark with colorful integration icons |
| HashiCorp | references/hashicorp.md | Enterprise-clean, black and white |
| MongoDB | references/mongodb.md | Green leaf branding, developer documentation focus |
| Sanity | references/sanity.md | Red accent, content-first editorial layout |
| Stripe | references/stripe.md | Signature purple gradients, weight-300 elegance |
Design & Productivity
| Site | Reference | Style |
|---|---|---|
| Airtable | references/airtable.md | Colorful, friendly, structured data aesthetic |
| Cal.com | references/cal.md | Clean neutral UI, developer-oriented simplicity |
| Clay | references/clay.md | Organic shapes, soft gradients, art-directed layout |
| Figma | references/figma.md | Vibrant multi-color, playful yet professional |
| Framer | references/framer.md | Bold black and blue, motion-first, design-forward |
| Intercom | references/intercom.md | Friendly blue palette, conversational UI patterns |
| Miro | references/miro.md | Bright yellow accent, infinite canvas aesthetic |
| Notion | references/notion.md | Warm minimalism, serif headings, soft surfaces |
references/pinterest.md | Red accent, masonry grid, image-first | |
| Webflow | references/webflow.md | Blue-accented, polished marketing site aesthetic |
Fintech & Crypto
| Site | Reference | Style |
|---|---|---|
| Coinbase | references/coinbase.md | Clean blue identity, trust-focused, institutional feel |
| Kraken | references/kraken.md | Purple-accented dark UI, data-dense dashboards |
| Revolut | references/revolut.md | Sleek dark interface, gradient cards, fintech precision |
| Wise | references/wise.md | Bright green accent, friendly and clear |
Enterprise & Consumer
| Site | Reference | Style |
|---|---|---|
| Airbnb | references/airbnb.md | Warm coral accent, photography-driven, rounded UI |
| Apple | references/apple.md | Premium white space, SF Pro, cinematic imagery |
| BMW | references/bmw.md | Dark premium surfaces, precise German engineering aesthetic |
| IBM | references/ibm.md | Carbon design system, structured blue palette |
| NVIDIA | references/nvidia.md | Green-black energy, technical power aesthetic |
| SpaceX | references/spacex.md | Stark black and white, full-bleed imagery, futuristic |
| Spotify | references/spotify.md | Vibrant green on dark, bold type, album-art-driven |
| Uber | references/uber.md | Bold black and white, tight type, urban energy |
What Each DESIGN.md Contains
Every file follows the Google Stitch DESIGN.md format with 9 sections:
- Visual Theme & Atmosphere — Mood, density, design philosophy
- Color Palette & Roles — Semantic name + hex + functional role
- Typography Rules — Font families, full hierarchy table
- Component Stylings — Buttons, cards, inputs, navigation with states
- Layout Principles — Spacing scale, grid, whitespace philosophy
- Depth & Elevation — Shadow system, surface hierarchy
- Do's and Don'ts — Design guardrails and anti-patterns
- Responsive Behavior — Breakpoints, touch targets, collapsing strategy
- Agent Prompt Guide — Quick color reference, ready-to-use prompts
Workflow
1. User specifies a brand → Direct match
User: "Build me a landing page that looks like Stripe"
→ Read references/stripe.md
→ Copy content to user's project as DESIGN.md
→ Use the design tokens to generate UI code
2. User wants to browse → Filter and suggest
User: "Show me dark-themed design systems"
→ Suggest: Vercel, Cursor, ElevenLabs, Resend, Warp, Supabase, etc.
→ Let user pick, then load that reference
3. User doesn't specify a style → Smart recommendation
When the user asks to build a UI without mentioning any brand or style preference (e.g., "帮我做一个落地页", "写一个 dashboard", "做一个 SaaS 官网"), proactively recommend 3–5 design systems based on the project type:
| Project Type | Recommended Styles | Why |
|---|---|---|
| SaaS 官网 / Landing page | Stripe, Vercel, Linear | 经典高转化 SaaS 风格，简洁专业 |
| 开发者工具 / 技术产品 | Vercel, Cursor, Raycast, Supabase | 暗色系、代码友好、极客气质 |
| AI 产品 / Chat UI | Claude, Mistral AI, ElevenLabs | AI 原生设计语言，温暖或未来感 |
| Fintech / 金融产品 | Stripe, Revolut, Coinbase | 信任感、精密感、数据密集 |
| 效率工具 / 生产力产品 | Notion, Linear, Superhuman | 极简、信息密度高、键盘优先 |
| 电商 / 消费品牌 | Airbnb, Apple, Spotify | 视觉驱动、大图、情感化设计 |
| 内部后台 / Dashboard | Sentry, PostHog, ClickHouse | 数据密集型、暗色仪表盘 |
| 创意 / 设计工具 | Figma, Framer, Clay | 大胆配色、动感十足 |
| 企业级 / B2B | IBM, HashiCorp, MongoDB | 稳重、结构化、Design System 成熟 |
Recommendation workflow:
User: "帮我做一个 AI 聊天产品的界面"
→ Agent: "推荐以下设计风格供你选择：
1. 🟠 Claude — 温暖柔和的赤陶色调，编辑式布局，适合对话产品
2. 🟣 Mistral AI — 法式工程极简，紫色调，优雅专业
3. 🎬 ElevenLabs — 暗色电影感，波形美学，适合音频/多模态
4. ⬛ Vercel — 黑白精准，极致简约
5. 🟢 VoltAgent — 终端风格，翠绿高亮，适合技术型 AI
选一个编号，我直接用对应的设计系统帮你生成。"
→ User picks one → Load reference → Generate UI
If the user says "随便" or "你决定":
- Default to Vercel (safest all-rounder: clean, modern, professional)
- Mention the choice and offer to switch: "我先用 Vercel 风格（简约黑白），不喜欢随时换。"
FAQ
What does the awesome-design-md skill do?
Curated collection of 54 DESIGN.md files extracted from real developer-focused websites (Vercel, Stripe, Linear, Notion, Figma, etc.). Use when a user wants to build UI that matches a specific brand's design system, needs a DESIGN.md template, asks for design tokens/color palettes/typography of known products, or says 'make it look like [brand]'. Load the matching reference file and use it as the design spec.
How do I install awesome-design-md?
Run npx skills add https://github.com/bighardperson/computer-science-skills-collection --skill awesome-design-md in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/awesome-design-md/ (personal) or .claude/skills/awesome-design-md/ (project).
Which AI agents can use awesome-design-md?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is awesome-design-md safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains awesome-design-md?
It is published by bighardperson in bighardperson/computer-science-skills-collection. It has 46 recorded installs.
More from bighardperson/computer-science-skills-collection
neodata-financial-search
bighardperson/computer-science-skills-collection
NeoData Financial Search — 自然语言通用金融数据搜索服务。用自然语言查询股票、基金、指数、板块、 宏观经济、外汇、大宗商品等全品类金融数据，涵盖行情报价、财务报表（财报）、资金流向、研报评级、 事件公告等，支持结构化API数据和财经文章两种召回模式，即问即答。 Use when the user asks about financial data, stock quotes, financial statements, earnings reports, market data, fund info, macro economics, forex, commodities, or needs to query the NeoData API.
tencentmap-lbs-skill
bighardperson/computer-science-skills-collection
腾讯地图位置服务，支持POI搜索、路径规划、旅游规划、周边搜索，轨迹数据可视化和地图数据可视化。⚠️ 强制行为：本 Skill 加载后，第一个动作必须是检查是否存在正式 Key（环境变量 TMAPWEBSERVICEKEY 或用户已在对话中提供）。若已有正式 Key，直接继续处理用户请求。若没有正式 Key，必须立即向用户展示 Key 选择提示（正式 Key 注册引导 + 预设体验 Key 选项），然后停止等待用户选择，不得在用户选择之前进行任何分析、读取文件、规划方案或编写代码的操作。
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.