Awesome DESIGN.md

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

基于真实的设计深度构建——包括分析后的模式、令牌和规则——用于生成高质量 UI，而非表面级别的输出。

什么是 DESIGN.md？

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

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

文件	谁读取	定义什么
AGENTS.md	编码代理	如何构建项目
DESIGN.md	设计代理	项目的外观和感觉应该如何

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

请求一份 DESIGN.md

你可以针对特定网站请求一份 DESIGN.md，包括仅限你收到的私有请求。

AI 设计 + 构建生态工具

你用 AI 交付产品，但每次发布仍因无人宣传而悄然沉寂。EveryFeed 将你的 AI 助手接入一个社交工作空间，可以起草、安排并在 35 多个渠道发布——无需代理机构，无需营销人员。

别再从空白页开始构建。LaunchKit 为你的 AI 编码助手提供一个完整、可运行的产品作为起点——网站、初创公司和第一天就可点击的 Web 应用。

集合

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 代理框架。虚空黑色画布，翡翠绿强调，终端原生
• 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 - 支付基础设施。标志性紫色渐变，weight-300 优雅
• Wise - 国际汇款。亮绿色点缀，友好清晰

电子商务与零售

• Airbnb - 旅行市场。温暖珊瑚色点缀，摄影驱动，圆角 UI
• Meta - 科技零售店。摄影优先，明暗二元表面，Meta 蓝色 CTA
• Nike - 运动零售。单色 UI，巨大的全大写 Futura，满版摄影
• Shopify - 电子商务平台。深色电影感，霓虹绿点缀，超轻显示字体
• Starbucks - 咖啡零售旗舰。四层大地绿系统，温暖奶油色画布，专有 SoDoSans 字体

媒体与消费科技

• Apple - 消费电子产品。高级留白，SF Pro，电影级图像
• HP - PC 与打印机制造商。纯白画布，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 定制新无衬线体
• Renault - 法国汽车。鲜艳极光渐变，NouvelR 专有字体，零半径按钮
• Tesla - 电动汽车。极致减法，电影级全视口摄影，Universal Sans

复古网页 · DESIGN.md 怀旧

周六专题系列 — 从 1990 年代网页中提取的 DESIGN.md 文件。放入一个，告诉你的 AI 代理构建一个符合时代风格的老式 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	代理提示指南	快速颜色参考、即用型提示

每个站点包含：

文件	用途
DESIGN.md	设计系统（供代理阅读）
preview.html	视觉目录，展示色板、字体比例、按钮、卡片
preview-dark.html	相同目录，采用深色背景

如何使用

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

贡献

参见 CONTRIBUTING.md 获取指南。

• 改进现有文件：修复错误的颜色、缺失的 token、不准确的描述
• 报告问题：如果发现任何异常，请告知我们

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

许可证

MIT 许可证 - 参见 LICENSE

此仓库是一个精选的设计系统文档集合，提取自公开网站。所有 DESIGN.md 文件按“as is”提供，不附带任何担保。提取的设计令牌代表公开可见的 CSS 值。我们不对任何网站的视觉标识主张所有权。这些文档的存在是为了帮助 AI 代理生成一致的 UI。