atomic-design-fundamentals

用途

Atomic Design Fundamentals 用于把基于组件的用户界面按原子设计方法论进行组织，目标是构建可扩展、易维护的组件化 UI。该技能适用于搭建新的设计系统、整理已有组件库、向团队成员介绍原子设计、审计组件结构、规划组件架构、编写设计系统文档，以及将庞大的单体组件重构为可组合的层级。

主要能力

该方法论把界面划分为六个阶段：

夸克（Quarks）：亚原子级的设计令牌与原始值，例如颜色令牌（primary-500、neutral-100）、间距尺度（4px、8px、16px）、排版令牌（字号、字重、行高）、边框圆角、阴影定义、动画时长与缓动函数、断点。夸克本身不是 UI 组件，而是定义设计语言的原始值。
原子（Atoms）：最小的功能性 UI 单元，例如按钮、输入框、标签、图标、排版元素、色板、头像。原子通过夸克来设置样式，自身独立、无业务逻辑、高度可复用。
分子（Molecules）：多个原子组合在一起作为一个单元工作，例如搜索表单（输入框 + 按钮）、表单字段（标签 + 输入框 + 错误信息）、媒体对象（头像 + 文本）、卡片头部、导航链接。分子只由原子组成，职责单一。
有机体（Organisms）：复杂、独立的界面区块，例如页头（logo + 导航 + 用户菜单）、页脚、商品卡片、评论区、侧边栏导航。有机体由分子和原子组成，可能包含业务逻辑。
模板（Templates）：页面级布局，定义内容结构但不含真实内容，使用占位内容，例如博客文章模板、仪表盘布局、商品页布局。
页面（Pages）：填入真实代表内容的模板实例，代表实际用户体验，用于测试和验证。

组合规则

严格层级关系为：夸克可被原子、分子、有机体、模板、页面使用；原子可被分子、有机体、模板、页面使用；分子可被有机体、模板、页面使用；有机体可被模板、页面使用；模板可被页面使用；页面不被其他组件使用。

反模式包括：原子从分子导入、分子从有机体导入、无理由地跨层引用。

使用方式（目录结构与命名）

标准结构按 src/quarks 与 src/components 下的 atoms、molecules、organisms、templates、pages 分目录；也给出扁平结构和基于特性的混合结构。组件文件使用 PascalCase（如 Button.tsx、SearchForm.tsx、ProductCard.tsx），测试文件为 Button.test.tsx 或 Button.spec.tsx，Storybook 故事文件为 Button.stories.tsx，并使用 index.ts 桶导出以便简洁导入。

最佳实践

从原子开始自下而上构建；属性向下传递（原子接收原始属性，分子通过展开接收原子属性，有机体接收领域相关属性）；避免在原子中放置业务逻辑，业务逻辑放在有机体或更高层级；为组件编写用途文档，标注层级与组合关系。

常见陷阱

过度原子化（拆分过细）；原子化不足（单个组件承载过多）；循环依赖（原子从分子导入）；命名不一致。

设计令牌集成

令牌以 colors、spacing、typography 等形式定义，例如颜色包含 primary 与 neutral 色阶，间距包含 xs 到 xl，排版包含字体族与字号。原子通过导入这些令牌设置样式。

技能介绍

用途