用途:将功能界面重新对齐到设计系统标准,恢复间距、字体、颜色、交互与层级的一致性。规范化不只是视觉清理,而是让界面重新与系统“说同一种语言”。
主要能力:审计当前功能与设计系统的偏差,区分外观问题与功能问题,定位根因(缺失令牌、一次性实现或概念错位);按排版、颜色与主题、间距与布局、层级、组件、动效与交互、常规 UX 模式、响应式行为、无障碍、目标尺寸与放置、渐进披露等维度系统修正;在遗留或混合系统中,兼顾低风险升级策略。
使用方式:先阅读 frontend-design 并遵循其上下文收集协议,复用已有上下文,仅就关键缺口提问。搜索设计系统文档、UI 指南、组件库或样式指南,理解设计原则、目标用户、组件约定与设计令牌。分析当前功能的偏差与根因,制定规范化计划,明确哪些组件可替换为设计系统等价物、哪些样式应改用令牌、哪些交互偏离了产品惯例。执行后清理代码:合并可复用组件、删除孤立代码、按仓库规范做 lint、类型检查与测试,并消除重复。
限制与禁止:不得在设计系统已有等价物时新建一次性组件;不得硬编码本应使用设计令牌的值;不得引入偏离设计系统的新模式;不得为视觉一致性牺牲无障碍;不得只让界面看起来相似却层级不清。文档与实现冲突时,先确认哪一方代表目标再改动。
适用场景:用户提到一致性、设计漂移、样式不匹配,或功能处于遗留系统、新旧混合流程、部分迁移中时。具体命令、安装方式与平台信息暂未提供。