让AI做网页前,先写一份自己的设计说明

很多 AI 做出来的网页不是不能用，而是每次都像换了一个设计师。

Google Labs 这个 DESIGN.md 项目，想解决的就是这个问题。它把视觉身份写成一个给 coding agent 看的文件，用 YAML 写颜色、字体、间距、组件 token，再用 markdown 写设计原则和解释。仓库里还提供 lint、diff、export 这些方向。

感觉可以学学这个习惯。让 AI 做网页、做小程序页面、做海报前，别只说「好看一点」「高级一点」。把你的设计说明先写下来。

一份简版就够用

不需要一开始就做完整设计系统。你可以先写一份很短的 DESIGN.md，只有几块。

颜色用三到五个，主色、背景、正文、弱文字、危险提醒。字体写清楚中文优先用什么，字号层级怎么分。按钮写清圆角、边框、悬停和禁用状态。再补一段不要做什么，比如不要大面积渐变，不要把所有内容塞进卡片，不要用太细的灰字。

这份文件越具体，AI 越不容易临场发挥。尤其是你反复让 Codex、Claude Code、Gemini CLI 改同一个产品时，它能当成稳定的审美锚点。

它还不是稳定标准

需要提醒的是，Google 这个仓库现在标着 alpha。也就是说，它更像一个正在成形的规范，不是马上所有工具都会默认支持的行业标准。

但这不妨碍你今天就用简化版。就算 agent 不认识 DESIGN.md 这个名字，你也可以在任务里说，先读取这个文件，再改页面，并且所有新增 UI 都要符合里面的颜色、间距和组件规则。

适合哪些场景

我觉得最适合三类人。一个人做小产品，经常让 AI 改页面。公众号、课程、工具站这类轻量项目，需要长期保持同一套视觉。还有团队协作时，不想每次 PR 都在讨论颜色、圆角和按钮尺寸。

可以把你最常用的一套页面规则写进 DESIGN.md，哪怕只有 30 行。下次让 AI 改页面时，把它当约束条件，而不是靠一句「保持风格一致」碰运气。

如果这篇对你有用，请点赞、留言、转发。