我要投稿

Google design.md 实战：让 AI 帮你做出 99.99% 的人做不出的设计

发布日期：2026-05-20 11:56:35 浏览次数： 1514

作者：Lenny的增长笔记

微信搜一搜，关注“Lenny的增长笔记”

最近我一直在琢磨一件事：为什么 vibe coding 这么火，但十个 AI 一键搓出来的产品，有九个长得像同一个？紫色渐变、玻璃拟态、首屏 hero 大字加一句不痛不痒的 slogan——你刷到第二个就想关掉。

Google 上个月开源了一个叫 design.md 的新东西，目的就是治这个病。它不是模板，不是 UI 库，而是一份给 AI Agent 看的"设计灵魂说明书"。你把字体、配色、间距、动效、组件规范全部写进一份 Markdown，丢给 Cursor、Codex、Claude Code 或者任何带 attachment 的 agent，AI 就能照着这套 DNA 把你的整个产品做下去——不是只做出第一屏，是整个产品。

我把设计师 Meng To 最近一期访谈完整啃了一遍（他是 Design+Code 的创始人，独立做了 Aura、New Form 等四款产品），加上自己实操了一周，这篇把整套方法论拆给你看。读完你能拿到：一份可复制的工作流、一组现成的工具清单、以及为什么 AI 越强、taste 越贵的底层逻辑。

design.md 到底是什么

如果你写过 Cursor 或 Claude Code，应该已经熟悉 AGENTS.md、SKILLS.md 这种东西——它们是写给 agent 的项目说明书，告诉 AI "这个 repo 的规矩是什么"。design.md 是这一家族里最新的一个成员，专门写给"设计"这件事。

它的核心是把一套设计系统翻译成结构化的 Markdown：标题字号、正文字号、行高、主色辅助色、按钮 hover 状态、间距栅格，甚至 WebGL 动效的着色器参数，全部能塞进去。一份合格的 design.md 长得像一本菜谱，里面有表格、有代码块、有命名规范。你把它当附件丢给 agent，AI 就有了风格的"骨架"。

这里有一个三层心智模型，我觉得是整篇文章里最值得记住的一句：

HTML 是做好的菜，design.md 是菜谱，skills 是食材。

大多数人现在还停留在抄菜——看到一个漂亮的落地页，直接 copy HTML 丢给 AI 说"按这个做"。问题是，AI 不知道你想要哪种风味、哪种火候，只能给你做出一个"像但不是"的东西。给它菜谱，它才知道为什么这道菜要这样做。给它食材清单，它才能在另一道菜里复现同样的味道。

design.md 最大的好处是跨平台可迁移。无论你今天用 Lovable 还是 v0，明天换到 Cursor 还是 Codex，这份文件可以无缝带走。它本质上是把你的"设计记忆"从某个 SaaS 工具里解放出来，存进你自己的 git。再过半年你换工具、换模型、甚至换合作者，这份文件依然能复现出同一套视觉。这件事在 AI 圈里其实很罕见——大多数工具的输出都是"一次性的"，而 design.md 是为数不多能形成"个人资产"的格式。

为什么 oneshot 永远不够：设计漂移

你大概率经历过这一幕：写一段 prompt，AI 一键生成首屏，惊艳，截图发朋友圈。然后你说"再加一个定价页"，第二屏出来——配色还行，但字体微妙地变了；再来一个"关于我们"，第三屏的圆角和按钮已经完全不是同一个产品了。这种现象有个名字，叫设计漂移（design drift）。

漂移的根源是 oneshot 模式只给了 AI 一张"成品照片"，没有给它"为什么这样画"的规则。下一次生成时，AI 只能凭概率猜，自然就跑偏。design.md 的真正价值不是让你的首屏更惊艳，而是让你的第十屏、第一百屏依然是同一个产品。 它解决的是一致性，不是单点爆发。

一致性听起来不性感，但它才是把"AI 玩具"变成"AI 产品"的分水岭。任何一个用户愿意付费的产品，背后一定是一整套连贯的设计语言，而不是十个互相不认识的页面拼在一起。

完整工作流：从参考到出片

Meng 把整套流程拆成六步，我按可执行的顺序重排了一下：

第一步：找参考（Reference）。所有设计师入门都是从抄开始的，AI 时代也一样。区别是你不再下载 Figma 文件、不再 copy 鼠标移上去的动效——你直接去 design.md 社区淘"灵魂"。Aura、Variant、Framer Community 都有大量免费的 design.md 可下载，点一下 remix，换一套配色，再 remix，直到你眼前一亮。

第二步：装弹（Generate）。把选好的 design.md 和对应的 HTML 一起当作 attachment 丢给 agent。HTML 是"成品参考"，design.md 是"风格说明书"，两份一起给，AI 的命中率会高一个数量级。

第三步：检视（Inspect）。第一版出来后不要急着夸，逐屏看：哪里偏了？字距宽了？间距塌了？hover 动画是不是消失了？把偏差挑出来，准备进入下一步。

第四步：系统化（Systemize）。把那些"你希望永远这样、永远不变"的规则，固化进你的 design.md。比如"所有 CTA 按钮 hover 时必须有 0.3s 的发光过渡"。这一步是把你从"求 AI 别忘了"变成"AI 默认就会做"。

第五步：迭代（Iterate）。这一步是大多数人没意识到的真相——Meng 自己做一个产品，平均要跑 1000 次以上的 prompt，有的产品超过 10000 次。你看到的那些"jaw-dropping"的网站，不是一键生成的，是迭代一万次堆出来的。 后面会专门展开这个话题。

第六步：混音（Remix）。当你对一套设计已经满意了，把它扩展到其他形态——同一份 design.md 可以同时生成落地页、移动端、Slide 演示稿、Promo 视频、Instagram 切片。Meng 自己有个工具叫 New Form，就是干这件事：你做了一张设计，一键 fan-out 出 6 个不同形态，并行往前推。

这里特别要区分两个动作：迭代 vs 混音。迭代是在同一个形态里小步优化，混音是跨形态扩展。Meng 估算自己 90% 的时间花在迭代，10% 在混音。换句话说，先把一个形态做穿，再考虑扩展，这是反"all-in-one 一键搞定"诱惑的硬纪律。很多人栽在第二步就跳第六步——首屏还没站稳就急着同步出 mobile、出 slide、出短视频，结果是每个形态都半成品。正确顺序是先把 web 落地页打磨到自己满意，然后再用同一份 design.md 一键 fan-out。

工具盘点：每个工具的独有场景

市面上能配合 design.md 的工具已经一大把，没必要全用，挑你最常工作的形态对应那个就行。

Aura：Meng 自家的 design.md 社区 + 生成器。优点是社区里 design.md 文件最多，免费下载，remix 操作丝滑。适合做 web 落地页。

New Form：Meng 最新的产品，定位是"创意 fan-out"。同一套 design.md，一键生成 6 种形态：mobile、slide、motion、hero、social card。它的核心是"队列创作（queue）"——你不是一次做一个，是同时做 6 个，回来挑最好的。适合产品已有基础视觉、需要批量输出营销物料的阶段。

Google Stitch：Google 官方出品，免费，3.1 版已经原生支持 design.md attach。最大的优势是无限画布，可以一次性把所有页面铺开看一致性。适合做完整产品而不是单页。

Variant：纯粹的 remix 工具，做灵感发散用。当你卡在"找不到喜欢的风格"时，去 Variant 一直 remix 直到撞见对的。

我的建议是：主力用一个，剩下三个偶尔串场。比如你的工作流可以是"Variant 找灵感 → Aura 下 design.md → Cursor/Codex 落地 → New Form 批量出营销物料"。一条链路打通比工具多更重要。

Skills 才是真正的护城河

design.md 解决的是一致性，但一致性本身不让你赢——因为别人也能用一致的设计系统。真正让你的产品从"好看"跨到"有记忆点"的，是 Skills。

Skill 是 design.md 之外的独立小食材，每个 skill 对应一种"特效"。Meng 自己沉淀了 60 多个 skill，比如：Lasers（激光特效）、3D Globe（旋转地球）、Skeuomorphic Button（拟物按钮）、Copywriting（文案优化）。每个 skill 就是一段 prompt，你把它 copy 进对话框，AI 就能在你的产品里加上这个特效。

Meng 有个比喻我特别喜欢：

用户走进电影院是为了看特效，用户打开你的落地页也一样。字体配色已经是 baseline 了，特效才是 wow。

听起来俗，但你回想一下你最近一次"走不动路"的网站，是不是都有一个让你愣两秒的特效？滚动视差、激光轨迹、3D 旋转、粒子拖尾——这些不是 design.md 能涵盖的，因为它们是"调味料"而不是"骨架"。

学 Skills 还有个副产品：你会顺带学到一堆设计黑话——font-smoothing、secondary button、body font、letter-spacing。这些词的好处不是炫技，而是让你跟 AI 沟通的"分辨率"变高。当你能说"把 secondary button 的 letter-spacing 调到 0.02em"，AI 就能精确响应；当你只能说"那个按钮看着不对劲再调调"，AI 只能瞎猜。设计黑话是你跟 AI 之间的高带宽通信协议。

我建议每个独立开发者都给自己存一个 skill 库——可以是 Notion 数据库，也可以是本地一个 skills/ 文件夹。每次刷到一个让你想"我也要"的特效，立刻去研究它的 prompt 怎么写，存下来。半年后你的 skill 库就是你这个产品最难被复制的部分。别人能抄你的配色，能抄你的字体，但抄不走你为某个特效写过的 47 版 prompt。

一千次 prompt 的真相

我猜你看到 Meng 那句"我一个产品平均迭代 1000 到 10000 次 prompt"时，跟我第一次听到一样吃惊。但这是这次访谈里最反主流的一句话，也是最值得记住的一句。

主流叙事是：AI 让你变懒，三天上线一个 SaaS。Meng 的现实是：AI 没让他变懒，让他干得更多。他现在同时在跑四款产品（Aura、New Form、Dream Cut、新版 Design+Code），全部是他一个人在搭骨架，每周还要做 YouTube、做 Slide、做 Promo 视频。他原话是："我这辈子从来没干过这么多活。"

变化不在"工作量减少"，而在"决策密度提升"。过去你花 3 小时挪像素，AI 帮你做了；现在那 3 小时你要做 30 个判断："这个动效用 ease-out 还是 cubic-bezier？这段文案用第二人称还是第三人称？这个按钮放左还是放右？"

从移动像素，到每分钟做判断——这是 AI 时代设计师（以及独立开发者）的真实工作形态。所谓品味，本质就是这些微决策的命中率。

所以如果你跑了二十次 prompt 觉得自己产品还是不够好，先别怀疑工具，去看看 Meng 这种水平的人在跑第几次。一千次只是起点，不是终点。这条认知能省下你很多自我怀疑的时间。

AI 时代真正的护城河是品味

讲到这里，必须把这次访谈最尖锐的一句话摆出来：

看到紫色渐变就跑。

Meng 不是在讨厌紫色。他是说：当一个设计元素被滥用到任何 AI 工具的默认输出里，它的价值就瞬间打 1/10 甚至 1/100。十年前紫色渐变是 wow，今天是"AI 味"的代名词。

AI 时代的护城河，已经不在"我会做"，而在"我看得出什么是好的"。这个能力有个朴素的名字——taste（品味）。它不只属于设计师：咖啡师每天冲一百杯之后能尝出豆子的产地，资深码农一眼能看出一段代码的味道，做产品的人扫一眼落地页就能判断这家公司认不认真。taste 的来源不是天赋，是你被多少好东西包围过。

具体到落地，Meng 给了一个非常可执行的建议：

给自己建一个"设计灵感第二大脑"。

我们都给笔记、想法、会议建过第二大脑，但很少有人给"视觉灵感"建过。从今天起，每次刷到让你愣两秒的网站、APP、海报、动效，截图、存 link、存 design.md、存 skill。半年后回头看，你的品味曲线会陡到自己都吓一跳。

另一个反直觉的点：不要再跟大公司比通用能力，只比 niche。大厂有几百号设计师、上亿预算，你比不过；但你可以在一个极窄的方向里做到比所有人都"懂"——比如"做给独立开发者用的看板工具"、"做给厨师用的菜谱管理"、"做给独立音乐人用的版权登记"。在你那个 niche 里，你的 taste 比通用 AI 的 taste 高一个数量级，这就是护城河。