夜雨聆风Hello，我是Niko。16年程序员老兵，专注分享 AI编程实战经验、宝藏工具资源、前沿技术动态。不玩套路，多讲干货。
用AI 写前端，最常见的翻车不是功能 bug，是丑。
我让 Claude Code 写过一个 dashboard，出来的东西是灰底白卡加蓝色按钮，像是从某个 2015 年的 Bootstrap 模板里扒下来的。功能都对，就是一打开浏览器就想关掉。
后来想明白了：不是 AI 不懂 CSS，是它没有审美参照。人类开发者写 UI 前好歹打开 Dribbble 看两眼，AI 不会。它知道"按钮应该有圆角"，但不知道"Stripe 的按钮是 6px 圆角、font-weight 600、带 0.5px 的细边框"。
最近发现一个项目，思路很简单粗暴地解决了这个问题。
它是什么
DESIGN.md 就是把一个品牌的设计系统写成 Markdown。
这个概念最早由 Google Stitch 提出。AI 读 Markdown 最顺畅，那就把设计规范也写成 Markdown：颜色用什么色值、字体用什么字号、按钮长什么样、间距怎么定，全部结构化地写清楚。
开源项目 awesome-design-md 在 GitHub 上拿到了 48.9k star，做的事情是从 66 个知名品牌的官网上提取设计模式，每个品牌生成一份标准化的 DESIGN.md。
用法只有一步：把文件丢进你的项目根目录，然后告诉 AI "按照 DESIGN.md 来写 UI"。
66 个品牌，从苹果到兰博基尼
66 个品牌按领域分成 7 大类：
还有一个汽车分类，Tesla、Ferrari、Lamborghini 都有，适合做高端品牌风格的展示页面。
每个品牌用一句话概括风格特征：
• Stripe -- "Payment infrastructure. Signature purple gradients, weight-300 elegance." • Apple -- "Consumer electronics. Premium white space, SF Pro, cinematic imagery." • Linear -- "Project management. Ultra-minimal, precise, purple accent."
描述短，但信息够用。AI 读到这些就知道该怎么配色、选字体了。
文件里到底写了什么
每份 DESIGN.md 不是随便写两句"用蓝色、圆角按钮"就完了。它遵循 Google Stitch 定义的标准格式，9 个章节覆盖从视觉调性到响应式断点的所有细节：
• 视觉主题与氛围（整体调性和设计哲学） • 配色方案与角色（每个颜色有语义名称、色值、功能说明） • 排版规则（字体家族和完整的字号层级表） • 组件样式（按钮、卡片、输入框、导航栏，含各种交互状态） • 布局原则（间距比例尺、网格系统） • 深度与层次（阴影系统、表面层级） • 设计准则（该做什么、不该做什么） • 响应式行为（断点、触控目标、折叠策略） • Agent 提示指南（快速配色参考和可直接用的提示词）
最后这个 Agent 提示指南值得单独说一下：它专门为 AI agent 准备了一段浓缩版的配色和组件规则，相当于给 AI 一个速查手册。
所以一个 Markdown 文件能让 AI "有审美"，不是因为它教 AI 什么叫好看，是因为它直接把一套验证过的设计决策塞进了上下文。
怎么用
命令行一条搞定：
npx getdesign@latest add stripe在项目根目录执行，Stripe 风格的 DESIGN.md 就下载好了。把 stripe 换成 apple、linear、cursor 都行。
嫌命令行麻烦也没关系，去 getdesign.md 网站或 GitHub 仓库，找到品牌页面直接复制内容，粘贴到项目根目录的 DESIGN.md 文件里就行。
放好之后，在 Claude Code 或 Cursor 里写 UI 时，加一句提示就行：
"Build a dashboard page following the design system in DESIGN.md"
或者更直接：
"参考 DESIGN.md 里的设计规范，给我写一个 landing page"
AI 会自动读取文件中的配色、字体、组件规则，然后按照这套设计语言来生成代码。
我试了一下效果差别。同样让 Claude Code 写一个 SaaS 定价页面，不加 DESIGN.md 出来的是中规中矩的灰白蓝配色；加了 Stripe 的 DESIGN.md 之后，紫色渐变、细字重、精致的卡片阴影都出来了，一眼就是 Stripe 那个味道。
这个思路为什么管用
之前也有人试过让 AI 写好看的 UI。在 prompt 里写"make it look modern and clean"，问题是太模糊了："现代"是 Vercel 那种极简黑白，还是 Figma 那种多彩活泼？AI 猜不出你想要哪种。
也有人直接喂截图让 AI 像素级复刻。又太具体了。一个按钮的截图并不能告诉 AI 这个按钮 hover 时该是什么样。
DESIGN.md 卡在中间这个位置刚刚好。它不描述"好看"这个结论，而是把产生"好看"效果的具体决策写出来：用什么颜色、什么字重、什么间距比例。这些参数 AI 理解起来毫无障碍。
格式上也讨巧。Markdown 是 LLM 处理得最好的文本格式，不需要 JSON schema，不需要 Figma 插件，不需要额外工具链。一个纯文本文件，放进根目录就完事了。
想想看，CLAUDE.md 告诉 AI 怎么写代码，DESIGN.md 告诉 AI 怎么写 UI。两个文件一放，编程助手就同时有了工程规范和审美标准。
不足和提醒
说几个需要注意的地方。
这些不是官方设计系统。文件里的设计 token 是从各品牌官网的公开 CSS 中提取的，品牌方不知道也没授权。拿来学习找灵感没问题，但如果你要做一个"看起来像 Stripe"的竞品，知识产权上可能有风险。
设计系统也不等于好设计。DESIGN.md 能让 AI 输出的 UI 风格一致，但信息架构和交互逻辑还是得你自己把关。我试过让 AI 按 Stripe 风格写一个博客主题，配色确实好看了，但 Stripe 的设计语言本来是为支付产品优化的，搬到博客上总觉得哪里不对。选错参照品牌比没有参照更麻烦。
另外，目前 66 个品牌都是国际品牌。微信、飞书、钉钉这些国内产品的设计系统没有收录。做面向国内用户的产品，这部分得自己补。
最后，生成质量跟模型能力强相关。同一份 DESIGN.md，Claude Code 和一些小模型产出的差距挺大的。
一句话总结
如果你也被 AI 写的前端丑哭过，试试往项目里丢一个 DESIGN.md。不教 AI 什么是美，直接告诉它照着谁来。
参考资料：
• getdesign.md 官网[1] • awesome-design-md GitHub 仓库[2] • Google Stitch DESIGN.md 概念文档[3]
引用链接
[1] getdesign.md 官网: https://getdesign.md/[2] awesome-design-md GitHub 仓库: https://github.com/VoltAgent/awesome-design-md[3] Google Stitch DESIGN.md 概念文档: https://stitch.withgoogle.com/docs/design-md/overview/
