extract

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Identify reusable patterns, components, and design tokens, then extract and consolidate them into the design system for systematic reuse.

识别可复用的模式、组件和Design Tokens，然后将它们提取并整合到设计系统中，以实现系统化复用。

Analyze the target area to identify extraction opportunities:

Find the design system: Locate your design system, component library, or shared UI directory (grep for "design system", "ui", "components", etc.). Understand its structure:
- Component organization and naming conventions
- Design token structure (if any)
- Documentation patterns
- Import/export conventions
CRITICAL: If no design system exists, ask before creating one. Understand the preferred location and structure first.
Identify patterns: Look for:
- Repeated components: Similar UI patterns used multiple times (buttons, cards, inputs, etc.)
- Hard-coded values: Colors, spacing, typography, shadows that should be tokens
- Inconsistent variations: Multiple implementations of the same concept (3 different button styles)
- Reusable patterns: Layout patterns, composition patterns, interaction patterns worth systematizing
Assess value: Not everything should be extracted. Consider:
- Is this used 3+ times, or likely to be reused?
- Would systematizing this improve consistency?
- Is this a general pattern or context-specific?
- What's the maintenance cost vs benefit?

分析目标区域以识别提取机会：

定位设计系统：找到你的设计系统、组件库或共享UI目录（可通过搜索“design system”、“ui”、“components”等关键词）。了解其结构：
- 组件的组织方式和命名规范
- Design Tokens的结构（如果存在）
- 文档模式
- 导入/导出规范
关键注意事项：如果尚未存在设计系统，请先确认再创建。首先了解首选的位置和结构。
识别模式：寻找以下内容：
- 重复组件：多次使用的相似UI模式（按钮、卡片、输入框等）
- 硬编码值：应转化为Design Tokens的颜色、间距、排版、阴影等
- 不一致的变体：同一概念的多种实现方式（如3种不同的按钮样式）
- 可复用模式：值得系统化的布局模式、组合模式、交互模式
评估价值：并非所有内容都需要提取。请考虑：
- 该内容是否已使用3次及以上，或很可能被复用？
- 系统化该内容是否能提升一致性？
- 这是通用模式还是特定场景下的模式？
- 维护成本与收益对比如何？

Create a systematic extraction plan:

Components to extract: Which UI elements become reusable components?
Tokens to create: Which hard-coded values become design tokens?
Variants to support: What variations does each component need?
Naming conventions: Component names, token names, prop names that match existing patterns
Migration path: How to refactor existing uses to consume the new shared versions

IMPORTANT: Design systems grow incrementally. Extract what's clearly reusable now, not everything that might someday be reusable.

制定系统化的提取计划：

重要提示：设计系统是逐步发展的。提取当前明确可复用的内容，而非所有未来可能复用的内容。

Build improved, reusable versions:

Components: Create well-designed components with:
- Clear props API with sensible defaults
- Proper variants for different use cases
- Accessibility built in (ARIA, keyboard navigation, focus management)
- Documentation and usage examples
Design tokens: Create tokens with:
- Clear naming (primitive vs semantic)
- Proper hierarchy and organization
- Documentation of when to use each token
Patterns: Document patterns with:
- When to use this pattern
- Code examples
- Variations and combinations

NEVER:

构建经过优化的可复用版本：

组件：创建设计精良的组件，具备以下特性：
- 清晰的Props API及合理的默认值
- 针对不同使用场景的合适变体
- 内置无障碍支持（ARIA、键盘导航、焦点管理）
- 文档及使用示例
Design Tokens：创建令牌，具备以下特性：
- 清晰的命名（基础型 vs 语义型）
- 合理的层级与组织方式
- 各令牌的使用场景文档
模式：为模式编写文档，包含：
- 何时使用该模式
- 代码示例
- 变体及组合方式

禁止操作：

Replace existing uses with the new shared versions:

将现有用法替换为新的共享版本：

Update design system documentation:

Remember: A good design system is a living system. Extract patterns as they emerge, enrich them thoughtfully, and maintain them consistently.

更新设计系统文档：

记住：优秀的设计系统是一个活的系统。在模式出现时提取它们，有思考地丰富它们，并持续一致地维护它们。