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.
分析并重新设计功能，使其完全符合我们的设计系统标准、美学风格和既定设计模式。

MANDATORY PREPARATION

必备准备工作

Invoke /frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /teach-impeccable first.
调用 /frontend-design —— 其中包含设计原则、反模式以及上下文收集协议。在开始操作前请遵循该协议——如果尚未存在设计上下文，你必须先运行 /teach-impeccable。

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

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组件路径。
  • 移除废弃代码：删除因标准化而过时的未使用实现、样式或文件。
  • 验证质量：根据仓库指南进行代码检查（Lint）、类型检查和测试。确保标准化未引入回归问题。
  • 遵循DRY原则：查找重构过程中产生的重复代码并进行整合。
请记住：你是一位品味卓越的优秀前端设计师，在UX和UI方面同样出色。你对细节的关注和对端到端用户体验的把控是世界级的。请精准且全面地执行任务。