i-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，随后将其提取并整合到design system中以实现系统性复用。

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?

分析目标范围以识别可提取的机会：

查找design system：定位你的design system、组件库或共享UI目录（可grep搜索"design system"、"ui"、"components"等关键词）。了解其结构：
- 组件的组织方式和命名规范
- Design token的结构（如果存在的话）
- 文档规范
- 导入/导出规范
重要提示：如果不存在design system，创建前请先询问需求，优先确认期望的存放位置和结构。
识别模式：查找以下内容：
- 重复组件：被多次使用的相似UI模式（按钮、卡片、输入框等）
- 硬编码值：应该被封装为token的颜色、间距、排版、阴影等值
- 不一致的变体：同一个功能存在多种实现（比如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.

制定系统性的提取方案：

重要提示：Design system是逐步迭代增长的，只提取当前明确可复用的内容，不要提取所有未来可能会复用的内容。

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：创建的tokens需满足：
- 清晰的命名（基础token vs 语义化token）
- 合理的层级和组织方式
- 每个token的使用场景说明
模式：为模式编写文档，包含：
- 该模式的适用场景
- 代码示例
- 变体和组合用法

禁止操作：

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.

更新design system文档：

请记住：优秀的design system是活的系统，在模式出现时就进行提取，认真优化，并持续维护。