技能使用指南

atomic-design-integration（原子设计集成）Skill 是什么？如何下载使用？

原子设计集成Skill 帮你把原子设计方法论真正落到 React、Vue、Angular 项目中：分层目录、桶导出、组件模板、Storybook 与测试配置一应俱全，显著缩短设计系统搭建与组件迁移时间。了解它解决什么问题、如何启用与验证生效，快速提升前端组件开发效率。

原子设计集成Skillatomic-design-integration
8 个章节 约 17 分钟阅读 AI 智能生成

原子设计集成Skill：把原子设计方法论真正落到 React、Vue、Angular 工程里

  • 它是什么：一个专注于「原子设计方法论 + 现代前端框架」落地的技能，覆盖 React、Vue、Angular 以及 Storybook、测试、路径别名等配套工程配置。
  • 它解决什么：很多人懂「原子/分子/有机体/模板」的概念，却不知道在真实项目里目录怎么建、组件怎么写、导出怎么做、测试和文档怎么配——这个技能给出的正是这些框架特定的实现模式。
  • 核心产出：分层项目结构、桶导出（barrel export）模式、TypeScript 组件模板、自定义钩子/组合式函数、Storybook 故事与层次规范、单元测试与集成测试模板。
  • 适用人群：前端架构师、组件库维护者、正在做设计系统或组件迁移的团队。
  • 使用门槛：需要具备 React/Vue/Angular 中至少一种框架的中级开发经验；技能本身提供的是模式与模板，落地效果取决于项目实际情况。

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

技能中文名：原子设计集成Skill 技能英文名：atomic-design-integration 技能ID：14097

它要解决的问题非常具体：原子设计（Atomic Design）是一套被广泛引用的组件分层方法论——原子（Atoms）、分子（Molecules）、有机体（Organisms）、模板（Templates）、页面（Pages）。但方法论本身不告诉你 React 里 Button 文件夹该放哪些文件、Vue 3 的 <script setup> 里属性怎么定义、Angular 的模块该怎么按层级拆分、Storybook 的标题该怎么按层级组织。这个技能就是把「方法论」翻译成「各框架可执行的工程模式」。

关于「一键安装 AI 技能提升开发效率」的思路，可以这样理解：

第一步：确认安装前提 该技能允许使用的工具为 Bash、Read、Write、Edit、Glob、Grep，说明它需要在能够读写项目文件、执行命令的 AI 编程环境中使用。因此前提是：你已经在使用支持「技能（Skill）」机制的 AI 编程助手或智能体平台，并且当前工作目录是一个可读写的前端项目仓库。

第二步：通过技能入口安装/启用 在支持该技能机制的平台的技能市场或技能管理入口中，按技能ID 14097 或技能英文名 atomic-design-integration 查找并启用。具体的安装命令、入口路径与启用方式，不同平台差异较大，以官方说明为准。需要注意的是，技能详情中标注了「用户可调用: false」，这意味着它通常不是由用户手动点名调用的独立命令，而是由 AI 在识别到「原子设计 + 框架集成」相关任务时自动匹配使用。

第三步：验证是否生效 启用后，在项目里提出一个典型请求即可验证，例如：「按原子设计帮我搭一个 React 组件目录结构，Button 原子要包含样式、测试和 Storybook 故事文件」。如果技能已生效，返回结果应当体现出 atoms/molecules/organisms/templates 的分层目录、每个组件文件夹内的 index.ts 桶导出，以及配套的 .module.css、.test.tsx、.stories.tsx 文件——这正是该技能的输出特征。

第四步：结合项目实际调整 技能给出的是通用模式，接入现有项目时应先与团队既有的目录约定、样式方案、测试框架对齐，再让 AI 按调整后的约定生成代码，避免新旧结构混杂。

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

  • 多框架覆盖：同时覆盖 React、Vue（Vue 3）、Angular 三大框架的原子设计落地方式，并给出「一般模式」，便于迁移到其他框架。
  • 分层项目结构模板：为每个框架给出完整的 atoms / molecules / organisms / templates / pages 目录树，精确到单个组件文件夹内应包含哪些文件（组件文件、样式文件、测试文件、故事文件、index.ts）。
  • 桶导出（Barrel Export）模式：规定每层 index.ts 的导出写法，并在 components/index.ts 做主桶导出，让业务侧可以 import { Button } from '@/components' 统一引用，避免深层相对路径。
  • 生产级组件模板：以 Button 为例给出可直接参考的实现——React 使用 forwardRef + clsx 组合类名 + ButtonHTMLAttributes 继承原生属性 + displayName；Vue 使用 <script setup lang="ts"> + withDefaults(defineProps) + 计算属性拼类名；Angular 使用 standalone: true 组件 + @Input/@Output + get buttonClasses。
  • 逻辑与视图分离：为有机体提供自定义钩子（React 的 useHeader）与组合式函数（Vue 的 useHeader），把菜单开关、搜索、登出等状态逻辑从视图中抽离。
  • 设计令牌管理：给出 React ThemeContext + useTheme 的令牌上下文示例，包含颜色与间距两套令牌，为设计系统提供统一入口。
  • Storybook 集成规范：包含故事文件模板（含 argTypes 控件与中文描述）、.storybook/main.ts 配置，以及「按原子级别组织故事标题」的层次约定（Atoms/Button、Molecules/FormField、Organisms/Header 等）。
  • 测试基础设施模板：提供 Vitest + Testing Library 的单元测试模板（覆盖渲染、状态、交互、可访问性四类断言），以及有机体层面的集成测试模板（导航渲染、登录态切换、登出回调等）。
  • 路径别名配置：给出 tsconfig.json 的 paths 与 Vite resolve.alias 的配套写法，为 @/atoms、@/molecules 等层级别名提供开箱即用的配置。
  • 最佳实践沉淀：一致导出模式、清晰属性类型（始终导出 Props 接口供组合使用）、框架无关逻辑抽取（如 formatPrice）三条原则。

和普通工具比强在哪：普通的脚手架或组件生成器只给你一个空壳组件；这个技能给的是「分层架构约定 + 各框架惯用写法 + 文档与测试配套」的整套模式，且明确区分了 React/Vue/Angular 的语法差异，不是一套写法硬套三个框架。

3. 如何使用该技能？

步骤 1：明确任务类型 该技能适用场景包括：在新项目中设置原子设计结构、把现有组件迁移到原子结构、集成 Storybook 文档、配置测试基础设施、建立框架特定模式。先判断你属于哪一类，再向 AI 描述任务。

步骤 2：声明框架与技术栈 在请求中明确框架（React / Vue / Angular）、语言（TypeScript）、样式方案、测试框架（如 Vitest）与文档工具（如 Storybook）。示例输入：

「这是一个 React + TypeScript + Vite 项目，请按原子设计搭建 components 目录，原子层先做 Button、Input、Label、Icon 四个组件，样式用 CSS Modules，测试用 Vitest + Testing Library，并给出桶导出。」

步骤 3：获取结构与模板 技能会返回分层目录树与组件模板。以 React 为例，输出会包含：

src/components/atoms/Button/
  Button.tsx
  Button.module.css
  Button.test.tsx
  Button.stories.tsx
  index.ts

同时给出 Button.tsx 的实现，包含 variant（primary/secondary/tertiary）、size（sm/md/lg）、fullWidth、isLoading、leftIcon、rightIcon 等属性，并通过 forwardRef 暴露 DOM 引用、通过 aria-busy 表达加载状态。

步骤 4：按层推进 建议顺序为：先原子（Button、Input、Label、Icon），再分子（FormField、SearchForm），再有机体（Header、Footer），最后模板与页面。每完成一层，让 AI 补齐该层的 index.ts 桶导出。

步骤 5：配套配置 让 AI 输出 tsconfig.json 的 paths 与 Vite 的 resolve.alias，使 @/atoms/Button、@/components 等别名可直接使用；再让它生成 .storybook/main.ts（含 @storybook/addon-a11y 等插件）与故事文件的层级标题。

步骤 6：补测试 要求生成单元测试与集成测试。单元测试应覆盖：子元素渲染、变体类名、尺寸类名、disabled 禁用、加载态禁用与 aria-busy、加载时显示 spinner、点击回调调用次数、禁用时不触发回调、ref 转发。集成测试则覆盖有机体的组合行为，例如 Header 的导航项渲染、未登录显示登录按钮、已登录显示用户名、点击注销触发 onLogout。

输出说明：该技能的输出以代码与目录结构为主，附带中文注释与说明，可直接参考写入项目；但涉及的组件命名、令牌取值、测试断言需按项目实际调整。

4. 同类型竞品对比分析

方案名称 定位 核心功能 安装/使用门槛 适用场景 优势与不足
原子设计集成Skill（atomic-design-integration） 面向原子设计落地的框架集成模式技能 三大框架分层目录、桶导出、组件模板、钩子/组合式函数、Storybook、测试、路径别名 需在支持技能机制的 AI 编程环境中启用，无需额外依赖；需具备框架中级经验 搭建设计系统、组件库重构、组件迁移 优势：覆盖多框架、模式完整、含测试与文档配套；不足：非代码依赖包，需人工判断适配
Storybook 官方脚手架（如 npx storybook init） 组件文档与预览工具初始化 自动探测框架并生成配置、示例故事 命令即可运行，门槛低 需要可视化组件文档与交互调试 优势：开箱即用；不足：不提供原子分层目录与架构约定
通用组件生成器/CLI 模板 单组件文件脚手架 生成组件空壳与样式、测试文件 需自行配置模板，门槛中等 快速产出单个组件骨架 优势：轻量；不足：不涉及分层架构、跨层导出与设计令牌
设计系统平台/组件库（如企业自建库） 成品组件库 提供现成组件与主题 需引入依赖并适配主题，门槛较高 统一多产品 UI 优势：组件齐全；不足：定制成本高，架构约束与团队约定未必匹配

从上表可以看出，该技能的差异点在于「架构约定 + 框架惯用写法 + 文档测试配套」三者合一，而不是单纯的脚手架或成品库。实际项目中，它常与 Storybook、测试框架配合使用，而不是替代它们。

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

场景一：新项目从零搭建组件体系（前端架构师） 痛点：新项目起步阶段，每个人建目录的习惯不同，半年后组件散落各处、引用路径混乱。使用方式：让 AI 按技能输出的分层结构一次性生成 atoms/molecules/organisms/templates 目录与各层 index.ts，并配置 @/atoms 等别名。体验情况：上手难度低，结构一致性提升明显；注意事项是别名配置需与构建工具（Vite/Webpack）和 tsconfig.json 同步，否则编辑器会报解析错误。

场景二：存量组件迁移到原子结构（组件库维护者） 痛点：现有项目组件平铺在 components/ 下，Button、FormField、Header 混在一起，职责边界模糊。使用方式：先让 AI 依据技能中的分层定义给出迁移映射表（哪些是原子、哪些是分子、哪些是有机体的组合），再逐个迁移并补桶导出。体验情况：分层判断需要人参与，尤其「分子与有机体」的边界在不同团队有不同理解；建议先迁移低风险原子，逐步向上。

场景三：为组件库补齐 Storybook 与测试（质量与文档负责人） 痛点：组件写完了但没有文档，测试只覆盖了「能不能渲染」。使用方式：按技能提供的故事模板生成 argTypes 控件与多故事（Primary、Secondary、WithIcons、Loading、AllVariants、AllSizes），按测试模板补齐状态、交互、可访问性断言。体验情况：模板可直接套用，产出速度快；注意事项是 toHaveClass('secondary') 这类断言依赖 CSS Modules 的类名映射，若使用哈希类名则需调整为更稳定的断言方式（如断言 data-* 属性或行为而非类名）。

场景四：多框架团队统一方法论（技术负责人） 痛点：团队同时维护 React 与 Vue 项目，组件规范各写一套。使用方式：让 AI 分别输出 React 与 Vue 两套结构，并抽取框架无关逻辑（如 formatPrice）放入 utils/ 共享。体验情况：技能对两套框架都给了对应语法（forwardRef 对比 withDefaults、自定义钩子对比组合式函数），对齐成本下降；注意事项是跨框架共享应限于纯逻辑，视图层不要强行统一。

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

  • 缩短架构决策时间：分层目录、桶导出、命名约定这些通常需要团队开会讨论的内容，技能直接给出可参考的成熟模式，把「设计架构」变成「评审架构」。
  • 降低方法论落地门槛：原子设计的概念容易理解、落地困难，技能把概念逐层映射为文件与代码，让中级开发者也能按统一标准产出组件。
  • 减少重复劳动：组件模板、故事模板、测试模板、别名配置都可复用，同类组件不必每次从零编写；按一个组件省下数十分钟估算，一个中等规模组件库的收益相当可观。
  • 提升可维护性与协作效率：统一的桶导出与层级别名让引用路径稳定，重构时改动集中；分层清晰也让代码评审更聚焦。
  • 文档与测试同步建立：Storybook 层次与测试模板随组件一起产出，避免「先写业务、文档测试永远欠着」的常见债务。
  • 长期价值：这套结构本身即设计系统的骨架，随着原子层沉淀、分子层组合增加，团队可逐步演进为主题令牌、暗色模式、多端复用，而不必推倒重来。

7. 常见问题 FAQ

Q1：这个技能怎么安装？需要装依赖包吗？ A：它不是 npm 依赖包，而是 AI 技能。需要在支持技能机制的 AI 编程平台中，按技能ID 14097 或英文名 atomic-design-integration 查找并启用，具体入口与命令以官方说明为准。启用后无需在项目里安装额外依赖，但它生成的代码会引用 React、Vue、Angular、Storybook、Vitest 等，这些仍需按项目实际情况自行安装。

Q2：为什么我点名调用它没反应？ A：技能详情中标注「用户可调用: false」，说明它通常由 AI 在识别到「原子设计 + 框架集成」类任务时自动匹配，而非用户手动调用的独立命令。建议把需求描述得更具体，例如直接说明框架、目录分层、需要桶导出与 Storybook 配置。

Q3：收费吗？ A：技能详情未包含任何价格信息。是否收费取决于你所在平台的计费规则，以官方说明为准。技能本身产出的代码与模式可直接用于项目。

Q4：适合谁用？新手能用吗？ A：适合前端架构师、组件库维护者、正在建设设计系统或做组件迁移的团队。新手可以使用它生成的模板作为学习范本，但需要先掌握框架基础（组件、属性、插槽、依赖注入等），否则难以判断生成结果是否合理。

Q5：和 Storybook、组件生成器怎么选？ A：不冲突，是互补关系。Storybook 负责组件文档与预览，组件生成器负责快速产出骨架，而该技能负责「分层架构 + 框架惯用写法 + 文档测试配套」的整体模式。推荐做法是：用该技能确定结构与模板，再用 Storybook 承载文档、用测试框架承载质量保障。