Back to Details

design-system-creation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Design System Creation

设计系统创建

Overview

概述

A design system is a structured set of components, guidelines, and principles that ensure consistency, accelerate development, and improve product quality.
设计系统是一套结构化的组件、指南和原则集合，可确保一致性、加速开发并提高产品质量。

When to Use

适用场景

  • Multiple product interfaces or teams
  • Scaling design consistency
  • Reducing redundant component development
  • Improving design-to-dev handoff
  • Creating shared language across teams
  • Building reusable components
  • Documenting design standards
  • 多产品界面或多团队场景
  • 扩展设计一致性
  • 减少重复组件开发
  • 优化设计到开发的交接流程
  • 在跨团队间创建共享语言
  • 构建可复用组件
  • 记录设计标准

Instructions

操作指南

1. Design System Components

1. 设计系统组件

yaml
Design System Structure:

Foundation Layer:
  Typography:
    - Typefaces (Roboto, Inter)
    - Font sizes (scale: 12, 14, 16, 20, 28, 36, 48)
    - Font weights (Regular, Medium, Bold)
    - Line heights and letter spacing

Colors:
    - Primary brand color (#2196F3)
    - Secondary colors
    - Neutral palette (grays)
    - Semantic colors (success, error, warning)
    - Dark mode variants

Spacing:
    - Base unit: 4px
    - Scale: 4, 8, 12, 16, 24, 32, 48, 64px
    - Apply consistently across UI

Shadows & Elevation:
    - Elevation 0 (flat)
    - Elevation 1, 2, 4, 8, 16 (increasing depth)
    - Used for modals, cards, overlays

---

Component Layer:

Basic Components:
  - Button (primary, secondary, outline, disabled states)
  - Input fields (text, password, number, email)
  - Dropdown / Select
  - Checkbox & Radio buttons
  - Toggle switch
  - Textarea

Form Components:
  - Form group (label + input + error)
  - Error messages
  - Help text
  - Required indicators
  - Validation states

Navigation:
  - Breadcrumbs
  - Tabs
  - Navigation drawer
  - Pagination
  - Stepper

Feedback:
  - Toast notifications
  - Modal dialogs
  - Alerts
  - Loading indicators
  - Progress bars

Data Display:
  - Tables
  - Lists
  - Cards
  - Badges
  - Chips

---

Pattern Layer:

Layout Patterns:
  - Main layout (header + nav + content + footer)
  - Two-column (main + sidebar)
  - Form layouts
  - Grid layouts

Content Patterns:
  - Empty states
  - Loading states
  - Error states
  - Confirmation dialogs
  - Onboarding flows

Interaction Patterns:
  - Hover states
  - Focus states
  - Disabled states
  - Transitions/animations
  - Keyboard navigation
yaml
Design System Structure:

Foundation Layer:
  Typography:
    - Typefaces (Roboto, Inter)
    - Font sizes (scale: 12, 14, 16, 20, 28, 36, 48)
    - Font weights (Regular, Medium, Bold)
    - Line heights and letter spacing

Colors:
    - Primary brand color (#2196F3)
    - Secondary colors
    - Neutral palette (grays)
    - Semantic colors (success, error, warning)
    - Dark mode variants

Spacing:
    - Base unit: 4px
    - Scale: 4, 8, 12, 16, 24, 32, 48, 64px
    - Apply consistently across UI

Shadows & Elevation:
    - Elevation 0 (flat)
    - Elevation 1, 2, 4, 8, 16 (increasing depth)
    - Used for modals, cards, overlays

---

Component Layer:

Basic Components:
  - Button (primary, secondary, outline, disabled states)
  - Input fields (text, password, number, email)
  - Dropdown / Select
  - Checkbox & Radio buttons
  - Toggle switch
  - Textarea

Form Components:
  - Form group (label + input + error)
  - Error messages
  - Help text
  - Required indicators
  - Validation states

Navigation:
  - Breadcrumbs
  - Tabs
  - Navigation drawer
  - Pagination
  - Stepper

Feedback:
  - Toast notifications
  - Modal dialogs
  - Alerts
  - Loading indicators
  - Progress bars

Data Display:
  - Tables
  - Lists
  - Cards
  - Badges
  - Chips

---

Pattern Layer:

Layout Patterns:
  - Main layout (header + nav + content + footer)
  - Two-column (main + sidebar)
  - Form layouts
  - Grid layouts

Content Patterns:
  - Empty states
  - Loading states
  - Error states
  - Confirmation dialogs
  - Onboarding flows

Interaction Patterns:
  - Hover states
  - Focus states
  - Disabled states
  - Transitions/animations
  - Keyboard navigation

2. Component Documentation

2. 组件文档

python
undefined
python
undefined

Document each component thoroughly

Document each component thoroughly

class ComponentDocumentation: def create_component_doc(self, component): """Document complete component""" return { 'name': component.name, 'description': component.description, 'usage': component.when_to_use, 'anatomy': { 'elements': component.sub_elements, 'diagram': 'Show with labels' }, 'properties': { 'size': ['Small', 'Medium', 'Large'], 'variant': component.variants, 'state': ['Default', 'Hover', 'Focus', 'Disabled'], 'disabled': True/False, 'required': True/False }, 'code_examples': [ 'React example', 'CSS example', 'HTML example' ], 'accessibility': { 'aria_roles': component.aria_roles, 'keyboard_support': component.keyboard_behavior, 'screen_reader': component.sr_text }, 'do_dont': { 'do': ['Guideline 1', 'Guideline 2'], 'dont': ['Guideline 1', 'Guideline 2'] } }
def create_live_component_library(self):
    """Build interactive component showcase"""
    return {
        'tool': 'Storybook / Zeroheight',
        'features': [
            'Live component preview',
            'Interactive controls',
            'Code examples',
            'Documentation',
            'Version history'
        ],
        'coverage': 'All components with all variants'
    }
undefined
class ComponentDocumentation: def create_component_doc(self, component): """Document complete component""" return { 'name': component.name, 'description': component.description, 'usage': component.when_to_use, 'anatomy': { 'elements': component.sub_elements, 'diagram': 'Show with labels' }, 'properties': { 'size': ['Small', 'Medium', 'Large'], 'variant': component.variants, 'state': ['Default', 'Hover', 'Focus', 'Disabled'], 'disabled': True/False, 'required': True/False }, 'code_examples': [ 'React example', 'CSS example', 'HTML example' ], 'accessibility': { 'aria_roles': component.aria_roles, 'keyboard_support': component.keyboard_behavior, 'screen_reader': component.sr_text }, 'do_dont': { 'do': ['Guideline 1', 'Guideline 2'], 'dont': ['Guideline 1', 'Guideline 2'] } }
def create_live_component_library(self):
    """Build interactive component showcase"""
    return {
        'tool': 'Storybook / Zeroheight',
        'features': [
            'Live component preview',
            'Interactive controls',
            'Code examples',
            'Documentation',
            'Version history'
        ],
        'coverage': 'All components with all variants'
    }
undefined

3. Design System Governance

3. 设计系统治理

yaml
Design System Governance:

Ownership:
  Owner: Design System Lead
  Committee: 1 Designer, 1 Developer, 1 Product Manager
  Review Frequency: Biweekly
  Approval Process: Committee sign-off required

Component Lifecycle:

Proposed:
  - Submitted by team
  - Reviewed for duplication
  - Assessed for scope

In Review:
  - Design review
  - Accessibility audit
  - Developer implementation review
  - 1-2 week review period

Approved:
  - Documented in system
  - Available in component library
  - Semver version bump
  - Teams notified

Deprecated:
  - Clear timeline for migration
  - Updated component provided
  - Support period: 2 major versions

Retired:
  - Removed from library
  - Historical documentation archived

---

Contribution Guidelines:

To Add Component:
  1. Check existing components
  2. Submit RFC (Request for Comments)
  3. Attend design review
  4. Implement per standards
  5. Get committee approval
  6. Document in library
  7. Release in new version

Standards:
  - Accessibility (WCAG 2.1 AA minimum)
  - Mobile-first responsive design
  - Dark mode support
  - Internationalization (i18n)
  - Performance (<100kb added to bundle)
yaml
Design System Governance:

Ownership:
  Owner: Design System Lead
  Committee: 1 Designer, 1 Developer, 1 Product Manager
  Review Frequency: Biweekly
  Approval Process: Committee sign-off required

Component Lifecycle:

Proposed:
  - Submitted by team
  - Reviewed for duplication
  - Assessed for scope

In Review:
  - Design review
  - Accessibility audit
  - Developer implementation review
  - 1-2 week review period

Approved:
  - Documented in system
  - Available in component library
  - Semver version bump
  - Teams notified

Deprecated:
  - Clear timeline for migration
  - Updated component provided
  - Support period: 2 major versions

Retired:
  - Removed from library
  - Historical documentation archived

---

Contribution Guidelines:

To Add Component:
  1. Check existing components
  2. Submit RFC (Request for Comments)
  3. Attend design review
  4. Implement per standards
  5. Get committee approval
  6. Document in library
  7. Release in new version

Standards:
  - Accessibility (WCAG 2.1 AA minimum)
  - Mobile-first responsive design
  - Dark mode support
  - Internationalization (i18n)
  - Performance (<100kb added to bundle)

4. Design System Documentation

4. 设计系统文档

yaml
Documentation Structure:

Getting Started:
  - What is the design system?
  - How to use in your project
  - Installation instructions
  - Quick start guide

Foundations:
  - Color system
  - Typography scale
  - Spacing/grid system
  - Icons
  - Accessibility standards

Components:
  - [Detailed component docs]

Patterns:
  - Common layouts
  - Content patterns
  - Interaction patterns
  - Form patterns

Guidelines:
  - Voice & tone
  - Imagery & photography
  - Brand identity
  - Copy guidelines

Use Cases:
  - Real-world examples
  - Case studies
  - Do's and don'ts

Updates:
  - Release notes
  - Migration guides
  - Roadmap
  - Contribution process
yaml
Documentation Structure:

Getting Started:
  - What is the design system?
  - How to use in your project
  - Installation instructions
  - Quick start guide

Foundations:
  - Color system
  - Typography scale
  - Spacing/grid system
  - Icons
  - Accessibility standards

Components:
  - [Detailed component docs]

Patterns:
  - Common layouts
  - Content patterns
  - Interaction patterns
  - Form patterns

Guidelines:
  - Voice & tone
  - Imagery & photography
  - Brand identity
  - Copy guidelines

Use Cases:
  - Real-world examples
  - Case studies
  - Do's and don'ts

Updates:
  - Release notes
  - Migration guides
  - Roadmap
  - Contribution process

Best Practices

最佳实践

✅ DO

✅ 建议

  • Start with essential components
  • Document every component thoroughly
  • Include code examples
  • Test components across browsers
  • Include accessibility guidance
  • Version the design system
  • Have clear governance
  • Communicate updates proactively
  • Gather feedback from users
  • Maintain incrementally
  • 从核心组件开始构建
  • 为每个组件提供详尽的文档
  • 包含代码示例
  • 在多浏览器中测试组件
  • 纳入无障碍设计指南
  • 为设计系统添加版本管理
  • 建立清晰的治理机制
  • 主动传达更新内容
  • 收集用户反馈
  • 持续增量维护

❌ DON'T

❌ 避免

  • Create too many components initially
  • Skip documentation
  • Ignore accessibility
  • Make breaking changes without migration path
  • Allow inconsistent implementations
  • Ignore user feedback
  • Let design system stagnate
  • Create components without proven need
  • Make components too prescriptive
  • Ignore performance impact
  • 初始阶段创建过多组件
  • 跳过文档环节
  • 忽略无障碍设计
  • 在没有迁移方案的情况下进行破坏性变更
  • 允许不一致的实现方式
  • 忽略用户反馈
  • 让设计系统停滞不前
  • 创建没有实际需求的组件
  • 让组件过于死板
  • 忽略性能影响

Design System Tips

设计系统小贴士

  • Start with colors, typography, spacing
  • Build most-used components first
  • Use Storybook or similar for documentation
  • Version using semantic versioning
  • Establish clear contribution process
  • 从颜色、排版、间距开始构建
  • 优先构建最常用的组件
  • 使用Storybook或类似工具进行文档管理
  • 使用语义化版本控制
  • 建立清晰的贡献流程