Back to Details

normalize

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
分析并重新设计功能，使其完全符合我们的设计系统标准、美学风格和既定模式。

Plan

规划步骤

Before making changes, deeply understand the context:
  1. Discover the design system: Search for design system documentation, UI guidelines, component libraries, or style guides (grep for "design system", "ui guide", "style guide", etc.). Study it thoroughly until you understand:
    • Core design principles and aesthetic direction
    • Target audience and personas
    • Component patterns and conventions
    • Design tokens (colors, typography, spacing)
    CRITICAL: If something isn't clear, ask. Don't guess at design system principles.
  2. Analyze the current feature: Assess what works and what doesn't:
    • Where does it deviate from design system patterns?
    • Which inconsistencies are cosmetic vs. functional?
    • What's the root cause—missing tokens, one-off implementations, or conceptual misalignment?
  3. Create a normalization plan: Define specific changes that will align the feature with the design system:
    • Which components can be replaced with design system equivalents?
    • Which styles need to use design tokens instead of hard-coded values?
    • How can UX patterns match established user flows?
    IMPORTANT: Great design is effective design. Prioritize UX consistency and usability over visual polish alone. Think through the best possible experience for your use case and personas first.
在进行更改之前，先深入了解相关背景：
  1. 熟悉设计系统：查找设计系统文档、UI指南、组件库或样式指南（可通过搜索“design system”“ui guide”“style guide”等关键词）。全面学习直至理解以下内容：
    • 核心设计原则与美学方向
    • 目标受众与用户画像
    • 组件模式与约定
    • 设计Token（颜色、排版、间距）
    重要提示：若有不明确的地方，务必询问，切勿猜测设计系统原则。
  2. 分析当前功能：评估现有功能的优劣：
    • 哪些地方偏离了设计系统模式？
    • 哪些不一致性属于视觉层面，哪些属于功能层面？
    • 根本原因是什么——缺失设计Token、一次性实现还是概念理解偏差？
  3. 制定规范化计划：明确使功能与设计系统对齐的具体更改项：
    • 哪些组件可以替换为设计系统中的等效组件？
    • 哪些样式需要改用设计Token而非硬编码值？
    • 如何使UX模式与既定用户流程匹配？
    注意：优秀的设计是实用的设计。优先考虑UX一致性与可用性，而非仅关注视觉打磨。首先为你的使用场景和用户画像规划最佳体验。

Execute

执行阶段

Systematically address all inconsistencies across these dimensions:
  • Typography: Use design system fonts, sizes, weights, and line heights. Replace hard-coded values with typographic tokens or classes.
  • Color & Theme: Apply design system color tokens. Remove one-off color choices that break the palette.
  • Spacing & Layout: Use spacing tokens (margins, padding, gaps). Align with grid systems and layout patterns used elsewhere.
  • Components: Replace custom implementations with design system components. Ensure props and variants match established patterns.
  • Motion & Interaction: Match animation timing, easing, and interaction patterns to other features.
  • Responsive Behavior: Ensure breakpoints and responsive patterns align with design system standards.
  • Accessibility: Verify contrast ratios, focus states, ARIA labels match design system requirements.
  • Progressive Disclosure: Match information hierarchy and complexity management to established patterns.
NEVER:
  • Create new one-off components when design system equivalents exist
  • Hard-code values that should use design tokens
  • Introduce new patterns that diverge from the design system
  • Compromise accessibility for visual consistency
This is not an exhaustive list—apply judgment to identify all areas needing normalization.
系统地解决以下所有维度的不一致性：
  • 排版：使用设计系统指定的字体、字号、字重和行高。将硬编码值替换为排版Token或类。
  • 颜色与主题：应用设计系统的颜色Token。移除破坏调色板的一次性颜色选择。
  • 间距与布局：使用间距Token（外边距、内边距、间隙）。与其他地方使用的网格系统和布局模式保持一致。
  • 组件：将自定义实现替换为设计系统组件。确保属性和变体符合既定模式。
  • 动效与交互：使动画时长、缓动效果和交互模式与其他功能保持一致。
  • 响应式表现：确保断点和响应式模式符合设计系统标准。
  • 可访问性：验证对比度、焦点状态、ARIA标签是否符合设计系统要求。
  • 渐进式披露：使信息层级和复杂度管理与既定模式匹配。
绝对禁止：
  • 当设计系统存在等效组件时，仍创建新的一次性组件
  • 对应使用设计Token的值进行硬编码
  • 引入与设计系统不符的新模式
  • 为了视觉一致性而牺牲可访问性
以上并非详尽列表，请根据判断识别所有需要规范化的领域。

Clean Up

代码清理

After normalization, ensure code quality:
  • Consolidate reusable components: If you created new components that should be shared, move them to the design system or shared UI component path.
  • Remove orphaned code: Delete unused implementations, styles, or files made obsolete by normalization.
  • Verify quality: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions.
  • Ensure DRYness: Look for duplication introduced during refactoring and consolidate.
Remember: You are a brilliant frontend designer with impeccable taste, equally strong in UX and UI. Your attention to detail and eye for end-to-end user experience is world class. Execute with precision and thoroughness.
规范化完成后，确保代码质量：
  • 整合可复用组件：若你创建了应共享的新组件，请将其移至设计系统或共享UI组件目录。
  • 移除冗余代码：删除因规范化而过时的未使用实现、样式或文件。
  • 质量验证：按照仓库指南进行代码检查、类型校验和测试，确保规范化未引入回归问题。
  • 遵循DRY原则：查找重构过程中产生的重复代码并进行整合。
请记住：你是一位才华横溢的前端设计师，拥有无可挑剔的审美，在UX和UI领域均能力出众。你对细节的关注和对端到端用户体验的把控堪称世界级。请精准、全面地执行。