normalize

分析并重新设计此功能，使其完全符合我们的设计系统标准、审美和既有模式。

必须完成的准备工作

调用 /impeccable — 其中包含设计原则、反模式和上下文收集协议。继续之前，请遵循该协议 — 如果尚无设计上下文，必须先运行 /impeccable teach。

---

计划

在进行更改之前，深入了解上下文：

1. 发现设计系统：搜索设计系统文档、UI 指南、组件库或风格指南（搜索 "design system"、"ui guide"、"style guide" 等）。彻底研读，直到理解以下内容：

   • 核心设计原则和审美方向
   • 目标受众和用户画像
   • 组件模式和约定
   • 设计令牌（颜色、字体排印、间距）

   至关重要：如果有不清楚的地方，请提问。不要猜测设计系统原则。

2. 分析当前功能：评估哪些方面有效，哪些无效：

   • 哪些地方偏离了设计系统模式？
   • 哪些不一致是外观问题，哪些是功能问题？
   • 根本原因是什么 — 缺少令牌、临时实现，还是概念上的不一致？

3. 制定规范化计划：明确需要进行哪些更改，才能使此功能符合设计系统：

   • 哪些组件可以替换为设计系统中的对应组件？
   • 哪些样式需要使用设计令牌，而不是硬编码值？
   • 如何让 UX 模式与既有用户流程保持一致？

   重要：优秀的设计应当有效。优先考虑 UX 一致性和易用性，而不只是视觉润色。首先根据使用场景和用户画像，思考最佳体验应当是什么样。

执行

系统地处理以下各方面的不一致：

• 字体排印：使用设计系统规定的字体、字号、字重和行高。用字体排印令牌或类替换硬编码值。
• 颜色与主题：应用设计系统的颜色令牌。移除破坏调色板一致性的个别颜色选择。
• 间距与布局：使用间距令牌（外边距、内边距、间隔）。与其他位置使用的网格系统和布局模式保持一致。
• 组件：用设计系统组件替换自定义实现。确保属性和变体符合既有模式。
• 动效与交互：使动画时长、缓动和交互模式与其他功能保持一致。
• 响应式行为：确保断点和响应式模式符合设计系统标准。
• 无障碍性：核验对比度、焦点状态和 ARIA 标签是否符合设计系统要求。
• 渐进式呈现：使信息层级和复杂度管理符合既有模式。

绝对不要：

• 在存在设计系统对应组件时创建新的临时组件
• 对本应使用设计令牌的值进行硬编码
• 引入偏离设计系统的新模式
• 为了视觉一致性而牺牲无障碍性

以上并非详尽清单 — 请运用判断力，找出所有需要规范化的方面。

清理

规范化后，确保代码质量：

• 整合可复用组件：如果创建的新组件适合共享，请将其移至设计系统或共享 UI 组件目录。
• 移除孤立代码：删除因规范化而不再使用的实现、样式或文件。
• 验证质量：按照仓库指南进行 lint、类型检查和测试。确保规范化没有引入回归问题。
• 确保 DRY：检查重构中是否引入重复，并进行整合。

请记住：你是一位才华出众、品味精湛的前端设计师，在 UX 和 UI 方面同样出色。你对细节的关注以及对端到端用户体验的把握都达到了世界一流水平。请精准、彻底地执行。