用途
impeccable-normalize 是 impeccable.style /normalize 工作流的纯技能(skills-only)等价版本,用于在只有技能、没有原始命令环境的情况下运行同一套规范化流程。它的目标是把某个前端功能或界面重新设计、调整到与项目既有设计系统完全一致,覆盖设计标准、美学方向与已建立的模式。该技能面向前端与 UI 设计任务。
主要能力
该技能以“前端设计原则”作为基础护栏,并把用户提到的命令参数当作范围提示(scope hints)。当上下文缺失时,它会先提出澄清问题,而不是自行猜测设计系统原则。
其工作流程分为三个阶段:
规划
在动手修改之前,先深入理解上下文:
- 发现设计系统:搜索设计系统文档、UI 指南、组件库或样式指南(例如检索 “design system”“ui guide”“style guide” 等),并彻底研读,直到理解核心设计原则与美学方向、目标受众与用户画像、组件模式与约定、设计令牌(颜色、排版、间距)。
- 分析当前功能:评估哪些做法有效、哪些无效,找出偏离设计系统模式之处,区分外观问题与功能问题,并判断根因是缺少令牌、一次性实现,还是概念上的不一致。
- 制定规范化计划:明确哪些组件可以替换为设计系统等价物、哪些样式应改用设计令牌而非硬编码值、UX 模式如何匹配既有用户流程。
该阶段强调:优秀的设计是有效的设计,应优先保证 UX 一致性与可用性,而不只是视觉打磨;要先为用例与用户画像思考最佳体验。
执行
系统性地处理以下维度中的不一致:
- 排版:使用设计系统的字体、字号、字重与行高,用排版令牌或类替换硬编码值。
- 颜色与主题:应用设计系统颜色令牌,移除破坏调色板的一次性颜色选择。
- 间距与布局:使用间距令牌(外边距、内边距、间隙),与网格系统和既有布局模式对齐。
- 组件:用设计系统组件替换自定义实现,确保 props 与变体符合既有模式。
- 动效与交互:让动画时长、缓动与交互模式与其他功能保持一致。
- 响应式行为:确保断点与响应式模式符合设计系统标准。
- 无障碍:核对对比度、焦点状态、ARIA 标签是否符合设计系统要求。
- 渐进式披露:让信息层级与复杂度管理匹配既有模式。
同时明确列出禁止事项:在设计系统已有等价物时创建新的一次性组件;对应当使用设计令牌的值进行硬编码;引入偏离设计系统的新模式;为视觉一致性而牺牲无障碍。该列表并非穷尽,仍需自行判断所有需要规范化的区域。
清理
规范化之后保证代码质量:
- 整合可复用组件:若创建了应共享的新组件,将其移入设计系统或共享 UI 组件路径。
- 删除孤立代码:清理因规范化而废弃的未使用实现、样式或文件。
- 验证质量:按仓库指南执行 lint、类型检查与测试,确保规范化未引入回归。
- 保持 DRY:查找重构过程中引入的重复并合并。
使用方式
该技能以技能形式运行,替代原始的 Impeccable /normalize 命令工作流。使用时,用户可提供命令参数作为范围提示;技能会先检索并研读设计系统资料,再分析当前功能、制定计划并执行规范化,最后进行清理与质量验证。当上下文不清晰时,技能会提出澄清问题。
适用场景
适用于前端与 UI 设计任务,尤其是需要让某个功能或界面与既有设计系统对齐、消除视觉与交互不一致、统一设计令牌与组件用法的场景。
限制
资料未提供该技能的安装命令、具体平台支持、收费或价格信息,这些内容暂未提供。