灿海星图指南--DESIGN.md让AI写出漂亮UI，100K星的品牌设计语言库
·灿海星图指南

灿海星图指南--DESIGN.md让AI写出漂亮UI，100K星的品牌设计语言库

返回博客
金
金柘
#DESIGN.md#design-md#AI设计#Google Stitch#UI生成

你给AI Agent一个DESIGN.md文件，它就能生成和Stripe官网一模一样的UI——颜色、字体、间距、阴影，全部自动匹配。100K星，73个顶级品牌的设计语言全在这了。

本文是一篇实操指南，预计8分钟完成。已核实GitHub仓库存在(VoltAgent/awesome-design-md, 100K星, MIT协议)。

什么是DESIGN.md

Google Stitch提出这个概念：一个纯文本Markdown文件，描述一个品牌的完整设计系统。 AI编码Agent读取这个文件后，就能生成匹配品牌调性的UI。

每个DESIGN.md包含9个部分：

  1. Visual Theme & Atmosphere — 品牌的视觉感受（如"极简、温暖、圆润"）
  2. Color Palette & Roles — 颜色名+hex值+语义角色（主色/辅色/成功/警告）
  3. Typography Rules — 完整字体层级（H1-H4、body、caption的字号/字重/行高）
  4. Component Stylings — 按钮/卡片/输入框/导航的样式规则（含hover/focus/disabled状态）
  5. Layout Principles — 间距体系、网格、留白
  6. Depth & Elevation — 阴影系统、层级关系
  7. Do's and Don'ts — 设计规范和反面案例
  8. Responsive Behavior — 断点、触摸区域
  9. Agent Prompt Guide — 直接可用的AI提示词

怎么用

1. 获取某个品牌的DESIGN.md

bash git clone https://github.com/VoltAgent/awesome-design-md.git cd awesome-design-md

仓库里有73个目录，每个对应一个品牌。

2. 让AI Agent用这个设计生成UI

把DESIGN.md放到你的项目根目录，然后对Claude Code或Cursor说：

根据项目根目录的DESIGN.md，帮我设计一个支付确认页面。 包含：成功图标、订单摘要、支付金额、返回首页按钮。

Agent会自动从DESIGN.md中提取Stripe的品牌色（#635BFF主色、#00D924成功色）、字体（Söhne/Inter）、按钮样式规则（16px圆角、hover时亮度提升5%），然后按这些规则生成UI。

3. 接入灿海星图API

如果UI生成的Agent需要反复迭代，推荐用DeepSeek-V4-Pro：

json { "model": "deepseek-ai/DeepSeek-V4-Pro", "baseURL": "https://你的灿海星图endpoint/v1" }

单次简单的UI生成用V4-Flash就够了，成本更低。

4. 创建自己的品牌DESIGN.md

你也可以给你的项目写DESIGN.md。参考已有文件的格式，填9个部分即可。

73个品牌覆盖了什么

类别代表品牌
AI/LLMClaude, ElevenLabs, Mistral AI, Ollama, xAI
开发者工具Cursor, Vercel, Raycast, Superhuman, Warp
基础设施ClickHouse, MongoDB, PostHog, Sentry, Supabase
金融科技Binance, Coinbase, Kraken, Revolut, Stripe, Wise
消费品Apple, Meta, Nike, Shopify, Starbucks
媒体科技NVIDIA, PlayStation, SpaceX, Spotify, The Verge
汽车BMW, Ferrari, Lamborghini, Tesla

踩坑实录

现象原因解决
Agent生成的UI看起来完全不像目标品牌没把DESIGN.md放到项目根目录Agent默认不在子目录里找，必须放根目录或明确用@path指定
颜色对但字体不对DESIGN.md指定的字体是商业字体，本地没有在项目里配一个后备字体栈
移动端布局一团糟Agent倾向于只读前3个section就开工在提示词里明确要求"先读完整个DESIGN.md"

常见疑问

Q1：这和Figma导出的设计Token有什么区别？

Figma Token是给人类开发者用的（JSON格式）。DESIGN.md是给AI Agent用的——纯文本、自然语言描述、直接嵌入到提示词里。

Q2：我写一个DESIGN.md就能让所有AI Agent都生成一致的UI吗？

不同Agent对同一份DESIGN.md的解读会有差异，但颜色、字体、间距这些确定性规则能做到95%以上的一致性。

Q3：这是Google官方标准吗？

Google Stitch是Google的实验性项目（stitch.withgoogle.com）。不是W3C标准，但100K星说明社区已经接受了。

我为什么不用XX替代它

Figma Dev Mode是给人类开发者的视觉参考。Storybook是给组件库的文档。DESIGN.md是给AI Agent的设计语言——在AI生成UI的场景下，目前没有比DESIGN.md更简洁的方案。

本文数据来源于GitHub公开仓库(VoltAgent/awesome-design-md, MIT协议)，数据截至2026年7月10日。

查看所有文章 →