awesome-design-md

精选由开发者导向网站分析的 DESIGN.md 资源合集

Awesome DESIGN.md

将 DESIGN.md 文件复制到你的项目中，告诉你的 AI agent（智能代理）“为我构建一个看起来像这样的页面”，即可生成高质量 UI，并保持与设计语言在视觉上的一致性。

基于真实设计深度构建——包括分析后的模式（patterns）、token 和规则——用于高质量 UI 生成，而非表层输出。

什么是 DESIGN.md？

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

它就是一个 markdown 文件。无需 Figma 导出、JSON 模式或特殊工具。将其放入你的项目根目录，任何 AI 编码 agent 或 Google Stitch 都能立即理解你的 UI 应该是什么样子。Markdown 是 LLM 最擅于阅读的格式，因此无需解析或配置任何东西。

文件	谁阅读	定义内容
AGENTS.md	编码 agent	如何构建项目
DESIGN.md	设计 agent	项目的外观和感觉

本仓库提供从真实网站提取的、可直接使用的 DESIGN.md 文件。

请求一个 DESIGN.md

你可以请求一个 DESIGN.md 用于特定网站，包括独占交付给你个人的私有请求。

AI 设计与构建生态系统工具

👉 将你的产品展示给那些使用 AI 编码 agent 和网页构建工具交付 UI 的开发者、设计师和“氛围代码者”（vibecoders）。 GitHub 全球排名第 150 名。一个被开发者、设计师和氛围代码者使用的社区资源。

合集

AI 与 LLM 平台

• Claude - Anthropic 的 AI 助手。温暖的赤陶色强调色，编辑式清爽布局。
• Cohere - 企业 AI 平台。鲜艳的渐变色，数据丰富的仪表板美学。
• ElevenLabs - AI 语音平台。暗色电影感 UI，音频波形美学。
• Minimax - AI 模型供应商。大胆的深色界面，配霓虹色强调。
• Mistral AI - 开源权重 LLM 提供商。法式极简主义，紫色调。
• Ollama - 本地运行 LLM。终端优先，单色简洁。
• OpenCode AI - AI 编码平台。面向开发者的暗色主题。
• Replicate - 通过 API 运行 ML 模型。干净的白色画布，代码优先。
• Runway - AI 创意工具平台，具有编辑式电影节美学——暗色电影英雄区、纸白色阅读条、单一专有无衬线字体以及纯黑色药丸形状 CTA。
• 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 - 无头内容平台，采用深色优先的编辑式营销表面——112px 展示字体，IBM Plex Mono 技术眉毛，以及为最高优先级 CTA 保留的单一生珊瑚红色强调。
• Sentry - 错误监控。深色仪表板，数据密集，粉紫色强调。
• Supabase - 开源 Firebase 替代品。深祖母绿主题，代码优先。

生产力与 SaaS

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

设计与创意工具

• Airtable - 电子表格-数据库混合。色彩丰富，友好，结构化数据美学。
• Clay - 创意机构。有机形状，柔和渐变，艺术指导布局。
• Figma - 协作设计工具。鲜艳多色，活泼而专业。
• Framer - 网站构建工具。大胆黑蓝，动效优先，设计前卫。
• Miro - 视觉协作。亮黄色强调，无限画布美学。
• Webflow - 可视化网页构建工具。蓝色强调，精致营销网站美学。

金融科技与加密货币

• Binance - 加密货币交易所。单色背景上的大胆币安黄，交易大厅紧迫感。
• Coinbase - 加密货币交易所。干净蓝色身份，信任导向，机构感。
• Kraken - 加密货币交易平台。紫色强调的深色 UI，数据密集的仪表板。
• Mastercard - 全球支付网络。温暖奶白色画布，轨道药丸形状，编辑式温暖感。
• Revolut - 数字银行。流畅深色界面，渐变卡片，金融科技精准。
• Stripe - 支付基础设施。标志性紫色渐变，权重 300 的优雅。
• Wise - 国际汇款。亮绿色强调，友好清晰。

电商与零售

• Airbnb - 旅行市场。温暖珊瑚色强调，摄影驱动，圆角 UI。
• Meta - 科技零售商店。摄影优先，二元深浅表面，Meta 蓝色 CTA。
• Nike - 运动零售。单色 UI，大写 Futura 字号，全出血摄影。
• Shopify - 电商平台。深色优先电影感，霓虹绿强调，超轻展示字体。
• Starbucks - 咖啡零售旗舰。四层大地绿系统，温暖奶白色画布，专有 SoDoSans 字体。

媒体与消费品科技

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

汽车

• BMW - 豪华汽车。深色高级表面，精准德国工程美学。
• BMW M - 性能汽车。赛车运动启发对比，M 颜色强调，精准驱动布局。
• Bugatti - 豪华超跑。影院黑画布，单色简朴，纪念碑式展示字体。
• Ferrari - 豪华汽车。明暗对比黑白编辑风格，法拉利红，极端稀疏。
• Lamborghini - 豪华汽车。纯黑大教堂，金色强调，LamboType 自定义 Neo-Grotesk 字体。
• Renault - 法国汽车。鲜艳极光渐变，NouvelR 专有字体，零半径按钮。
• Tesla - 电动汽车。激进减法，电影感全视口摄影，Universal Sans 字体。

复古网页 · DESIGN.md 怀旧

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

• Dell (1996) - 目录时代的企业网页。字面黑色页面框架，平面色块“缎带卡片”，粗体 Helvetica-Black 标题搭配 Times Roman 正文，以及手工裁剪的 GIF 贴纸（NEW! 弹出框、奖励印章、斜面产品照片）。
• Nintendo.com (2001) - Y2K “主机金属”网页。拉丝淡紫色斜面金属面板，半色调圆点碳纤维导航发出琥珀色光，轮廓 Arial-Black 盒装艺术标语显现在电路板英雄区域上，以及像素马里奥欢迎气泡。

每个 DESIGN.md 的内容

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

#	章节	涵盖内容
1	视觉主题与氛围	情绪、密度、设计哲学
2	调色板与角色	语义词 + 十六进制码 + 功能角色
3	字体规则	字体族、完整层级表
4	组件样式	按钮、卡片、输入框、导航及其状态
5	布局原则	间距比例、网格、留白哲学
6	深度与层次	阴影系统、表面层级
7	最佳实践与禁忌	设计护栏与反模式
8	响应式行为	断点、触摸目标、折叠策略
9	Agent 提示指南	快速颜色参考、即用型提示

每个站点包含：

文件	用途
DESIGN.md	设计系统（agent 读取的内容）
preview.html	视觉目录，显示色板、字体比例、按钮、卡片
preview-dark.html	相同目录，深色表面

如何使用

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

贡献

请参阅 CONTRIBUTING.md 获取指南。

• 改进现有文件：修正错误的颜色、缺失的 token、模糊的描述。
• 报告问题：如果发现异常，请告知我们。

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

许可

MIT 许可证 - 请查阅 LICENSE

本仓库是一个从公共网站提取的设计系统文档精选合集。所有 DESIGN.md 文件按“原样”提供，不附带任何保证。提取的设计 token 代表公开可见的 CSS 值。我们不主张对任何站点的视觉标识拥有所有权。这些文档旨在帮助 AI agent 生成一致的 UI。