用途
Refactoring UI Skill 是一个 UI 设计顾问技能，其知识基础来自 Adam Wathan 与 Steve Schoger 所著的《Refactoring UI》九章内容。它帮助用户在设计或改进界面时应用该书的设计原则，也可用于评审现有设计或代码并给出改进建议。
两种工作模式
该技能提供两种模式：
- 设计应用（Design Application）：当用户要求创建、设计、构建、设置样式或实现 UI 时使用，帮助应用设计原则来创建或改进 UI 组件与布局。
- 设计评审（Design Review）：当用户要求评审、审计、改进、修复或重构 UI 时使用，分析现有设计或代码并推荐改进。
如果请求不明确，技能会简短询问用户偏好哪种模式。
设计应用模式的主要流程
设计应用模式遵循以下决策流程：
- 从功能出发，而非美学：先设计功能而非布局；先做低保真；不要一次设计太多，采用设计→构建→设计→构建的短周期；选择个性（活泼或严肃、圆角或直角、多彩或柔和）；用系统约束选择（字号刻度、间距刻度、调色板）。
- 建立视觉层级：通过三个杠杆控制层级——尺寸、字重、颜色。原则包括：不要仅依赖字号；通过弱化周围元素来强调目标；标签是次要的，应弱化标签、强调数值；将视觉层级与文档层级分离；平衡字重与对比度；语义是次要的；在小尺寸下用颜色作为强调杠杆。文中给出了产品卡片和定价卡片的层级示例。
- 应用布局与间距：定义受约束的间距刻度（4px、8px、12px、16px、24px、32px、48px、64px、96px、128px、192px、256px）。原则包括：从过多留白开始再删减；不必填满整个屏幕；网格并非万能；相对尺寸不会缩放；避免模糊间距。
- 设计文字：定义受约束的字号刻度（12px、14px、16px、18px、20px、24px、30px、36px、48px、60px、72px）。原则包括：使用优质字体；行宽保持 45–75 字符；行高与字号成反比；不要居中长文本；表格中数字右对齐；使用字距调整；并非每个链接都需要颜色。
- 构建色彩系统：使用 HSL 而非 hex/RGB；需要比想象中更多的颜色（灰阶 8–9 个色阶、主色 5–10 个色阶、强调色各 5–10 个色阶，总计 40–80 种颜色）；构建色阶的方法；原则包括：不要在彩色背景上使用灰色文字；对比度需满足 WCAG AA（正文 4.5:1，大文本 3:1）；感知亮度因色相而异；深色背景需翻转明度。
- 创建深度：定义 5 级阴影层级（xs、sm、md、lg、xl），并给出每级的使用场景与示例值。原则包括：组合两个阴影；凸起元素用阴影；凹陷元素变暗；重叠元素创建层次；越亮越近、越暗越远；用阴影作为交互提示。
- 处理图片：图片上文字的处理技术（半透明叠加、降低图片对比度/亮度、着色、文字阴影、半透明背景）；原则包括：不要放大缩小图标；不要缩小截图；控制用户上传内容。
- 收尾润色：增强默认样式；添加强调边框；装饰背景；设计空状态；减少边框；跳出框架思考。
设计评审模式
评审模式使用 references/review-checklist.md 中的完整清单。评审前先评估整体质量：如果组件展现了扎实的设计系统基础（间距/字号/颜色的 CSS 自定义属性、系统化刻度值、清晰层级），应在总结中明确指出，不要为了填充模板而制造问题。文中列出了优秀设计的指标（设计令牌系统、三级文字颜色层级、双层阴影、小尺寸下颜色+字重作为强调杠杆、价格卡片中的倒置层级、适当的字距）。
评审流程包括六个扫描：层级扫描、间距扫描、排版扫描、色彩扫描、深度扫描、润色扫描。
评审输出格式包含：总结、层级问题、布局/间距问题、排版问题、色彩问题、深度问题、收尾润色、建议（按优先级排序并附具体章节引用）。
常见反模式
文中列出了需要标记的常见反模式，例如：仅依赖字号建立层级、层级扁平、任意间距值、彩色背景上的灰色文字、动画布局属性、到处是边框、没有字号刻度、使用原始 hex 颜色、缩放图标、空状态为空、标签比数值更醒目、主操作按钮字重 400。
具体建议
当识别出层级问题时，始终提供具体数值（px/字重/颜色），而非仅说“放大一点”或“用更浅的颜色”。文中给出了扁平产品卡片的层级修复示例。
通用准则
层级优先；系统优于一次性；约束选择；个性重要；默认可访问；少即是多；用真实内容测试。
参考资料
- 详细设计令牌参考：references/api_reference.md
- 评审清单：references/review-checklist.md
限制
该技能的官方文本未提供，以上内容基于所给资料整理。资料中未提及收费、价格、平台支持范围或具体安装步骤等信息，暂未提供。