暗无天日

=============>DarkSun的个人博客

TIL:Google Stitch 的 DESIGN.md,给 AI 读的设计系统说明书

是什么

DESIGN.md 是 Google Stitch 团队开源的设计系统协议。本质上是给 AI 看的设计规范,不是给人看的。它把 Figma 里的视觉语言、Tailwind 里的样式参数、设计师的审美判断,全部翻译成 AI 能直接执行的结构化 Markdown 文件。

为什么需要

传统设计流程有三个缺陷。一是 Figma 格式专有,AI 读不了。二是每次生成新页面都是独立处理,不会沿用之前的风格决策。三是对着 AI 说"按钮稍微圆一点"它不知道是 4px 还是 12px。DESIGN.md 把模糊的人类描述转成精确的技术参数,所有页面共用同一个规范文件。

怎么用

安装 design-md 技能( npx skills add google-labs-code/stitch-skills --skill design-md ),把生成的 DESIGN.md 放项目根目录,然后在 AI 指令中引用"根据 DESIGN.md 的规范生成"。迭代时修改 DESIGN.md 这个源头,所有后续生成自动遵循新规则。Google 还提供了 lint / diff / export 等命令行工具辅助管理。

AI 控制 UI 输出分三个层级:初级直接写提示词,中级加示例图片,高级用 DESIGN.md 提供结构化上下文。区别在于提示词是临时的、输出不稳定,DESIGN.md 是持久化的、跨项目可复用。

AI : 设计系统 : DESIGN.md : Stitch : 谷歌