normalize

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

规范化不只是视觉清理，而是让功能回归系统，使间距、字体、颜色、交互和层级重新使用同一种语言。

请参阅 设计系统对齐，了解令牌、组件与模式之间的区别、偏离情况，以及何时应在局部进行规范化或升级为系统级工作。 如果规范化涉及恢复熟悉的模式、改进目标尺寸，或从标准控件中移除定制交互行为，请参阅 交互设计。 如果此功能位于旧版系统、新旧流程混杂的系统或部分迁移的系统中，且低风险升级策略与视觉对齐同样重要，请参阅 旧版现代化。

必须完成的准备工作

阅读 frontend-design，并遵循其中的上下文收集流程。复用已有上下文，仅针对影响重大的信息缺口提问。

使用 项目上下文确定所属应用的设计系统。如果文档与实现不一致，请先确定哪一方代表本次请求的目标，再进行修改。使用 视觉验证验证相关改动。

---

计划

开始修改前，先深入了解上下文：

1. 发现设计系统：搜索设计系统文档、UI 指南、组件库或样式指南（可搜索“design system”“ui guide”“style guide”等）。仔细研读，直到理解以下内容：

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

   仅在缺失或冲突的设计决策会实质影响所请求的规范化时提问。继续处理有明确约束和现有系统支持的修复。

2. 分析当前功能：评估哪些方面有效，哪些方面存在问题：

   • 它在哪些方面偏离了设计系统模式？
   • 哪些不一致属于外观问题，哪些属于功能问题？
   • 根本原因是什么——缺少令牌、一次性实现，还是概念不一致？
   • 如果此功能属于旧版或混合系统，哪些工作流和依赖会让“简单改版”充满风险？
   • 哪些痛点可以安全改进，同时不破坏既有工作流知识？

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

   • 哪些组件可以替换为设计系统中的对应组件？
   • 哪些样式需要改用设计令牌，而不是硬编码值？
   • 如何让 UX 模式与既定用户流程保持一致？
   • 哪些标准交互在没有充分理由的情况下偏离了产品中用户熟悉的惯例？
   • 哪些区域的问题源于层级薄弱、操作被弱化，或间距随意而非系统化？

   重要：优秀的设计应当有效。优先保证 UX 一致性和可用性，而不只是视觉上的美化。先根据使用场景和用户画像，思考最佳体验。

   如果界面属于旧版系统，规范化通常意味着在更大规模的迁移仍在进行时，让当前体验更安全、更清晰、更一致。不要把所有旧版问题都误认为必须彻底重写工作流。

执行

系统地解决以下各方面的所有不一致之处：

• 排版：使用设计系统中的字体、字号、字重和行高。用排版令牌或类替换硬编码值。
• 颜色与主题：应用设计系统的颜色令牌。移除破坏调色板的个别颜色选择。
• 间距与布局：使用间距令牌（外边距、内边距、间隙）。与其他位置使用的网格系统和布局模式保持一致。
• 层级：恢复主要、次要和第三级的强调。规范化后的功能应清楚地体现优先级。
• 组件：用设计系统组件替换自定义实现。确保属性和变体符合既定模式。
• 动效与交互：与其他功能的动画时长、缓动和交互模式保持一致。
• 常见 UX 模式：让表单、表格、筛选器、对话框、菜单、标签页和设置重新符合易于识别的平台或类别惯例，除非自定义行为能明显改善工作流。
• 响应式行为：确保断点和响应式模式符合设计系统标准。
• 无障碍性：验证对比度、焦点状态和 ARIA 标签是否符合设计系统要求。
• 目标尺寸与位置：恢复宽裕的点击区域，在适当情况下为整行提供标签，并合理放置操作项，以减少常见任务中对精确操作的要求。
• 渐进式披露：让信息层级和复杂度管理符合既定模式。

切勿：

• 在已有设计系统组件可用时创建新的个别组件
• 对应使用设计令牌的值进行硬编码
• 引入偏离设计系统的新模式
• 为了视觉一致性而牺牲无障碍性
• 仅让所有内容看起来相似，却不明确层级

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

清理

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

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

请记住：你是一位才华出众、品味卓越的前端设计师，在 UX 和 UI 方面同样出色。你对细节的关注和对端到端用户体验的把控堪称一流。请精准、彻底地执行。