产品经理从0到1搭建Design System：一份完整的体系化清单

一个产品经理不用成为设计师，但如果你正在负责产品或打算借助AI把Design System搭起来，这篇文章就是你的完整盘点——7大模块、约60项子内容、6~12个Figma文件、350~760个代码文件、60~80个文档页面。附带工作量和时间估算。

看完这篇文章你会知道

这篇文章不会讲 Figma 怎么操作、React 怎么写——那些是设计师和前端的事。但你会搞清楚三件事：

• 一个完整的 Design System 到底包含哪些东西？（不是一个色板+几个按钮就完了）
• 从 0 到 1 要建多少文件、定义多少内容？（具体数字，不是"很多"）
• AI 能在哪些环节帮你省时间，省多少？（不是泛泛说"提质增效"）

开始之前：不要从零造轮子

这是文章里最重要的一句话——对没有 UI 能力的 PM 来说，从空白画布开始搭 Design System 是最坏的选择。

业界成熟的 Design System 没有一个是真正从零搭的。Atlassian 底层用了 Pragmatic Drag and Drop、Popper 等现成库。Google 的 Material Design 3 开源了完整的 token 体系和组件代码。社区里还有大量高质量起点：

• ShadCN/ui：基于 Radix 的组件库，可以直接复制源码改造，Token 可完全自定义
• Ant Design：国内最成熟的企业级 Design System，主题定制体系完善
• Material UI / Mantine / Chakra：各有用武之地的 React 组件库

你的策略应该是：拿一套现成的 → 用 AI 定制它的 Token → 只改和你的品牌/产品有关的部分。这样 Phase 2 的 Token 工作量从 2-4 周压缩到 3-5 天，Phase 3 的组件工作量直接砍半——因为你只需要改，不需要建。

这篇文章后续列的「从 0 到 1」清单，本质上是告诉你完整体系里有什么——但实际执行时，你大部分时候是在改而不是在建。记住这个区别。

全景一览：一张表看到底

一个「完整可交付」的 Design System 是 Figma Library + npm 包 + 文档站点 三位一体。缺任何一环，都只是半成品。

模块一：Foundations / 设计基石

这是最底层的东西——所有组件都从这层取值。Design System 质量的上限，在定义 Foundation 的那一刻就已经决定了。

核心是三阶 Token 架构，业界（Material Design 3、W3C Design Tokens Community Group、Atlassian）已经在趋同。2025 年 10 月，DTCG 发布了 Design Token 格式规范的第一个稳定版（2025.10），Style Dictionary v4 已原生支持——这标志着 Token 交换有了跨工具、跨平台的统一标准：

• Primitive Token（原始值）：color-blue-500: #0835fb，纯粹的值，不承载语义，永远不直接用在组件上
• Semantic Token（语义层）：color-primary: color-blue-500，给值赋予"用途"，适配 Light/Dark 模式切换
• Component Token（组件层）：button-primary-bg: color-primary，精确控制每个组件的视觉属性

这里补充一个关键来源：这套分层逻辑最早来自 Brad Frost 的 Atomic Design（2013）。他把 UI 拆成 Atoms → Molecules → Organisms → Templates → Pages 五层，Token Architecture 就是 Atomic Design 在「数值层面」的落地。如果你要深入理解为什么 Design System 长这样，Brad Frost 的《Atomic Design》在线书是必读。

这个模块包含 12 个子内容项：

• 设计原则（3–8 条可执行原则）—— 这是 PM 的活，不是设计师的
• 色彩 Token（150–400 个变量，覆盖 Primitives + Semantic + Component 三层 × Light/Dark/High Contrast 三种模式。注意：这是中小团队从 0 搭的合理范围；USWDS 做了极端精简仅 7 个 measure token，而企业级系统如 Atlassian 可能远超这个数）
• 字体 Token（30–60 个：字号阶梯、字重、行高、段落间距）
• 间距阶梯（10–20 个：基于 4px/8px 网格）
• 圆角阶梯（5–8 个：none/sm/md/lg/full）
• 边框变量（5–10 个：宽度 + 样式）
• 阴影层级（5–15 个：0–5 级 elevation）
• 透明度阶梯（5–10 个）
• 响应式断点（4–8 个：mobile/tablet/desktop/wide）
• 栅格系统（3–6 个：列数、间距、边距）
• 动效 Token（10–20 个：时长、缓动曲线）
• 主题模式（Light / Dark / High Contrast）

设计原则 = 产品原则，PM 必须主导

很多人以为「设计原则」是设计师的事。恰恰相反——设计原则是产品决策的外化。几条典型的设计原则，每条背后都是一个产品决策：

• 「信息密度优先」vs「简洁优先」 → 这是产品定位：你是做给专业用户的生产力工具，还是给大众用户的消费品？
• 「可访问性 AA 级合规」vs「基础可用就行」 → 这是合规决策 + 用户群决策。2025 年 6 月生效的《欧洲无障碍法案》（EAA）要求所有面向欧盟用户的数字产品达到 WCAG 2.1 AA 标准——如果你的产品面向欧洲市场，这不是选择题而是法律要求。
• 「先保证功能完整性，再追求美观」 → 这是工程资源分配决策，直接影响迭代节奏。
• 「移动端优先」vs「桌面端优先」 → 这是用户场景决策，影响整个响应式断点的定义。

PM 应该主导这 3-8 条原则的定义，它们是 Design System 的「产品需求文档」。设计师和工程师根据这些原则做具体选择，而不是反过来。

关键执行点：Token 命名必须和代码里的 CSS 变量名一一对应。Muzli 2026 文章的核心论断——Figma 里的 layer name 要和代码里的 component name 一致，否则就是两张皮，Design System 一定失败。

PM 实战：怎么把 PRD 翻译成 Design Token

这是全篇最重要的「桥」——PM 不会 Figma，但 PM 会写需求。那怎么从 PRD 走到 Design Token？

Step 1：从 PRD 里提取「视觉关键词」

假设你在写一个 SaaS 后台的 PRD，里面有一句：「整体风格专业简洁，暖色为主，不要太冷冰冰的企业软件感觉。」

提取关键词：专业 简洁 暖色 非企业软件

Step 2：喂给 AI，让它生成 Token JSON

给 Claude 或 ChatGPT 这样的 prompt：

我要为一款 SaaS 后台产品搭建 Design System。
视觉关键词：专业、简洁、暖色、避免传统的冷蓝灰企业软件风格。
品牌主色是 #c96442（陶土色/暖珊瑚色）。

请生成一个三阶 Token 体系（Primitive → Semantic → Component），
以 JSON 格式输出，覆盖：
- 色彩（主色/辅色/中性色/状态色/文字色/背景色/边框色，含 Light 和 Dark 模式）
- 字体（字号阶梯 H1-H6 + body + caption，字重，行高）
- 间距（基于 4px 网格）
- 圆角
- 阴影

所有 Token 使用命名规范：<类别>/<用途>/<变体>，例如 color/bg/primary。
输出可直接作为 CSS 变量的 JSON 文件使用。

AI 会在 30 秒内给你一份 100-300 行的 JSON。

Step 3：PM 审核清单——不会设计但会审

拿到 AI 生成的 Token 后，不需要设计能力，检查三件事：

• 对比度检查：把主色 + 白色背景放进 WebAIM Contrast Checker，看是否通过 WCAG AA（至少 4.5:1）。不通过就让 AI 重调。
• 命名有意义吗：color-primary 比 color-blue-500 好。Token 名字应该描述「做什么用」而不是「是什么值」。让 AI 解释每个命名的含义，你判断是否直观。
• 覆盖了你的场景吗：你的产品有成功/失败/警告三种 Toast 吗？那 Token 里有没有 color-status-success、color-status-error、color-status-warning？对着 PRD 里的功能清单过一遍。

模块二：Core Components / 核心组件

Design System 的"血肉"。每建一个组件必须覆盖 至少 7 个交互状态：Default / Hover / Active / Focus / Disabled / Loading / Error。

表单与输入类（约 12 个组件）

Button（含 primary/secondary/ghost/danger 变体 + sm/md/lg 尺寸）、Input / TextField、Textarea、Select / Dropdown、Checkbox、Radio、Toggle / Switch、DatePicker、ColorPicker、Form / FormGroup、Search、Slider / Range

展示与反馈类（约 16 个组件）

Avatar、Badge、Tag / Chip、Icon（整库 200–500 个图标）、Label、Link、Divider、Spinner / Loader、Progress Bar、Skeleton、Tooltip、Toast / Snackbar、Alert / Banner、Modal / Dialog、Drawer、Popover / Popup

导航与数据展示类（约 13 个组件）

Tab / TabBar、Breadcrumb、Pagination、Menu / DropdownMenu、Stepper / Steps、Sidebar / Navigation、Card、Table（排序/筛选/分页/行选择）、List / ListItem、Tree、Empty State、Comment、Code Block

状态与通知类（约 4 个组件）

Notification / 通知中心、Timeline / 时间线、Progress Indicator、Spotlight / 引导

合计：核心组件约 40–50 个，每个 1–3 个代码文件（组件 + 样式 + Story），代码侧约 80–150 个文件。

参考数据点：Atlassian Design System 公开约 60+ 组件。Supernova 统计显示按钮独占 Design System 组件使用量的 23.6%，前十组件加起来才覆盖 53%。

模块三：Patterns / 组合模式

多个核心组件拼接成的业务场景块（Organisms + Templates）。这部分是多数 Design System「从能用变成好用」的分水岭。

包含约 12 种常见模式：Page Header（标题+面包屑+操作栏）、Filter Bar（多条件筛选面板）、Data Table 完整版（表格+工具栏+分页+批量操作）、Form Layout（分栏/分组/校验汇总）、Card Grid、Detail Panel（侧边详情）、Wizard / Multi-step、Dashboard Widget、Comment / Timeline、File Uploader（拖拽上传）、Login / Register 页面模板、404 / 500 Error 页面模板。

代码侧约 20–40 个文件。这些模式如果不在 Design System 里统一，每个产品线会自己发明一套，看起来都"差不多但就是不一样"。

模块四：Icons & Assets / 图标与资产

独立 Figma 文件 + npm 图标包。通常包含：

• Icon Library：200–500+ 个图标，覆盖 16/20/24/32px 多尺寸
• Illustration Style：插画风格指南 + 常用场景插画（空状态、错误、成功、向导）
• Logo Variants：Logo 规范（横版/竖版/图标版/黑白/反白）
• Brand Assets：品牌色、品牌字体、品牌图形元素

这部分如果手动做耗时最长也最枯燥。AI 可以直接生成统一风格的图标集和插画，这是 ROI 最高的 AI 赋能场景之一。

模块五：Content Guidelines / 文案规范

纯文档层面，不占 Figma 文件，但产品经理最应该关注——因为文案乱是产品经理的锅。

• Voice & Tone：品牌语气基调（正式/活泼/专业），定义了你在产品里"怎么说话"
• UI Text Rules：按钮文案、错误提示、空状态、确认语等场景的写作规范
• Accessibility Labels：ARIA label 规范，确保读屏器用户能理解你的界面
• Multi-language：国际化字符串 token 管理

模块六：Documentation / 文档站点

Design System 的「产品界面」。zeroheight 2026 报告里，文档是连续多年排名第一的痛点，也是 AI 最被看好的应用方向。

每个组件文档页至少包含：名称与描述、Anatomy 拆解图（标注每个子区域）、完整 Props 表格、可复制代码示例、引用的 Design Token 名称（不是写死 hex 值）、Do / Don't 对比、可访问性要求、关联组件链接。

文档站点本身约 30–60 个 MDX 页面。好消息是：AI 能从组件代码自动提取 Props 表、生成 Anatomy 图、写 Do/Don't 示例——这几乎是当前 Design System 领域 AI 最成熟的应用场景。

文档工具推荐：Storybook 是 Design System 领域的事实标准（Atlassian 有专门的 Storybook addon，Carbon、Polaris 等主流 Design System 都用它做组件文档）。团队小的话直接 Storybook，不需要自建文档站点。

模块七：Governance / 治理运维

让 Design System 活下来的不是组件本身，是这套持续运转的机制。纯流程文档，不占 Figma / 代码文件。

包含：版本策略与发布节奏、组件新增/修改评审流程、废弃策略与迁移指南、Issue Triage 流程、Adoption Metrics（使用率、覆盖率追踪）、Figma ↔ Code 同步管道（Token 自动导出 → CI/CD 发布）、团队分工与 Ownership。

工作量估算：一个人 + AI 能做多少？

以下是基于「1 个 PM + AI 辅助」的场景估算。zeroheight 2026 报告显示：61% 的 Design System 团队觉得自己人手不够，28% 的团队只有 1–2 人。你不是一个人在"人不够"。

核心结论：AI 不是帮你"省掉所有活"，而是把重复劳动（写 CSS、写文档、做一致性检查）的时间砍掉一半以上。人的时间应该花在「定义设计原则」「判断组件行为」「做设计决策」这些真正需要判断力的事情上。

2026 年的一个新趋势是 "vibe coding"——设计师和 PM 直接用 AI 工具（Cursor、Claude Code、v0）描述想要的效果，AI 生成代码，人不用写一行 CSS 也能做出可用的界面。zeroheight 2026 报告里这叫 "vibe coding"，Supernova 2026 趋势报告则称之为 "Agentic AI"——AI 不再是单次问答工具，而是能跨 Figma → GitHub → Storybook 自主完成多步骤任务的智能体。

如果你从现成库（ShadCN/Ant Design）起步而不是从零搭，Phase 2+3 的总时间可以再压到 3-5 周。

AI 在每个环节具体能做什么（带实操 Prompt）

下面是 PM 可以直接用的操作指南，不需要设计能力。

1. Token 生成：从品牌色到完整 Token JSON

工具：Claude / ChatGPT / Cursor

Prompt 模板：

我有一组品牌色，请生成三阶 Design Token JSON。
品牌主色：#c96442
辅助色：待你建议（偏暖、专业的配色）
中性色：需要 10 级灰阶（#000 → #FFF）

要求：
1. Primitive 层：原始色值（如 blue-50 到 blue-950）
2. Semantic 层：语义映射（color/bg/primary, color/text/muted 等）
3. 覆盖 Light 和 Dark 模式
4. 命名规范：<类别>/<子类别>/<变体>（如 color/bg/primary-hover）
5. 所有颜色需通过 WCAG AA 对比度检查

输出 JSON 格式，可直接作为 CSS 变量文件导入。

AI 会在 30 秒内输出完整 JSON。你打开 WebAIM Contrast Checker，抽查 3-5 个关键配色（主色+白底、文字+背景），确认对比度 ≥ 4.5。

2. 组件代码生成：从 Token 到 React 组件

工具：v0（vercel.com/v0）/ Cursor / Claude

Prompt 模板：

基于以下 Token 体系，生成一个 Button 组件：

Token：
- color/bg/primary: #c96442
- color/bg/primary-hover: #d97757
- color/text/on-primary: #ffffff
- radius/md: 8px
- spacing/sm: 8px
- spacing/md: 16px

组件要求：
- React + TypeScript
- 变体：primary / secondary / ghost / danger
- 尺寸：sm / md / lg
- 状态：default / hover / active / focus / disabled / loading
- 支持 asChild（可渲染为  或 ）
- 使用 Tailwind CSS

读取这个 Button 组件的源码，生成组件文档页。

文档需包含：
1. 组件名称和一句话描述
2. Anatomy 结构说明（标注每个子区域）
3. Props 完整表格（参数名/类型/默认值/说明）
4. 每个变体的渲染示例代码
5. Do / Don't 使用建议
6. 可访问性说明（键盘操作/ARIA）
7. 关联组件链接

输出 MDX 或 Markdown 格式。

生成 20 个 UI 图标的 SVG 图标集
风格：线性图标，2px 描边，圆角端点，24×24px 画布
图标列表：home, search, user, settings, bell, mail, calendar, 
         upload, download, edit, delete, add, check, close, 
         arrow-left, arrow-right, menu, filter, share, lock
主色：#c96442