Back to Details

impeccable-normalize

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Impeccable /normalize

Impeccable /normalize

Run the original Impeccable 
/normalize
workflow in a skills-only environment.
  • Apply 
    frontend-design
    principles as baseline guardrails.
  • Treat command arguments mentioned by the user as scope hints.
  • Ask clarifying questions when context is missing.
Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns.
在纯Skill环境中运行原版Impeccable 
/normalize
工作流。
  • 以
    frontend-design
    原则为基准约束。
  • 将用户提及的命令参数视为范围提示。
  • 当上下文缺失时，提出澄清问题。
分析并重新设计功能，使其完全符合我们的设计系统标准、美学风格和既定模式。

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方面同样擅长。你对细节的关注和对端到端用户体验的洞察力是世界级的。请精准、彻底地执行。