Atomic Design
BRAD FROST · 免费在线
组件层级与复用范围。先找 20 个覆盖 80% 界面的核心件。
全书读 →
你已经读完《About Face 4》，行为层有底了。现在缺的是资产层：怎么把行为原则收成组件、词表、规范。下面的书只为这三件事服务，读完就能用。
按顺序读。这 5 本读完，你就有能力把 501 条元素 / 53 块界面 / 4 个页面重组成一套能维护的体系。
把元素收成“原子 → 分子 → 组织 → 模板 → 页面”的层级。
从“有组件”到“有原则、有模式、有共享语言”。
分类、命名、导航；对“文档库很乱”特别有效。
组织、标签、导航、搜索“四件套”，当参考书。
深色、数据密集界面的层级、间距、颜色、对比。
点击卡片右下角的方框可以标记“已读”，进度会存在本地浏览器里。
目标：把 501 条元素收成 40–60 个组件，定出 20 个核心组件，并建立“组件怎么算做好”的标准。
目标：四页的导航模型、状态词表、筛选与搜索分面；把“318 份文档 / 501 条元素”分对、命名对。
目标：规范目录、语义色、数字格式、图表规则、文案语气；让规范能评审、能执行。
不要同时开三条线。你们现在最缺的不是更多想法，是把已有的收成一套。
Atomic Design + Interface Inventory 文章。把 501 条元素按角色重分、截图去重。
Design Systems 1–6 章 + Refactoring UI + W3C tokens。写原则、命名、tokens 三层、颜色语义、动效预算。
How to Make Sense + Dan Brown 八原则 + IA 书 3–7 章。画四页信息架构、状态词典、导航与标签。
卡排序 + 树测试 + Design System Checklist。找 5 人测试，按清单补文档。
不是它们不好，是现在读会拖慢你。
读完不练，等于没读。每个练习都能在现有材料上直接做。
按“承担什么角色”重分 501 条，不按页面分；合并同义项（“收入已验证”目前有 5 种形态，先定 1 种）；每个核心组件写 5 行：用途 / 变体 / 状态 / 禁止用法 / 对应 token。
把拍卖、验证、放款、押金四套状态写成一张表：用户词 / 系统词 / 颜色 / 可用动作 / 下一步。先统一词，再统一视觉。
按顺序写：原则 → Token → 组件 → 模式（验证链/出价/放款/空态）→ 内容（术语/数字格式/语气）→ 治理。不要先写视觉。