normalize

概览

什么是 normalize 技能？

normalize 技能旨在审计并调整用户界面（UI）组件，使其符合您的设计系统标准，包括间距、设计令牌和视觉模式。它非常适合希望维护 UI 一致性、解决设计偏差或修正前端项目中样式不匹配的团队和设计师。

谁应该使用 normalize？

此技能最适合前端开发人员、UI/UX 设计师以及任何负责维护设计系统完整性的人。如果您发现不一致、过时的设计令牌或功能不再符合设计系统，normalize 提供了一个结构化的工作流程，帮助您将 UI 恢复到标准状态。

它解决了哪些问题

• 发现并纠正偏离设计系统标准的情况
• 帮助解决设计偏差和 UI 元素不匹配的问题
• 确保设计令牌、间距和模式的统一使用
• 提供可重复的 UI 规范化流程

使用方法

安装步骤

1. 使用以下命令安装该技能：

   npx skills add https://github.com/pbakaus/impeccable --skill normalize

2. 首先查看 SKILL.md 文件，了解详细的规范化工作流程。该文件涵盖准备、规划、执行和收尾阶段。

3. 如需更多背景信息，请查看相关文件，如 README.md、AGENTS.md、metadata.json，以及名为 rules/、resources/ 或 references/ 的文件夹。

工作流程概览

• 必备准备： 在进行更改前，调用 /frontend-design 以获取设计原则和上下文。如果没有设计上下文，请先运行 /teach-impeccable。
• 规划： 研究您的设计系统文档，分析当前功能，识别偏差。
• 执行： 应用更改，使 UI 与设计系统标准对齐，重点关注设计令牌、间距和模式。
• 收尾： 审查并记录更改，确保持续一致性。

何时使用 normalize

• 发现 UI 不一致或设计偏差时
• 设计系统重大更新后
• UI 审计期间或功能发布前

常见问题

normalize 到底做什么？

normalize 技能审计您的 UI，提供结构化方法，使组件与设计系统对齐，重点关注设计令牌、间距和视觉一致性。

使用 normalize 需要设计系统吗？

需要，normalize 在已有设计系统的情况下效果最佳。如果没有，技能建议先运行 /teach-impeccable，创建基础设计上下文。

我应该从哪里开始？

从 SKILL.md 文件开始，了解详细工作流程。通过 Files 标签浏览支持脚本和参考资料。

这个技能适合后端或代码逻辑规范化吗？

不，normalize 专注于 UI 设计和前端一致性，不适用于后端或非视觉代码的规范化。

我可以将工作流程适配到自己的工具吗？

可以，规范化流程灵活，可根据您的代码库、设计系统和团队实践进行定制。