Google DESIGN.md 实践：把设计系统写成 AI 能读的 Markdown

Sun, 19 Apr 2026 00:00:00 +0000

TL;DR

用 AI Coding 做产品时最大的问题不是「AI 不会用组件」，而是「AI 不知道什么时候不该用」。

Google 的 DESIGN.md 给出了一个轻量方案：把设计系统写成 Markdown 放进代码仓库，让 AI 每次 Coding 都能读到设计约束。

篇首语

最近这段时间，我一直在用 Claude Code 做一个数据分析系统。

最开始启动的时候，整体的体验还是非常不错的。我只需要写好需求描述文档，准备好各种 API，Claude 很快就能交付一个质量相当不错的结果。

指定好 React + Tailwind + Shadcn 的技术栈，再配合上 Shadcn 提供的 Skill，Claude 在 Coding 上的确非常顶。整个过程中最大的瓶颈其实是自己，写需求的速度赶不上 AI 写代码的速度，最后还是搞得自己非常累 😅

不过这也算不上是问题，真正的问题其实发生在一段时间之后。随着功能不断推进，界面设计的质量开始有些不太可控了。组件错用，样式不统一，交互流程前后不一致，这些问题开始频繁冒出来。

我用的已经是 Shadcn 了，组件库的文档也给了 AI，为什么还是管不住？

DESIGN.md 是什么？

DESIGN.md 是 Google 提出的一种设计系统文档约定：把产品的视觉风格、组件规则、交互约束用 Markdown 写入代码仓库，供 AI 编码助手（如 Claude Code、Cursor、Codex）在每次 Coding 前读取。它相当于写给 AI 的「设计决策指南」，解决传统组件库文档只回答「怎么用」、不回答「什么时候用、什么时候不该用」的问题。

简单说，DESIGN.md 把设计约束变成了 AI 的上下文。配合 CLAUDE.md 等启动加载规则，AI 每次生成界面前都会先读一遍这份设计规范，按其中的 Do’s and Don’ts 来生成代码，这是设计系统在 AI Agent 时代的一个轻量落地方案。

DESIGN.md on Hi, I'm 5key

Google DESIGN.md 实践：把设计系统写成 AI 能读的 Markdown

篇首语

DESIGN.md 是什么？