Refactoring UI（Claude Code 技能）

一个 Claude Code 技能，教给 Claude 来自 Adam Wathan 和 Steve Schoger 所著 Refactoring UI 一书中的具体机械规则——约束间距/字体/颜色/阴影比例、通过字重和颜色而非大小实现视觉层级，以及通过模拟光线产生深度。

本技能中的每一条规则和 CSS 值都已逐页与书籍核对。它不是摘要——而是书的决策，一次成型，随时可用。

它能做什么

加载此技能后，Claude 在样式设计或审查 UI 时将：

• 从固定比例中选择间距、字号、字重、颜色、阴影和圆角，而非临时指定数值
• 通过字重/颜色建立层级，而非堆砌字号
• 将模糊的抱怨（“看起来不对”“显得廉价”）诊断为具体的、机械性的修复
• 应用有关深度、对比度、图像和打破通用组件形状的具体技巧

它不包含书籍本身——参见 致谢。

仓库结构

SKILL.md                 技能：系统、流程、层级、硬性规则
references/
  systems.md              从头构建调色板（HSL、饱和度、色相旋转）
  diagnose.md             症状 → 修复对照表，用于改进现有 UI
  techniques.md           深度/光线模拟、字体、网格、图像
assets/
  tokens.css              一套完整的、经过对比度验证的起始令牌集

安装

Claude Code 从包含 SKILL.md 的文件夹加载技能。将此仓库克隆到下面的某个技能目录中——使用文件夹名称 refactoring-ui，以便与技能声明的名称匹配。

个人技能（可用于每个项目）

git clone https://github.com/<you>/refactoring-ui-skill.git ~/.claude/skills/refactoring-ui

项目技能（签入特定仓库，与团队共享）

git clone https://github.com/<you>/refactoring-ui-skill.git .claude/skills/refactoring-ui

（或者将其作为 git 子模块添加在该路径，以便跟踪更新。）

安装后重启 Claude Code（或开始新会话），以便其加载新技能。

使用方法

每当 Claude 构建或设计 UI 样式、选择字号/间距/颜色/阴影、设计调色板或设计令牌，或者当你说某个界面“看起来不对”“看起来业余”“显得杂乱/平淡/未完成”时，此技能会自动激活。你也可以显式调用它：

/refactoring-ui make this dashboard look less amateur

致谢

所有设计规则和推理均来自 Adam Wathan 和 Steve Schoger 的 Refactoring UI。本仓库不包含书籍原文或图片——仅包含基于其概念衍生的原创笔记和 CSS。如果你觉得它有用，请购买这本书：https://www.refactoringui.com/

许可证

本仓库内容采用 MIT 许可证（见 LICENSE）。不延伸至书籍本身。