ui-revamp

ui-revamp 是一个前端 UI 改造技能（Skill），用于把快速生成、质量参差的界面系统性升级为生产级体验，适用于重设计、重做、打磨或改进任意 UI。它强调先理解再改动，并给出四阶段流程：阶段一深度审计，运行自动审计脚本 node ~/.claude/skills/ui-revamp/scripts/audit.js [path]，并做启发式评估、视觉清单与问题记录；阶段二计划与审批，必须在用户明确同意后才进入下一步；阶段三按顺序实施：基础层（CSS reset、设计令牌）、修复硬性规则、应用条件规则、动画系统、可访问性检查；阶段四质量验证，重跑审计脚本，并做模糊测试与眯眼测试。技能附有规则、动画系统、视觉系统、代码片段、审计清单、决策框架，以及 Tailwind 与 shadcn/ui 的专项参考。它包含一组快速自检项，例如搜索 CSS 中 transition 使用 linear、出现 scale(0)、使用 transition: all、按钮缺少 :active 反馈、圆角值多于 2 种、图标风格混用、输入框字号小于 16px、按钮缺少 focus 状态等，失败项达到 3 个以上说明需要完整改造。还提供动画时长与缓动建议，并列出不应做的事，如 UI 使用线性缓动、从 0 缩放、为键盘操作加动画、功能性 UI 动画超过 300ms、严重界面使用弹跳、同一视图出现多个主按钮样式。若存在项目级 ai/style.config.md 或用户级 ~/.claude/style.config.md，审计时会尊重其中的签名元素、品牌语气与反模式，不把有意设计当成缺陷。它可作为 /design 编排流程的生产打磨阶段运行，也可独立使用；更轻量的检查可用 /frontend-design polish。设计原则来源包括 Emil Kowalski、Rauno Freiberg、Steve Schoger、Sara Soueidan 与 Dan Saffer。通过标准包括自动审计 0 违规、模糊测试层级清晰、无线性缓动、无 scale(0)、圆角值不超过 2 种、间距一致、触控目标不小于 44px、交互元素有可见焦点态，并具备加载、空与错误状态。关于收费、价格与支持平台，资料中暂未提供；具体配置字段与完整规则内容以该技能自带参考文件为准。