Back to Details

i-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.
分析并重新设计功能，使其完美匹配我们的Design System标准、美学风格以及既定模式。

MANDATORY PREPARATION

强制准备步骤

Invoke /impeccable — 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 /impeccable teach first.
调用 /impeccable —— 它包含了设计原则、反模式以及Context Gathering Protocol。在继续操作前请遵循该协议——如果尚未存在设计上下文，你必须先运行 /impeccable teach。

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. 了解Design System：搜索Design System文档、UI指南、组件库或风格指南（grep关键词如"design system"、"ui guide"、"style guide"等）。充分研究直到你理解：
    • 核心设计原则和美学方向
    • 目标受众和用户画像
    • 组件模式和规范
    • Design Token（颜色、排版、间距）
    关键提醒：如果有内容不明确，直接询问，不要猜测Design System的原则。
  2. 分析当前功能：评估现有内容的优缺点：
    • 它在哪些地方偏离了Design System模式？
    • 哪些不一致是表层的视觉问题，哪些是功能层面的？
    • 根本原因是什么——缺少Token、一次性实现，还是概念层面的不一致？
  3. 制定规范化计划：定义具体的变更内容，让功能符合Design System要求：
    • 哪些组件可以替换为Design System提供的等效组件？
    • 哪些样式需要使用Design 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.
系统性地解决以下所有维度的不一致问题：
  • 排版：使用Design System规定的字体、字号、字重和行高。用排版Token或类名替换硬编码值。
  • 颜色与主题：应用Design System的颜色Token，移除破坏调色板的一次性颜色选择。
  • 间距与布局：使用间距Token（外边距、内边距、间隙），对齐其他地方使用的网格系统和布局模式。
  • 组件：用Design System组件替换自定义实现，确保属性和变体匹配既定模式。
  • 动效与交互：让动画时长、缓动函数和交互模式与其他功能保持一致。
  • 响应式表现：确保断点和响应式模式符合Design System标准。
  • 无障碍：验证对比度、焦点状态、ARIA标签是否符合Design System要求。
  • 渐进式披露：让信息层级和复杂度管理匹配既定模式。
禁止操作：
  • 当存在Design System等效组件时，创建新的一次性组件
  • 硬编码本应使用Design Token的值
  • 引入与Design System偏离的新模式
  • 为了视觉一致性牺牲无障碍性
以上不是完整列表——请自行判断识别所有需要规范化的领域。

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.
规范化完成后，确保代码质量：
  • 整合可复用组件：如果你创建了应该共享的新组件，将其移动到Design System或共享UI组件路径下。
  • 移除无用代码：删除规范化后不再使用的实现、样式或文件。
  • 验证质量：按照仓库规范进行Lint检查、类型检查和测试，确保规范化没有引入回归问题。
  • 保证DRY原则：查找重构过程中引入的重复代码并进行整合。
请记住：你是一位品味卓越的优秀前端设计师，UX和UI能力同样出众。你对细节的关注度和对端到端用户体验的洞察力是世界一流的，请精准、全面地执行。