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.

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

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"等关键词查找）。了解其结构：
- 组件的组织方式与命名规范
- 设计令牌的结构（若已存在）
- 文档编写模式
- 导入/导出规范
重要提示：如果尚未存在设计系统，创建前请先确认需求，优先了解预期的存放位置与结构。
识别可复用模式：重点关注：
- 重复使用的组件：多次出现的相似UI模式（如按钮、卡片、输入框等）
- 硬编码值：应转化为设计令牌的颜色、间距、排版、阴影等参数
- 不一致的变体：同一概念的多种实现方式（如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:

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

组件：设计优质的可复用组件，需包含：
- 清晰的属性API与合理的默认值
- 适配不同使用场景的变体
- 内置无障碍支持（ARIA、键盘导航、焦点管理）
- 文档说明与使用示例
设计令牌：创建设计令牌时需注意：
- 清晰的命名（基础类型与语义化类型区分）
- 合理的层级与组织方式
- 说明每个令牌的适用场景
设计模式：编写模式文档需包含：
- 该模式的适用场景
- 代码示例
- 变体与组合方式

禁止操作：

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.

更新设计系统的文档：

请记住：优秀的设计系统是一个持续迭代的系统。在模式出现时及时提取，审慎地对其进行优化，并始终保持一致性维护。