企业官网建设流程全解析

ag-kit DESIGN.md 参考库实战指南：用 70+ 真实品牌设计规范驱动 AI 界面设计

【免费下载链接】ag-kit项目地址: https://gitcode.com/GitHub_Trending/an/ag-kit

本指南讲解 ag-kit 中design-spec技能附带的参考库（.agents/skills/design-spec/collection.md）：它收录了 70 多个真实产品（Stripe、Linear、Vercel、Apple、特斯拉等）的 DESIGN.md 条目，是任何 UI 项目动工前必读的"设计规范素材库"。读完本文，你将掌握如何在 ag-kit 的 AI 工作流中按行业分类检索这些参考、提炼其中的设计 token 结构，并按照规范流程为你的项目从零编写一份可被前端代码直接消费的DESIGN.md。

DESIGN.md：为什么写 UI 之前必须先有一份设计规范

在 ag-kit 中，DESIGN.md被定义为项目视觉语言的单一事实来源（single source of truth）。它的格式与编写规则由 design-spec 技能 统一定义，核心理念只有两条：

• 机器可读的设计 token（YAML front matter）：颜色、字体、圆角、间距、组件参数全部以结构化键值对存在，可直接换算成tokens.json、Figma variables 和 Tailwind theme config；
• 人类可读的设计理由（Markdown 正文）：用自然语言解释品牌气质、受众与决策依据，正文中的描述性名称必须能映射回 token 名。

更重要的是，DESIGN.md不是可选项，而是一道硬性门槛。design-rules 规则 明确规定：在编写或修改任何 UI（组件、页面、样式，Web 或移动端）之前，项目根目录必须已存在DESIGN.md；缺失则先根据需求简报创建，已存在则必须通读并严格按 token 构建。创建流程同样被写入了 /create 工作流：只要应用包含 UI，就必须在写代码前先产出DESIGN.md。

这份规范在该仓库自身就是"活文档"——web/DESIGN.md 就是按照这套 schema 写出的真实案例（zinc 中性色 + 单一青色品牌强调 + 明暗双主题 token），可作为任何新项目的对照样板。

collection.md 在整套工作流中的位置

参考库collection.md并非孤立文件，它是design-spec技能工作流的强制第一步。技能文档 SKILL.md 给出的编写流程是：

1. 阅读需求简报，推断设计方向（可参考frontend-design/mobile-design技能）；
2. 先读collection.md——从 70+ 份真实世界的 DESIGN.md 中找出与简报气质、行业最接近的 1～2 份，打开其原文研究 token 是如何组织的，适配而非盲目复制；
3. 在项目根目录写DESIGN.md，先 token 后叙述；
4. 严格按 token 构建 UI，正文描述性名称必须映射到 token 名；
5. 视觉语言变化时保持 DESIGN.md 同步，它永远是事实来源。

也就是说，collection.md扮演的是"设计师的灵感样本夹 + 参考实现索引"：每一条目都是一个真实产品 DESIGN.md 的入口，附一句话设计摘要，让 Agent 在动笔前就能快速判断"这个行业/这种气质的产品，别人是怎么定义 token 的"。该文件被 manifest.lock.json 锁定版本，随 skill 一起分发。

参考库全景：按行业分类浏览 73 份真实 DESIGN.md

collection.md将 70+ 条目按行业分为 10 类，覆盖 AI、开发者工具、金融、电商、消费电子、汽车等主流场景。每个条目包含品牌名、业务定位与一句"设计语言摘要"，摘要本身就是一份微型设计规范：主色、字体、布局、明暗模式、交互细节都浓缩其中。以下是完整清单（各条目的完整 DESIGN.md 链接见 collection.md 原文）。

AI & LLM 平台（12 条）

• 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— 马斯克的 AI 实验室。强烈单色、未来主义极简。

开发者工具与 IDE（7 条）

• Cursor— AI 优先代码编辑器。光滑暗色界面、渐变强调。
• Expo— React Native 平台。暗色主题、紧凑字距、代码中心。
• Lovable— AI 全栈构建器。俏皮渐变、友好开发美学。
• Raycast— 效率启动器。光滑暗色镀铬、鲜艳渐变强调。
• Superhuman— 极速邮件客户端。高端暗色 UI、键盘优先、紫色光晕。
• Vercel— 前端部署平台。黑白精确、Geist 字体。
• Warp— 现代终端。暗色 IDE 式界面、块状命令 UI。

后端、数据库与 DevOps（8 条）

• ClickHouse— 快速分析数据库。黄色强调、技术文档风格。
• Composio— 工具集成平台。现代暗色 + 彩色集成图标。
• HashiCorp— 基础设施自动化。企业级简洁、黑白。
• MongoDB— 文档数据库。绿叶品牌、开发者文档导向。
• PostHog— 产品分析。俏皮刺猬品牌、开发者友好暗色 UI。
• Sanity— 无头内容平台。暗色优先的编辑式营销表面：112px 展示字号、IBM Plex Mono 技术眉标、单一珊瑚红强调留给最高优先级 CTA。
• Sentry— 错误监控。暗色仪表盘、数据密集、粉紫强调。
• Supabase— 开源 Firebase 替代品。暗祖母绿主题、代码优先。

效率工具与 SaaS（7 条）

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

设计与创意工具（6 条）

• Airtable— 电子表格 × 数据库混合体。多彩、友好、结构化数据美学。
• Clay— 创意代理。有机形状、柔和渐变、艺术指导式布局。
• Figma— 协作设计工具。鲜艳多彩、俏皮又专业。
• Framer— 网站构建器。大胆黑蓝、动效优先、设计前卫。
• Miro— 可视化协作。亮黄强调、无限画布美学。
• Webflow— 可视化建站工具。蓝色强调、精致营销站美学。

金融科技与加密（7 条）

• Binance— 加密交易所。单色基底上的大胆币安黄、交易场紧迫感。
• Coinbase— 加密交易所。干净蓝色身份、信任导向、机构感。
• Kraken— 加密交易平台。紫色强调暗色 UI、数据密集仪表盘。
• Mastercard— 全球支付网络。温暖奶油画布、轨道胶囊形状、编辑式温暖。
• Revolut— 数字银行。光滑暗色界面、渐变卡片、金融科技精确感。
• Stripe— 支付基础设施。标志性紫色渐变、300 字重的优雅。
• Wise— 国际转账。亮绿强调、友好清晰。

电商与零售（5 条）

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

媒体与消费科技（12 条）

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

汽车（7 条）

• BMW— 豪华汽车。暗色高端表面、精确的德式工程美学。
• BMW M— 性能汽车。赛车启发的对比、M 色彩强调、精确驱动布局。
• Bugatti— 豪华超跑。影院黑画布、单色克制、纪念碑式展示字体。
• Ferrari— 豪华汽车。明暗黑白编辑风、法拉利红、极致稀疏使用。
• Lamborghini— 豪华汽车。纯黑教堂、金色强调、LamboType 定制 Neo-Grotesk。
• Renault— 法国汽车。鲜艳极光渐变、NouvelR 专有字体、零圆角按钮。
• Tesla— 电动汽车。激进减法、电影感全视口摄影、Universal Sans。

复古网页 · DESIGN.md 怀旧系列（2 条）

这是一个周六连载系列——从 90 年代网页中提取的 DESIGN.md 文件。把它放进项目并让 AI agent 构建一个时代精确的复古 UI：

• Dell (1996)— 目录时代的企业网页。字面意义的黑色页面边框、扁平色块"缎带卡片"、Helvetica-Black 粗标题配 Times Roman 正文、手工裁剪的 GIF 贴纸（NEW! 爆炸标、奖章印章、斜面产品照片）。
• Nintendo.com (2001)— Y2K"主机镀铬"网页。拉丝长春花蓝斜面金属面板、半色调点碳纤维导航发出琥珀色光、电路板主视觉上的 Arial-Black 描边盒装字标、像素马里奥欢迎气泡。

从"设计摘要"到 token：参考条目里藏着什么

每个条目的摘要都不是形容词堆砌，而是可翻译成 token 的浓缩设计决策。以几个典型条目为例，可以这样拆解：

这正是 SKILL.md 强调的对应关系：正文允许使用描述性名称（如 "Midnight Forest Green"），但它必须映射到系统化 token 名（如primary）。参考库的作用就是给你一批"如何把气质描述映射成 token 结构"的现成样本。

对照本仓库的 web/DESIGN.md，可以看到同样的逻辑如何落地：front matter 里定义colors.primary（#18181B）与唯一的品牌强调brand（teal#2DD4BF），正文「Colors」一节再用自然语言说明"Zinc 中性色 + 单一青色强调 + 代码表面近黑#0C0C0E"；rounded定义了sm/md/lg/full四级，components.button-primary通过{colors.primary}与{rounded.lg}引用基础 token。这份文件本身就是"参考库条目 → 项目 DESIGN.md"的最佳转化样例。

实战流程：用参考库从零写出一份 DESIGN.md

结合 SKILL.md 的完整规范 与 design-rules 门槛，推荐按下面五步操作：

第一步：判断行业与气质，锁定 1～2 个参考。从上面 10 个分类中，按"行业是否相关 + 气质是否接近"各选一个。例如要做一款开发者工具官网，可在"开发者工具与 IDE"类里选 Vercel（黑白精确、Geist 字体）；要做金融类产品，参考 Stripe 的紫色渐变或 Revolut 的暗色精确。打开 collection.md 原文中的对应链接，研究其 DESIGN.md 的 token 组织结构。

第二步：设计 token schema（YAML front matter）。按 SKILL.md 的 token schema 定义version / name / colors / typography / rounded / spacing / components。key 使用推荐命名（颜色primary secondary tertiary neutral surface on-surface error；排版headline-display … label-sm；圆角none sm md lg xl full），组件内通过{colors.primary}、{rounded.md}这类引用语法复用基础 token。typography 子属性包括fontFamily / fontSize / fontWeight / lineHeight / letterSpacing，其中lineHeight建议用无单位倍数。

第三步：按 8 个规范章节撰写正文。SKILL.md 规定的章节顺序 是：Overview（品牌与风格）→ Colors → Typography → Layout → Elevation & Depth → Shapes → Components → Do's and Don'ts。无关章节可以省略，但重复的章节标题属于硬错误——消费者行为约定 规定：遇到未知章节/未知 token 名应保留不报错，但两个## Colors会直接拒绝整份文件。

第四步：用最小示例做骨架。参照 SKILL.md 第 7 节的最小示例：name+ 3 个颜色 + 2 级排版 +rounded/spacing各 2～3 级 + 1 个button-primary组件，配一段 Overview 与 Do's and Don'ts，即可满足门槛要求并进入 UI 开发。

第五步：构建并保持同步。前端按 token 构建（正文章节可放行描述性名称，但必须能映射回 token），视觉语言变化时回头更新 DESIGN.md，让规范始终是事实来源。对于头部/CLI/纯 API 项目，create 工作流 明确允许跳过此步骤。

使用原则与注意点

• 适配，永远不要盲目复制。参考库的价值是研究别人如何组织 token，而不是照搬他人的品牌配色；参考条目的设计摘要给出的是方向，落到自己项目时仍需结合受众与品牌资产重定义。
• 摘要中的技术名词本身就是规范。比如 Runway 的"单一专有 sans"、Sanity 的"112px display type"、Starbucks 的"四层大地绿系统"，这些密度极高的描述在改写时应被保留为设计决策，而非稀释成"简洁大气"这类空话。
• 门槛适用于所有 UI 工单。无论 Web 还是移动端、新建还是改版，缺失DESIGN.md时都应先按design-spec技能补齐，再开始写组件（参见 design-rules）。
• 参考库随技能版本锁定。collection.md的哈希被记录在 manifest.lock.json，升级技能时会随清单校验更新，保证工作流中看到的参考始终与技能版本一致。

相关文件速查

• 参考库原文 — 73 份真实 DESIGN.md 的完整清单与原始链接
• design-spec 技能规范 — DESIGN.md 格式、token schema、类型系统、章节顺序、消费者行为与编写工作流
• 设计门槛规则 — 写 UI 前必须存在 DESIGN.md 的硬性门禁
• create 工作流 —/create命令中"Design Source-of-Truth"步骤的落地位置
• 仓库自身的设计规范样例 — 一套完整可对照的真实 DESIGN.md 实现

【免费下载链接】ag-kit项目地址: https://gitcode.com/GitHub_Trending/an/ag-kit