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 技能 统一定义核心理念只有两条机器可读的设计 tokenYAML 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 给出的编写流程是阅读需求简报推断设计方向可参考frontend-design/mobile-design技能先读collection.md——从 70 份真实世界的 DESIGN.md 中找出与简报气质、行业最接近的 12 份打开其原文研究 token 是如何组织的适配而非盲目复制在项目根目录写DESIGN.md先 token 后叙述严格按 token 构建 UI正文描述性名称必须映射到 token 名视觉语言变化时保持 DESIGN.md 同步它永远是事实来源。也就是说collection.md扮演的是设计师的灵感样本夹 参考实现索引每一条目都是一个真实产品 DESIGN.md 的入口附一句话设计摘要让 Agent 在动笔前就能快速判断这个行业/这种气质的产品别人是怎么定义 token 的。该文件被 manifest.lock.json 锁定版本随 skill 一起分发。参考库全景按行业分类浏览 73 份真实 DESIGN.mdcollection.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 实验室。强烈单色、未来主义极简。开发者工具与 IDE7 条Cursor— AI 优先代码编辑器。光滑暗色界面、渐变强调。Expo— React Native 平台。暗色主题、紧凑字距、代码中心。Lovable— AI 全栈构建器。俏皮渐变、友好开发美学。Raycast— 效率启动器。光滑暗色镀铬、鲜艳渐变强调。Superhuman— 极速邮件客户端。高端暗色 UI、键盘优先、紫色光晕。Vercel— 前端部署平台。黑白精确、Geist 字体。Warp— 现代终端。暗色 IDE 式界面、块状命令 UI。后端、数据库与 DevOps8 条ClickHouse— 快速分析数据库。黄色强调、技术文档风格。Composio— 工具集成平台。现代暗色 彩色集成图标。HashiCorp— 基础设施自动化。企业级简洁、黑白。MongoDB— 文档数据库。绿叶品牌、开发者文档导向。PostHog— 产品分析。俏皮刺猬品牌、开发者友好暗色 UI。Sanity— 无头内容平台。暗色优先的编辑式营销表面112px 展示字号、IBM Plex Mono 技术眉标、单一珊瑚红强调留给最高优先级 CTA。Sentry— 错误监控。暗色仪表盘、数据密集、粉紫强调。Supabase— 开源 Firebase 替代品。暗祖母绿主题、代码优先。效率工具与 SaaS7 条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 构建一个时代精确的复古 UIDell (1996)— 目录时代的企业网页。字面意义的黑色页面边框、扁平色块缎带卡片、Helvetica-Black 粗标题配 Times Roman 正文、手工裁剪的 GIF 贴纸NEW! 爆炸标、奖章印章、斜面产品照片。Nintendo.com (2001)— Y2K主机镀铬网页。拉丝长春花蓝斜面金属面板、半色调点碳纤维导航发出琥珀色光、电路板主视觉上的 Arial-Black 描边盒装字标、像素马里奥欢迎气泡。从设计摘要到 token参考条目里藏着什么每个条目的摘要都不是形容词堆砌而是可翻译成 token 的浓缩设计决策。以几个典型条目为例可以这样拆解参考条目摘要可提炼的 token 决策Ollama「终端优先、单色极简」colors用单一中性色阶typography走等宽字体rounded趋近 0components保持扁平Stripe「标志性紫色渐变、300 字重优雅」colors.primary定义为紫色渐变源色typography强调超轻字重spacing与rounded走大留白、大圆角Linear「超极简、精确、紫色强调」colors只有 1 个强调色typography级别克制少层级components参数精确统一WIRED「纸白宽幅密度、定制衬线」typography用衬线族、行高紧凑colors高对比纸白基底 墨蓝链接色这正是 SKILL.md 强调的对应关系正文允许使用描述性名称如 Midnight Forest Green但它必须映射到系统化 token 名如primary。参考库的作用就是给你一批如何把气质描述映射成 token 结构的现成样本。对照本仓库的 web/DESIGN.md可以看到同样的逻辑如何落地front matter 里定义colors.primary#18181B与唯一的品牌强调brandteal#2DD4BF正文「Colors」一节再用自然语言说明Zinc 中性色 单一青色强调 代码表面近黑#0C0C0Erounded定义了sm/md/lg/full四级components.button-primary通过{colors.primary}与{rounded.lg}引用基础 token。这份文件本身就是参考库条目 → 项目 DESIGN.md的最佳转化样例。实战流程用参考库从零写出一份 DESIGN.md结合 SKILL.md 的完整规范 与 design-rules 门槛推荐按下面五步操作第一步判断行业与气质锁定 12 个参考。从上面 10 个分类中按行业是否相关 气质是否接近各选一个。例如要做一款开发者工具官网可在开发者工具与 IDE类里选 Vercel黑白精确、Geist 字体要做金融类产品参考 Stripe 的紫色渐变或 Revolut 的暗色精确。打开 collection.md 原文中的对应链接研究其 DESIGN.md 的 token 组织结构。第二步设计 token schemaYAML 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 → Dos and Donts。无关章节可以省略但重复的章节标题属于硬错误——消费者行为约定 规定遇到未知章节/未知 token 名应保留不报错但两个## Colors会直接拒绝整份文件。第四步用最小示例做骨架。参照 SKILL.md 第 7 节的最小示例name 3 个颜色 2 级排版 rounded/spacing各 23 级 1 个button-primary组件配一段 Overview 与 Dos and Donts即可满足门槛要求并进入 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考