技能使用指南

atomic-design-fundamentals（原子设计基础）Skill 是什么？

原子设计基础Skill 把 Atomic Design 六层结构（夸克、原子、分子、有机体、模板、页面）整理成 AI 可直接调用的架构规范，明确单向依赖、目录结构与命名约定，帮你理清混乱的组件库、杜绝循环依赖。本文含一键安装验证步骤、竞品对比、应用场景与常见问题，前端架构师与设计系统维护者可直接参考落地。

原子设计基础Skillatomic-design-fundamentals
8 个章节 约 16 分钟阅读 AI 智能生成

原子设计基础Skill：用「夸克→原子→分子→有机体→模板→页面」六层结构，把 UI 组件库理得清清楚楚

核心结论速览

  • 原子设计基础Skill（英文名 atomic-design-fundamentals，技能ID 14098）把 Brad Frost 的 Atomic Design 方法论（并额外扩展出「夸克」这一层）整理成 AI 可直接调用的知识资产，帮你在写代码之前先把组件架构想明白。
  • 它提供的是一套判断标准：六个层级分别是什么、谁可以引用谁、目录怎么放、文件怎么命名、哪些写法属于反模式，而不是帮你生成一堆组件代码。
  • 它特别强调严格的单向依赖：夸克 → 原子 → 分子 → 有机体 → 模板 → 页面，只能向下引用，杜绝「原子反过来导入分子」造成的循环依赖。
  • 该技能属于参考型技能（详情中标注为不可由用户直接调用），你在处理组件库组织、设计系统搭建、组件重构等任务时，AI 会依据它给出结构化建议。
  • 适合前端架构师、设计系统维护者、组件库负责人，以及任何想把「一团乱麻的 components 目录」变成可维护资产的人。

1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？

基础信息

项目 内容
中文名 原子设计基础Skill
英文名 atomic-design-fundamentals
技能ID 14098
技能类型 参考型/知识型技能（详情中标注为不可由用户直接调用）
可调用工具 Bash、Read、Write、Edit、Glob、Grep

它解决什么问题？

几乎所有中大型前端项目都会遇到同一批麻烦：components 目录越堆越深、Button 和 Btn 和 BaseButton 同时存在、某个「原子」组件里悄悄调用了业务接口、图标组件反过来 import 了表单组件形成循环依赖、设计稿改了主色要改 30 个文件。这些问题的根源通常不是技术能力不足，而是缺少一套公认的层级与依赖规则。

原子设计基础Skill 就是把规则讲清楚的那份「说明书」：它定义了从设计令牌（夸克）到最终页面实例的六个层级，明确了每一层的职责边界、允许的导入方向、目录结构模板和命名约定，并且把最常见的四种坑（过度原子化、不足原子化、循环依赖、命名不一致）单独列出来对照。

一键安装的思路与步骤

AI 技能的通用安装逻辑是「找到技能 → 加载到你的 AI 工作环境 → 验证生效」，具体命令与入口请以官方说明为准。通用流程如下：

  1. 确认前提：你使用的 AI 编程客户端/编辑器支持技能（Skill）机制，并已登录可用账号；技能的价格与授权方式以官方说明为准。
  2. 检索技能：在技能市场或技能库中，用英文名 atomic-design-fundamentals 或技能ID 14098 搜索，避免与其他原子设计类技能混淆。
  3. 执行安装/启用：按界面提示完成安装或启用（一键安装入口以官方说明为准）。由于该技能标注为不可由用户直接调用，安装后通常不需要额外配置命令，AI 在命中相关任务时会自动引用它的内容。
  4. 验证是否生效：回到对话中提一个明显属于该技能范围的问题，例如「按原子设计方法论，页眉应该属于哪一层？它可以引用哪些层级？」。如果回答中出现夸克、原子、分子、有机体、模板、页面的完整层级，并说明页眉属于有机体、可引用分子与原子，就说明技能已正常工作。
  5. 补充验证：让 AI 扫描你现有项目结构（它具备 Glob 与 Grep 能力），请它判断是否存在「原子导入分子」的越级引用，看是否能给出具体文件路径级别的结论。

2. 该技能的主要功能和特点

  • 六层完整模型（含夸克扩展）：除经典的原子、分子、有机体、模板、页面五层外，额外定义了第 0 层「夸克」——颜色、间距、排版比例、圆角、阴影、动效时长、断点等设计令牌。夸克不是 UI 组件，而是设计语言的单一事实来源。
  • 每一层都有明确判定标准：原子是「不可再分且不失去意义的最小功能单元」，分子是「单一职责的原子组合」，有机体是「能独立存在的复杂 UI 区块」，模板是「无真实内容的页面骨架」，页面是「填入真实内容的模板实例」。判断一个组件该放哪层时不用凭感觉。
  • 单向依赖规则 + 反模式清单：技能明确给出「夸克→原子→分子→有机体→模板→页面」的合法引用方向，并直接标出三类错误写法：原子从分子导入、分子从有机体导入、无理由跳级引用。
  • 三种目录结构模板：标准结构（按层级分目录、每组件独立文件夹）、扁平结构（层级目录 + 单文件）、基于功能的混合结构（features/products/components/atoms 这类按业务域切分、共享层单独放 shared），可按团队规模选择。
  • 命名与导入约定：组件文件用 PascalCase，配套 index.ts 做桶导出（barrel export），测试文件 *.test.tsx、故事文件 *.stories.tsx，并给出从 @/components/atoms 这类路径清洁导入的写法。
  • 属性流向与业务逻辑边界：原子只接收原始属性（variant、size、disabled），不持有业务逻辑；分子通过展开接收原子属性；有机体接收领域数据（如 user、navigation）。技能还给出「错误：原子内部调用 useProductPrice」这类正反对照。
  • 常见陷阱的实操对照：过度原子化（把按钮文字拆成独立组件）、不足原子化（一个 MegaForm 塞满全部表单）、循环依赖、命名不一致，每种都给出错误与正确两版代码。
  • 与生态工具的衔接：指向 Brad Frost 的 Atomic Design 官方站点、Pattern Lab，以及 Storybook、Fractal 等工具，方便继续深挖。

和普通工具比强在哪？ Storybook、Pattern Lab 这类工具解决的是「组件怎么展示、怎么文档化」，而原子设计基础Skill 解决的是「组件该怎么分层、怎么依赖、怎么命名」。前者是展示层，后者是架构层，两者互补而非替代。

3. 如何使用该技能？

由于该技能属于参考型知识技能，使用方式以「提问 + 提供上下文」为主，而不是敲一条命令。推荐流程如下：

步骤 1：先给出你的现状

不要一上来就问「什么是原子设计」，而是带上项目信息。例如：

我们是一个 React + TypeScript 的中后台项目，src/components 下现在平铺了 60 多个组件，有 Btn.tsx、Button.tsx、InputField.tsx、text-label.tsx，还有几个组件互相 import 导致打包报循环依赖警告。请按原子设计方法论帮我规划目录结构。

步骤 2：让 AI 输出层级归属表

期望输出是一张对照表：现有 60 个组件分别归入夸克/原子/分子/有机体/模板/页面，并标注哪些组件需要拆分。例如「MegaForm 应拆为 FormField（分子）+ TextAreaField（分子）+ Button（原子）」。

步骤 3：套用目录结构模板

根据团队规模选一种结构。单团队小项目可用扁平结构；多业务域的中大型项目建议用基于功能的混合结构，把设计令牌放在 src/quarks/，业务组件放在 src/features/<domain>/components/{atoms,molecules,organisms}，跨域复用组件放 src/shared/components/。

步骤 4：落定命名与导入规则

要求 AI 输出两样东西：统一的 PascalCase 命名清单，以及各级 index.ts 桶导出文件内容。典型结果形如：

// src/components/atoms/index.ts
export { Button } from './Button';
export { Input } from './Input';

// 业务代码中的清洁导入
import { Button, Input } from '@/components/atoms';

步骤 5：做一次依赖体检

让它用 Grep 扫描所有 import 语句，检查是否存在越级引用。输出应为「具体文件 → 越级引用 → 建议改法」的清单，比如「atoms/Icon.tsx 从 ../molecules 导入 IconButton，建议把 IconButton 下沉为原子，或把依赖关系反转」。

步骤 6：用模板与页面校验设计

最后让 AI 为一个典型业务页面写出模板骨架（Header + 主内容区 + Footer，使用占位内容），再用真实数据落成页面实例，检查结构是否能承载真实内容。

输出说明：该技能产出的是结构方案、规则文件和审查报告；实际组件代码的编写仍由你和 AI 在具体实现环节完成。

4. 同类型竞品对比分析

方案名称 定位 核心功能 安装/使用门槛 适用场景 优势与不足
原子设计基础Skill（atomic-design-fundamentals） 方法论知识型 AI 技能 六层层级定义、单向依赖规则、目录/命名约定、反模式清单 需支持技能的 AI 环境，一次安装即可；具体入口以官方说明为准 设计系统从零搭建、现有组件库审计与重构、团队规范对齐 优势：直接给出可执行的架构判断，能结合现有代码扫描后给建议；不足：不出可视化组件预览，不替代组件库本身
Storybook 组件开发与文档工作台 组件隔离预览、交互式文档、可视化测试 需在项目中初始化并维护配置，有一定工程成本 组件展示、设计与开发协作、回归视觉测试 优势：可视化体验好、生态成熟；不足：不规定组件如何分层，层级混乱的项目在 Storybook 里依然混乱
Pattern Lab 原子设计原生工具链 按原子设计组织模式库、生成静态样式指南 需独立搭建，学习曲线相对陡 以原子设计为核心的静态站点与模式库 优势：与 Brad Frost 方法论同源；不足：与现代前端框架的集成不如 Storybook 顺滑
Figma + 设计令牌工具（如 Style Dictionary） 设计侧源头与令牌管线 设计稿管理、令牌导出、多端分发 需设计与开发协同，令牌管线需自行搭建 跨端设计一致性、主题切换 优势：从设计源头保证一致；不足：管不到代码里的组件依赖关系与命名规范

怎么选？ 如果你缺的是「组件怎么分层、代码怎么组织」，选原子设计基础Skill；如果缺的是「组件怎么展示给别人看」，选 Storybook；如果缺的是「设计稿与代码如何保持一致」，用 Figma + 令牌管线。三者可以叠加使用。

5. 该技能的典型应用场景与实际体验情况

场景一：前端架构师从零搭建设计系统

痛点：新项目启动，团队对「什么该做成通用组件」没有共识，随手写的组件越来越多。使用方式：先让 AI 输出六层定义与目录结构，再逐层填充。实际体验：上手难度低，因为技能给的是决策规则而不是抽象理念，能很快把「夸克=颜色/间距/排版令牌」这类容易含糊的概念落地成 quarks/colors.ts、quarks/spacing.ts 这样的具体文件。注意点在「夸克」这一层是该方法论的扩展项，团队内部需要先对齐这个术语。

场景二：组件库负责人做存量审计

痛点：60 多个平铺组件、命名风格三种混用、存在循环依赖。使用方式：让 AI 扫描目录后输出重命名映射表、层级归属表和越级引用清单。实际体验：这是该技能价值最突出的场景，因为它同时具备文件读取与搜索能力，可以把「方法论」直接变成「针对你项目的整改建议」。注意事项：一次不要让它重构整个仓库，建议按业务域分批处理，避免建议超出可执行范围。

场景三：新人上手与团队规范统一

痛点：新人不知道该把组件放哪、该叫什么名字、能不能直接引上层组件。使用方式：把技能产出的层级规则、命名约定、导入规则整理成团队文档，作为 Code Review checklist。实际体验：规则表本身就是最好的入职材料，尤其「无效组合（反模式）」那一节，比正面描述更容易被记住。

场景四：AI 结对编程时防止架构漂移

痛点：AI 生成组件代码时常常把业务逻辑塞进按钮里，或者随手跨层 import。使用方式：在每次生成组件前提示「请遵循原子设计分层，原子不包含业务逻辑」。实际体验：能显著减少返工。注意：该技能标注为不可由用户直接调用，实际触发依赖你的任务描述是否落在它的范围内，因此把上下文说清楚比什么都重要。

6. 该技能能为用户带来的价值

  • 把架构决策前置：组件分层、命名、依赖方向在设计阶段就定下来，避免后期大规模重构。一个典型的 60 组件项目，如果等到出现循环依赖再治理，往往需要数周的重命名与搬迁；提前规范可以省掉这段成本。
  • 降低沟通门槛：夸克、原子、分子、有机体、模板、页面这套词汇让设计、前端、测试在讨论「这个东西该放哪」时有了共同语言，减少无谓争论。
  • 降低新人上手成本：层级规则 + 命名约定 + 正反例代码，构成一份可以直接照着做的团队规范，而不是只有理念没有落地路径。
  • 提升可维护性与复用率：原子无业务逻辑、依赖单向流动，意味着改一处样式（改夸克里的颜色令牌）就能全局生效，组件复用也从「碰运气」变成「按层查找」。
  • 长期价值：设计系统是会持续演进十年的资产，而层级结构是这份资产的地基。地基对了，后续加主题、加暗色模式、加多端适配都是增量工作；地基错了，每次加需求都要先拆墙。

7. 常见问题 FAQ

Q1：这个技能怎么安装？为什么我找不到可以直接调用的命令？

在支持技能机制的 AI 客户端中，用英文名 atomic-design-fundamentals 或技能ID 14098 检索并安装，具体入口与按钮位置以官方说明为准。需要特别注意的是，该技能详情中标注为不可由用户直接调用，属于参考型知识技能——它不会以斜杠命令的形式出现，而是在你提出组件分层、设计系统组织、组件库重构等任务时被 AI 自动引用。验证方法：直接问「页眉属于原子设计的哪一层」，看回答是否覆盖完整六层。

Q2：这个技能收费吗？

技能的授权与定价由官方技能市场决定，请以官方说明为准。建议安装前先查看技能页面的授权信息。

Q3：它适合谁用？我一个人写小项目需要吗？

最适合前端架构师、组件库/设计系统负责人、多人协作项目的前端负责人，以及正在做存量组件重构的团队。个人小项目、组件数量少于 15 个且短期不打算扩展的场景，收益相对有限，了解六层结构即可。

Q4：它和 Storybook、Pattern Lab 冲突吗？应该怎么选？

不冲突，层级不同。原子设计基础Skill 管「架构与依赖规则」，Storybook 管「组件展示与文档」，Pattern Lab 管「原子设计模式的静态模式库」。实践中常见组合是：用本技能定分层与命名 → 用 Storybook 展示每一层的组件 → 用令牌工具打通设计稿与代码。

Q5：我的项目是 Vue 或原生 Web Components，不是 React，还能用吗？

可以使用。技能中的具体示例以 React + TypeScript 呈现，但方法论本身是框架无关的，技能文档中也明确提到原子应「尽可能框架无关」。层级定义、单向依赖规则、目录结构、命名约定这些核心内容对任何组件化框架都成立，把示例代码换成对应框架写法即可。