中文 | English

受开发者导向网站启发整理的 DESIGN.md 精选集合。

Awesome DESIGN.md

中文 | English

把一个 DESIGN.md 放进你的项目里，再告诉 AI agent “给我做一个长得像这个的网站”，就能得到真正贴近目标视觉的页面。

什么是 DESIGN.md？

DESIGN.md 是 Google Stitch 引入的一个新概念。它是一份纯文本的设计系统文档，供 AI agent 读取并生成风格一致的界面。

它本质上就是一个 markdown 文件。不需要 Figma 导出、不需要 JSON schema，也不需要特殊工具。把它放到项目根目录，AI 编码 agent 或 Google Stitch 就能立即理解你的 UI 应该长什么样。Markdown 也是 LLM 最容易读取的格式，因此不需要额外解析或配置。

文件	谁来读取	它定义什么
AGENTS.md	Coding agents	如何构建项目
DESIGN.md	Design agents	项目应该呈现怎样的视觉与体验

这个仓库提供了可直接使用的 DESIGN.md 文件，内容来自真实网站的提取与整理。

请求一个 DESIGN.md

你可以为特定网站请求一个 DESIGN.md，也支持仅交付给你的私有请求。

赞助者 ❤️

成为赞助者 [1M+ view] - 你的 logo 可以展示在这里，并出现在 getdesign.md

收录列表

AI 与 LLM 平台

• Claude - Anthropic 的 AI 助手。温暖陶土色点缀，干净的编辑式布局
• Cohere - 企业级 AI 平台。鲜艳渐变、信息密集的仪表盘审美
• ElevenLabs - AI 语音平台。电影感深色界面、波形导向视觉
• Minimax - AI 模型提供方。大胆深色界面配霓虹点缀
• Mistral AI - 开放权重 LLM 提供方。法式工程极简，带紫色调
• Ollama - 本地运行 LLM。终端优先、黑白极简
• OpenCode AI - AI 编码平台。面向开发者的深色主题
• Replicate - 通过 API 运行 ML 模型。干净白色画布、代码导向
• RunwayML - AI 视频生成。电影感深色 UI、富媒体布局
• Together AI - 开源 AI 基础设施。技术感、蓝图式设计
• VoltAgent - AI agent 框架。深黑画布、祖母绿点缀、终端原生气质
• xAI - Elon Musk 的 AI 实验室。冷峻黑白、未来感极简

开发者工具与 IDE

• Cursor - AI 优先代码编辑器。利落深色界面与渐变点缀
• Expo - React Native 平台。深色主题、紧凑字距、代码中心化
• Lovable - AI 全栈构建器。活泼渐变、友好的开发者气质
• Raycast - 效率启动器。精致深色外壳与高饱和渐变点缀
• Superhuman - 高速邮件客户端。高级深色 UI、键盘优先、紫色光晕
• Vercel - 前端部署平台。黑白精确感与 Geist 字体
• Warp - 现代终端。类似 IDE 的深色界面与块状命令 UI

后端、数据库与 DevOps

• ClickHouse - 高速分析数据库。黄色点缀、技术文档风
• Composio - 工具集成平台。现代深色基底配彩色集成图标
• HashiCorp - 基础设施自动化。企业级干净风格，黑白主导
• MongoDB - 文档数据库。绿叶品牌元素、偏开发者文档导向
• PostHog - 产品分析。刺猬品牌感、开发者友好的深色 UI
• Sanity - Headless CMS。红色点缀、内容优先的编辑式布局
• Sentry - 错误监控。深色仪表盘、信息密集、粉紫色点缀
• Supabase - 开源 Firebase 替代品。深色祖母绿主题、代码优先

效率与 SaaS

• Cal.com - 开源日程安排。中性干净 UI、开发者导向的简洁感
• Intercom - 客户沟通。友好的蓝色调与对话式界面模式
• Linear - 面向工程师的项目管理。极简、精确、紫色点缀
• Mintlify - 文档平台。干净、绿色点缀、偏阅读优化
• Notion - 一体化工作空间。温暖极简、衬线标题、柔和表面
• Resend - 面向开发者的邮件 API。极简深色主题与等宽字体点缀
• Zapier - 自动化平台。温暖橙色、友好插画驱动

设计与创意工具

• Airtable - 表格数据库混合体。多彩、友好、结构化数据气质
• Clay - 创意机构。自然形态、柔和渐变、强 art direction 布局
• Figma - 协作设计工具。多彩鲜明、活泼但专业
• Framer - 网站构建器。大胆黑蓝配色、动效优先、设计导向
• Miro - 可视化协作工具。亮黄色点缀、无限画布气质
• Webflow - 可视化网页构建器。蓝色点缀、精致营销站审美

金融科技与加密

• Binance - 加密货币交易所。醒目的 Binance Yellow 配黑白基底，交易大厅般紧张感
• Coinbase - 加密货币交易所。干净蓝色品牌、强调信任感与机构感
• Kraken - 加密交易平台。紫色点缀深色 UI、信息密集仪表盘
• Revolut - 数字银行。利落深色界面、渐变卡片、金融科技精度
• Stripe - 支付基础设施。标志性紫色渐变与 300 字重优雅感
• Wise - 国际汇款。明亮绿色点缀，友好清晰

电商与零售

• Airbnb - 旅行平台。温暖珊瑚色点缀、摄影驱动、圆角 UI
• Meta - 科技零售店。摄影优先、明暗双表面、Meta Blue CTA
• Nike - 运动零售。黑白 UI、大号大写 Futura、全幅摄影
• Shopify - 电商平台。电影感深色优先、霓虹绿色点缀、超轻展示字体

媒体与消费科技

• Apple - 消费电子。高级留白、SF Pro、电影感图像
• IBM - 企业科技。Carbon 设计系统、结构化蓝色调
• NVIDIA - GPU 计算。绿黑能量感、技术力量美学
• Pinterest - 视觉发现平台。红色点缀、瀑布流、图片优先
• PlayStation - 游戏主机零售。三层表面布局、青色 hover 放大交互
• SpaceX - 航天科技。冷峻黑白、全幅图像、未来感
• Spotify - 音乐流媒体。深色背景上的高饱和绿色、粗体排版、唱片封面驱动
• The Verge - 科技媒体。酸性薄荷与紫外线点缀、Manuka 展示字体
• Uber - 出行平台。大胆黑白、紧凑字形、都市能量
• WIRED - 科技杂志。纸白大报密度、自定义衬线、墨蓝链接

汽车

• BMW - 豪华汽车。深色高端表面、精密德式工程感
• Bugatti - 超级豪车。电影黑画布、黑白克制、纪念碑式展示字体
• Ferrari - 豪华汽车。明暗对照的黑白编辑风，法拉利红极度克制
• Lamborghini - 豪华汽车。纯黑殿堂感、金色点缀、LamboType 定制新怪体
• Renault - 法国汽车。鲜明极光渐变、NouvelR 专有字体、零圆角按钮
• Tesla - 电动车。极致减法、电影感全视口摄影、Universal Sans

每个 DESIGN.md 里面有什么

每个文件都遵循 Stitch DESIGN.md format，并扩展了以下部分：

#	Section	说明
1	Visual Theme & Atmosphere	氛围、密度、设计哲学
2	Color Palette & Roles	语义名称 + 十六进制值 + 功能角色
3	Typography Rules	字体家族与完整层级表
4	Component Stylings	按钮、卡片、输入框、导航及其状态
5	Layout Principles	间距尺度、网格、留白哲学
6	Depth & Elevation	阴影系统与表面层级
7	Do's and Don'ts	设计护栏与反模式
8	Responsive Behavior	断点、触控目标、折叠策略
9	Agent Prompt Guide	颜色速查与可直接使用的 prompt

每个站点包含：

文件	用途
DESIGN.md	设计系统本体（供 agent 读取）
preview.html	展示颜色、字阶、按钮、卡片等的视觉目录
preview-dark.html	使用深色表面的同类目录

如何使用

1. 把某个站点的 DESIGN.md 复制到你的项目根目录
2. 告诉你的 AI agent 使用它。

贡献

参见 CONTRIBUTING.md 了解贡献规范。

• 改进现有文件：修正错误颜色、缺失 token 或描述不够强的问题
• 报告问题：如果你觉得哪里不对，请告诉维护者

在提交 PR 之前，请先创建 issue讨论你的想法并获得维护者反馈。

许可证

MIT License - 见 LICENSE

这个仓库是从公开网站提取整理而来的设计系统文档集合。所有 DESIGN.md 文件均按“原样”提供，不附带任何担保。被提取的 design token 代表公开可见的 CSS 值。我们不主张拥有任何站点视觉识别的所有权。这些文档的存在，是为了帮助 AI agent 生成一致的 UI。