来自开发者常用网站的精选 DESIGN.md 分析集合。

将一个 DESIGN.md 文件复制到你的项目中，告诉你的 AI 代理“给我构建一个像这样的页面”，你就能生成与设计语言保持视觉一致的高质量 UI。

该文件具有真实的设计深度——包括分析出的模式、令牌和规则——旨在生成高质量 UI，而非表面层的输出。

DESIGN.md 是 Google Stitch 引入的一个新概念。它是一种纯文本的设计系统文档，供 AI 代理读取以生成一致的 UI。

它只是一个 Markdown 文件。无需 Figma 导出，无需 JSON 模式，也无需特殊工具。将其放入项目根目录，任何 AI 编码代理或 Google Stitch 都能立即理解你的 UI 应如何呈现。Markdown 是大语言模型最擅长的阅读格式，因此无需任何解析或配置。

文件	谁来读取	定义了
AGENTS.md	编码代理	如何构建项目
DESIGN.md	设计代理	项目应有的外观和风格

本仓库提供从真实网站提取的即用型 DESIGN.md 文件。

你可以请求生成特定网站的 DESIGN.md，包括仅交付给你的私人请求。

AI 设计与构建生态工具

👉 将你的产品与使用 AI 编码代理和 Web 构建器交付 UI 的开发者、设计师及 vibe 编码员一同展示。

在 GitHub 上全球排名 #150。这是一个由开发者、设计师和 vibe 编码员使用的社区资源。

---

• Claude - Anthropic 的 AI 助手。温暖的陶土色点缀，清晰简洁的编辑式布局。
• Cohere - 企业 AI 平台。充满活力的渐变，数据丰富的仪表盘美学。
• ElevenLabs - AI 语音平台。深色电影感 UI，音波美学。
• Minimax - AI 模型供应商。大胆的深色界面搭配霓虹点缀。
• Mistral AI - 开放权重 LLM 供应商。法式极简主义，紫色调。
• Ollama - 在本地运行 LLM。终端优先，单色简洁。
• OpenCode AI - AI 编码平台。以开发者为中心的深色主题。
• Replicate - 通过 API 运行机器学习模型。干净的白色画布，以代码为导向。
• Runway - AI 创意工具平台，带有编辑式电影节美学——电影感深色大幅标题，纸白色阅读区域，单一专属无衬线体，以及纯黑药丸形行动按钮。
• Together AI - 开源 AI 基础设施。技术性蓝图风格设计。
• VoltAgent - AI 代理框架。虚空黑色画布，翡翠绿点缀，终端原生风格。
• xAI - 埃隆·马斯克的 AI 实验室。强烈的单色，未来主义极简。

---

• Cursor - AI 优先的代码编辑器。光滑的深色界面，渐变点缀。
• Expo - React Native 平台。深色主题，紧凑的字母间距，以代码为中心。
• Lovable - AI 全栈构建器。俏皮的渐变，友好的开发美学。
• Raycast - 生产力启动器。光滑的深色铬合金界面，充满活力的渐变点缀。
• Superhuman - 极速邮件客户端。高级深色 UI，键盘优先，紫色辉光。
• Vercel - 前端部署平台。黑与白的精准之美，Geist 字体。
• Warp - 现代终端。深色类 IDE 界面，基于块的命令 UI。

---

后端、数据库与 DevOps

• ClickHouse - 高速分析数据库。黄色点缀，技术文档风格。
• Composio - 工具集成平台。现代深色主题搭配多彩集成图标。
• HashiCorp - 基础设施自动化。企业级洁净，黑与白。
• MongoDB - 文档数据库。绿叶品牌，开发者文档焦点。
• PostHog - 产品分析。俏皮的刺猬品牌形象，开发者友好的深色 UI。
• Sanity - 无头内容平台，带有深色优先的编辑式营销页面——112px 展示字号，IBM Plex Mono 技术标签，以及仅用于最高优先级行动按钮的珊瑚红点缀。
• Sentry - 错误监控。深色仪表盘，数据密集，粉紫色点缀。
• Supabase - 开源 Firebase 替代品。深色翡翠绿主题，以代码为先。

---

• Cal.com - 开源日程安排。干净的中性 UI，面向开发者的简洁性。
• Intercom - 客户消息平台。友好的蓝色调，对话式 UI 模式。
• Linear - 面向工程师的项目管理。极致简约，精确，紫色点缀。
• Mintlify - 文档平台。干净，绿色点缀，阅读优化。
• Notion - 全能工作区。温暖的极简主义，衬线标题，柔和表面。
• Resend - 面向开发者的邮件 API。极简深色主题，等宽字重点缀。
• Zapier - 自动化平台。温暖橙色，友好的插画驱动风格。

---

• Airtable - 电子表格与数据库混合体。多彩，友好，结构化数据美学。
• Clay - 创意设计机构。有机形状，柔和渐变，艺术指导式布局。
• Figma - 协作设计工具。充满活力的多色，俏皮而专业。
• Framer - 网站构建器。大胆的黑与蓝，动作优先，设计前瞻。
• Miro - 视觉协作。明亮的黄色点缀，无限画布美学。
• Webflow - 可视化 Web 构建器。蓝色点缀，精致营销网站风格。

---

• Binance - 加密货币交易所。大胆的单色加“币安黄”，交易大厅般的紧迫感。
• Coinbase - 加密货币交易所。干净的蓝色识别，以信任为核心，机构感。
• Kraken - 加密货币交易平台。紫色点缀的深色 UI，数据密集的仪表盘。
• Mastercard - 全球支付网络。温暖的奶油色画布，轨道药丸形，编辑式温情。
• Revolut - 数字银行。光滑的深色界面，渐变卡片，金融科技精准感。
• Stripe - 支付基础设施。标志性的紫色渐变，字重 300 的优雅。
• Wise - 国际汇款。明亮的绿色点缀，友好而清晰。

---

• Airbnb - 旅游市场。温暖的珊瑚色点缀，由摄影驱动，圆角 UI。
• Meta - 科技零售店。摄影优先，二元明暗表面，Meta 蓝行动按钮。
• Nike - 运动零售。单色 UI，超大号大写 Futura，全出血摄影。
• Shopify - 电商平台。深色优先的电影风格，霓虹绿点缀，超轻展示字重。
• Starbucks - 咖啡零售旗舰。四个层级的大地绿色系统，温暖的奶油色画布，专属 SoDoSans 字体。

---

• Apple - 消费电子。高级留白，SF Pro，电影感图像。
• HP - PC 和打印机制造商。纯白画布，HP 电光蓝信号行动按钮，几何感 Forma DJR Micro 字体，蓝色 V 形装饰。
• IBM - 企业技术。Carbon 设计系统，结构化的蓝色调色板。
• NVIDIA - GPU 计算。绿黑能量，技术力量美学。
• Pinterest - 视觉发现平台。红色点缀，瀑布流网格，图片优先。
• PlayStation - 游戏主机零售。三表面通道布局，青色悬停缩放交互。
• SpaceX - 太空技术。强烈的黑与白，全出血图像，未来感。
• Spotify - 音乐流媒体。深色氛围上的活力绿，粗体字体，由专辑艺术驱动。
• The Verge - 科技编辑媒体。酸薄荷与紫外线色点缀，Manuka 展示字体。
• Uber - 出行平台。大胆的黑与白，紧凑字体，城市能量。
• Vodafone - 全球通信品牌。纪念性全大写展示字号，沃达丰红章节条带。
• WIRED - 科技杂志。纸白宽幅密度，定制衬线体，墨水蓝链接。

---

• BMW - 豪华汽车。深色高级表面，精准的德国工程美学。
• BMW M - 高性能汽车。受赛车运动启发的对比，M 色彩点缀，以精准驱动的布局。
• Bugatti - 豪华超级跑车。影院黑色画布，单色质朴，巨大展示字重。
• Ferrari - 豪华汽车。黑白的明暗编辑风格，极其克制的法拉利红。
• Lamborghini - 豪华汽车。纯黑殿堂，金色点缀，专属 LamboType 新怪诞字体。
• Renault - 法国汽车。生动的极光渐变，专属 NouvelR 字体，零圆角按钮。
• Tesla - 电动汽车。极致的减法，电影感全视口摄影，Universal Sans 字体。

---

复古网络 · DESIGN.md 怀旧系列

一个周六系列——从 1990 年代的网页中提取的 DESIGN.md 文件。放入一个并告诉你的 AI 代理去构建一个年代准确的复古 UI。

• Dell (1996) - 产品目录时代的企业网页。直白的黑色页面框架，扁平色块“带状卡片”，厚重的 Helvetica-Black 标题搭配 Times Roman 正文，以及手工切割的 GIF 贴纸（“新品！”爆炸标志、获奖印章、斜角产品照片）。
• Nintendo.com (2001) - Y2K“控制台金属”网页。拉丝长春花色凹陷金属面板，半色调圆点碳纤维导航栏发光琥珀色，轮廓 Arial-Black 盒子艺术字标覆盖在电路板图案的标题区域，以及像素马里奥欢迎气泡。

每个 DESIGN.md 包含什么内容

每个文件都遵循Stitch DESIGN.md 格式，并包含扩展部分：

#	部分	捕获的内容
1	视觉主题与氛围	情绪、密度、设计哲学
2	调色盘与角色	语义名称 + 十六进制码 + 功能角色
3	字体排版规则	字体家族，完整层级表
4	组件样式	按钮、卡片、输入框、导航及其状态
5	布局原则	间距比例、网格、留白哲学
6	深度与海拔	阴影系统、表面层级
7	做与不做	设计护栏和反面模式
8	响应式行为	断点、触摸目标、折叠策略
9	代理提示指南	快速颜色参考、即用提示词

每个站点都包含：

文件	用途
DESIGN.md	设计系统（代理读取的内容）
preview.html	显示色板、字号阶梯、按钮、卡片的可视化目录
prev

Curated collection of DESIGN.md analysis by developer focused websites.

Copy a DESIGN.md into your project, tell your AI agent “build me a page that looks like this,” and generate high-quality UI that stays visually consistent with the design language.

Built with real design depth — including analyzed patterns, tokens, and rules — for high-quality UI generation, not surface-level outputs.

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.

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

AI Design + Build Ecosystem Tools

👉 Feature your product alongside the developers, designers, and vibecoders shipping UI with AI coding agents and web builders.

Ranked #150 globally on GitHub. A community resource used by developers, designers, and vibecoders.

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

Retro Web · DESIGN.md Nostalgia

A Saturday series — DESIGN.md files extracted from the web of the 1990s. Drop one in and tell your AI agent to build a period-accurate vintage UI.

• Dell (1996) - Catalog-era enterprise web. Literal black page frame, flat color-block "ribbon cards", chunky Helvetica-Black titles over Times Roman body, and hand-cut GIF stickers (NEW! bursts, award seals, beveled product photos).
• Nintendo.com (2001) - Y2K "console chrome" web. Brushed-periwinkle beveled metal panels, a halftone-dotted carbon nav glowing amber, outlined Arial-Black box-art wordmarks over circuit-board hero fields, and a pixel Mario welcome bubble.

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

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

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.

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.