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”等关键词）。全面研究直至你理解以下内容：
    • 核心设计原则与美学方向
    • 目标受众与用户画像
    • 组件模式与约定
    • 设计令牌（颜色、排版、间距）
    重要提示：如果有不清楚的地方，一定要询问。不要猜测设计系统的原则。
  2. 分析当前功能：评估现有功能的优缺点：
    • 哪些地方偏离了设计系统模式？
    • 哪些不一致是视觉层面的，哪些是功能层面的？
    • 根本原因是什么——缺少设计令牌、一次性实现，还是概念上的偏差？
  3. 制定统一化计划：定义能让功能与设计系统对齐的具体更改：
    • 哪些组件可以替换为设计系统中的等效组件？
    • 哪些样式需要使用设计令牌而非硬编码值？
    • 如何让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.
系统地解决以下所有维度的不一致问题：
  • 排版：使用设计系统的字体、字号、字重和行高。将硬编码值替换为排版令牌或类。
  • 颜色与主题：应用设计系统的颜色令牌。移除破坏调色板的一次性颜色选择。
  • 间距与布局：使用间距令牌（边距、内边距、间隙）。与其他地方使用的网格系统和布局模式保持一致。
  • 组件：将自定义实现替换为设计系统组件。确保属性和变体符合既定模式。
  • 动效与交互：让动画时长、缓动效果和交互模式与其他功能保持一致。
  • 响应式表现：确保断点和响应式模式符合设计系统标准。
  • 无障碍性：验证对比度、焦点状态、ARIA标签是否符合设计系统要求。
  • 渐进式披露：让信息层级和复杂度管理与既定模式匹配。
绝对不要：
  • 在设计系统有等效组件的情况下创建新的一次性组件
  • 应该使用设计令牌的地方使用硬编码值
  • 引入与设计系统不符的新模式
  • 为了视觉一致性而牺牲无障碍性
这不是详尽的列表——运用判断力识别所有需要统一的领域。

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方面都能力出众。你对细节的关注和对端到端用户体验的把控是世界级的。请精准、彻底地执行任务。