Back to Details

atomic-design-planning

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Atomic Design Planning Skill

Atomic Design 规划技能

This skill guides UI component architecture using Atomic Design methodology, emphasizing reuse of existing components and proper categorization of new ones.
本技能借助Atomic Design方法论指导UI组件架构设计，强调复用现有组件并对新组件进行合理分类。

When to Use

适用场景

Apply this skill when:
  • Planning UI features or components
  • Deciding whether to create new components
  • Discussing frontend architecture
  • Users ask "what components do we need?"
  • Reviewing UI implementation plans
  • Discussing design system structure
适用于以下场景：
  • 规划UI功能或组件
  • 决定是否创建新组件
  • 讨论前端架构
  • 用户询问“我们需要哪些组件？”
  • 评审UI实现方案
  • 讨论设计系统结构

Atomic Design Hierarchy

Atomic Design 层级结构

┌─────────────────────────────────────────────────────────┐
│  PAGES         - Complete screens with real content     │
├─────────────────────────────────────────────────────────┤
│  TEMPLATES     - Page-level layout structures           │
├─────────────────────────────────────────────────────────┤
│  ORGANISMS     - Complex UI sections (Header, LoginForm)│
├─────────────────────────────────────────────────────────┤
│  MOLECULES     - Simple groups (SearchInput, NavItem)   │
├─────────────────────────────────────────────────────────┤
│  ATOMS         - Basic blocks (Button, Input, Icon)     │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│  PAGES         - Complete screens with real content     │
├─────────────────────────────────────────────────────────┤
│  TEMPLATES     - Page-level layout structures           │
├─────────────────────────────────────────────────────────┤
│  ORGANISMS     - Complex UI sections (Header, LoginForm)│
├─────────────────────────────────────────────────────────┤
│  MOLECULES     - Simple groups (SearchInput, NavItem)   │
├─────────────────────────────────────────────────────────┤
│  ATOMS         - Basic blocks (Button, Input, Icon)     │
└─────────────────────────────────────────────────────────┘

Component Categories

组件分类

Atoms

Atoms

Smallest, indivisible UI elements: Buttons, Inputs, Labels, Icons, Typography.
  • No dependencies on other components
  • Highly reusable, controlled by props only
最小的、不可拆分的UI元素：按钮、输入框、标签、图标、排版样式。
  • 不依赖其他组件
  • 高复用性，仅通过props控制

Molecules

Molecules

Simple combinations of 2-4 atoms: SearchInput, FormField, NavItem.
  • Single responsibility, reusable in multiple organisms
由2-4个原子组成的简单组合：搜索输入框、表单字段、导航项。
  • 单一职责，可在多个有机体组件中复用

Organisms

Organisms

Complex, distinct UI sections: Header, ProductCard, LoginForm, DataTable.
  • May connect to data/state, often feature-specific
复杂、独立的UI区块：页头、产品卡片、登录表单、数据表格。
  • 可连接数据/状态，通常为特定功能服务

Templates

Templates

Page-level structural layouts: DashboardLayout, AuthLayout.
  • Define content placement, handle responsive behavior
页面级结构布局：仪表盘布局、认证布局。
  • 定义内容排布，处理响应式行为

Pages

Pages

Specific instances with real content: HomePage, ProductDetailPage.
  • Templates filled with data, route-specific
包含真实内容的具体实例：首页、产品详情页。
  • 填充了数据的模板，对应特定路由

The Reuse-First Principle

复用优先原则

Before creating ANY component:
  1. Search existing atoms - Is there a Button/Input that works?
  2. Search existing molecules - Can a FormField be adapted?
  3. Search existing organisms - Does a similar Card exist?
  4. Only then create new - Is this truly unique?
在创建任何组件之前：
  1. 搜索现有Atoms - 是否有可用的Button/Input？
  2. 搜索现有Molecules - 是否可以改造FormField来使用？
  3. 搜索现有Organisms - 是否存在类似的卡片组件？
  4. 最后再考虑创建新组件 - 这个组件是否真的是独一无二的？

Decision Table

决策表

QuestionIf YesIf No
Does something similar exist?Reuse/extend itContinue evaluation
Will this be used in 2+ places?Consider extractingInline it instead
Is it truly indivisible?Make it an atomMake it a molecule+
Does it combine 2-4 atoms?Make it a moleculeMake it an organism
Is it a complete UI section?Make it an organismReconsider structure
问题是否
是否存在类似组件？复用/扩展现有组件继续评估
该组件会在2个及以上场景使用吗？考虑封装为独立组件直接内联实现
它是否真的不可拆分？定义为Atom定义为Molecule或更高层级组件
它是否由2-4个Atom组成？定义为Molecule定义为Organism
它是否是一个完整的UI区块？定义为Organism重新考量结构

Anti-Patterns to Avoid

需避免的反模式

  • Creating when reusing works - Configure existing Button with props instead
  • Feature-specific atoms - "UserProfileButton" should be an organism
  • Skipping levels - Pages shouldn't directly use atoms
  • Wrong abstraction level - Atoms shouldn't have business logic
  • 能复用却创建新组件 - 应通过props配置现有Button而非新建
  • 特定功能的Atom - “用户资料按钮”应定义为Organism
  • 跳过层级使用 - Page不应直接使用Atom
  • 抽象层级错误 - Atom不应包含业务逻辑

Integration with Linear Workflow

与线性工作流的集成

When planning UI features, create issues for:
  1. Atom issues - New basic components needed
  2. Molecule issues - New component combinations
  3. Organism issues - New feature-level components
Investigation phase should identify existing components to reuse.
Remember: Reuse existing components. Only create what's truly missing.
规划UI功能时，需创建以下类型的任务：
  1. Atom任务 - 需要新增的基础组件
  2. Molecule任务 - 需要新增的组件组合
  3. Organism任务 - 需要新增的功能级组件
调研阶段需确定可复用的现有组件。
请记住：复用现有组件。仅创建真正缺失的部分。