Reference source:Brad Frost - Atomic Design
Applicable scenarios
- Building a design system from scratch
- Component library design
- Component decomposition for complex interfaces
- Improving design and code reusability
Core idea
Divide the interface into five levels from small to large, ensuring components are reusable and composable:
原子（Atoms）
↓ 组合
分子（Molecules）
↓ 组合
有机体（Organisms）
↓ 布局
模板（Templates）
↓ 填数据
页面（Pages）
Five-level definitions
1. Atoms
The smallest indivisible UI units
- 按钮（Button）
- 输入框（Input）
- 标签（Label）
- 图标（Icon）
- 徽章（Badge）
- 分割线（Divider）
- 颜色 / 字体 / 间距（Tokens）
2. Molecules
Simple combinations of atoms with independent functionality
- 搜索框 = 输入框 + 搜索按钮
- 表单字段 = 标签 + 输入框 + 错误提示
- 卡片头部 = 头像 + 名称 + 时间
- 面包屑 = 链接 + 分隔符
3. Organisms
Combinations of molecules that form page sections
- 导航栏 = Logo + 菜单 + 用户头像
- 数据表格 = 表头 + 行 + 分页 + 操作栏
- 表单 = 多个表单字段 + 提交按钮
- 商品列表 = 多个商品卡片
4. Templates
Layout frameworks for organisms, without real data
- 列表页模板 = 顶部筛选 + 表格 + 分页
- 详情页模板 = 侧边栏 + 主内容区 + 操作栏
- 表单页模板 = 标题 + 字段组 + 提交区
5. Pages
Templates + real data = final pages
- 用户列表页 = 列表模板 + 真实用户数据
- 商品详情页 = 详情模板 + 真实商品数据
Component inventory output format
## 组件清单（Atomic Design）
### Atoms（原子）
| 名称 | 用途 | 变体 |
|------|------|------|
| Button | 触发动作 | primary / secondary / danger / text |
| Input | 文本输入 | default / disabled / error |
| Icon | 图标 | 24+ 图标 |
| Badge | 状态标签 | success / warning / danger / info |
### Molecules（分子）
| 名称 | 组成 | 用途 |
|------|------|------|
| SearchBox | Input + Button(Icon) | 搜索 |
| FormField | Label + Input + ErrorText | 表单字段 |
| CardHeader | Avatar + Title + Subtitle | 卡片头 |
### Organisms（有机体）
| 名称 | 组成 | 用途 |
|------|------|------|
| NavBar | Logo + Menu + UserAvatar | 顶部导航 |
| DataTable | TableHeader + Rows + Pagination | 数据表格 |
| LoginForm | 多个 FormField + Button | 登录表单 |
### Templates（模板）
| 名称 | 布局 | 用途 |
|------|------|------|
| ListPageTemplate | NavBar + Filter + DataTable + Pagination | 列表页 |
| DetailPageTemplate | NavBar + Sidebar + Content + Actions | 详情页 |
### Pages（页面）
| 名称 | 模板 | 数据 |
|------|------|------|
| UserListPage | ListPageTemplate | 用户数据 |
| ProductDetailPage | DetailPageTemplate | 商品数据 |
Workflow
1. 列出所有页面（来自 page-structure）
2. 拆解每个页面到 Templates
3. 拆解 Templates 到 Organisms
4. 拆解 Organisms 到 Molecules
5. 拆解 Molecules 到 Atoms
6. 识别可复用部分（在多个页面出现的）
7. 输出组件清单
8. 转交前端实现组件库
Usage rules
- 设计时从原子开始，向上组合
- 每个组件单独管理（独立文件）
- 组件清单按层级标注（Atom/Molecule/Organism）
- 前端交接时说明哪些组件可以复用现有库，哪些需要新建
- 不要跨层级直接引用（页面不直接用原子）
Quality self-check
□ 是否每个组件都标注了层级
□ 是否识别了可复用组件
□ Atoms 是否真的不可再分
□ Molecules 是否有独立功能
□ Organisms 是否构成完整区块
□ Templates 是否无真实数据
Common pitfalls
- Confused levels——treating an Organism as a Molecule
- Over-decomposition——splitting every pixel into an Atom
- Under-decomposition——treating the entire page as one Organism
- Failure to identify reuse——multiple pages use the same Organism but are designed separately
- Direct cross-level reference——a page directly calls an Atom, skipping the Template
Companion templates
templates/component-inventory-template.md— Component inventory template
Collaboration with other skills
上游：
page-structure → 提供页面拆分输入
平行：
design-tokens → Atoms 的颜色/字体/间距
component-states → 每个组件的状态
下游：
design-handoff → 组件清单交给前端