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

当你用 AI 生成一个产品页面时，是否有过这样的体验：第一屏惊艳无比，但第二屏、第三屏开始出现微妙的「走形」——字体变了、圆角不对了、按钮风格也跑了。这种现象在 AI 设计领域有个专门的名字，叫做「设计漂移」（design drift）。它产生的根源在于，传统的 oneshot 模式只给了 AI 一张「成品照片」，却没有告诉它「为什么要这样画」的底层规则。

三层心智模型：重新理解设计的构成

Google 上个月开源的 design.md 正是为了解决这个痛点。它不是模板，不是 UI 库，而是一份给 AI Agent 看的「设计灵魂说明书」。通过结构化的 Markdown 标签，你可以把字体、配色、间距、动效、组件规范全部写进一份文件，丢给 Cursor、Codex、Claude Code 等任何支持 attachment 的 agent，AI 就能沿着这套 DNA 持续生成风格一致的内容——不是只做第一屏，是整个产品。

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

这里有一个极为精妙的理解框架，值得每一位 AI 设计实践者记住：HTML 是做好的菜，design.md 是菜谱，而 skills 是食材。大多数人目前还停留在「抄菜」的阶段——看到一个漂亮的落地页，直接 copy HTML 丢给 AI 说「按这个做」。问题在于，AI 不知道你想要哪种风味、哪种火候，只能给你做出一个「像但不是」的东西。给它菜谱，它才知道为什么这道菜要这样做；给它食材清单，它才能在另一道菜里复现同样的味道。design.md 最大的价值在于跨平台可迁移性。无论你今天用 Lovable 还是 v0，明天换到 Cursor 还是 Codex，这份文件都可以无缝带走。它本质上把你的「设计记忆」从某个 SaaS 工具里解放出来，存进你自己的 git 仓库。

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

整个工作流可以拆解为六个步骤：第一步找参考，去 Aura、Variant、Framer Community 等社区淘「灵魂」；第二步装弹，把选好的 design.md 和对应 HTML 一起当作附件丢给 agent；第三步检视，逐屏检查偏差；第四步系统化，把「永远不变」的规则固化进 design.md；第五步迭代，平均需要 1000 次以上 prompt；第六步混音，把满意的设计扩展到 mobile、slide、social card 等多种形态。值得注意的是，90% 的时间应该花在迭代上，只有 10% 在混音——先把一个形态做穿，再考虑扩展。

Skills 才是真正的护城河

市面上能配合 design.md 的工具已经相当成熟：Aura 适合做 web 落地页，社区里 design.md 文件最多且免费；New Form 定位「创意 fan-out」，同一套 design.md 一键生成 6 种形态；Google Stitch 官方出品，免费且支持无限画布，适合做完整产品；Variant 则适合做灵感发散。我的建议是主力用一个，剩下作为补充。比如「Variant 找灵感 → Aura 下 design.md → Cursor 落地 → New Form 批量出营销物料」。

如有侵权，请联系删除。