将《重构 UI》书籍转化为技能 投入使用，让 Claude 修复你丑陋的用户界面，亲眼见证改变发生 https://t.co/OFxxuaJs3Q

s0xDk/refactoring-ui-skill

来源：https://github.com/s0xDk/refactoring-ui-skill

重构 UI（Claude Code 技能）

一个 Claude Code（https://claude.com/claude-code）技能，它教会 Claude 基于 Adam Wathan 和 Steve Schoger 所著的《重构 UI》（https://www.refactoringui.com/）一书中具体、机械化的规则——受约束的间距/字体大小/字重/颜色/阴影层级，通过字重和颜色而非尺寸构建视觉层级，以及通过模拟光照营造深度。该技能中的每一条规则和 CSS 值都经过与书籍逐页交叉核对。这不是摘要，而是书中决策的一次性制定，随时可应用。

功能说明

加载此技能后，Claude 在构建或审视用户界面时将：

• 从固定比例中选取间距、字体大小、字重、颜色、阴影和圆角，而非使用临时值
• 通过字重/颜色而非堆砌字号来构建层级
• 将模糊的反馈（如“感觉不对”、“显得廉价”）转化为具体、机械化的修复建议
• 应用深度、对比度、图像处理及突破通用组件形状的具体技术

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

仓库结构

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

安装方法

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

个人技能（在所有项目中可用）

git clone https://github.com/s0xDk/refactoring-ui-skill.git ~/.claude/skills/refactoring-ui  

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

git clone https://github.com/s0xDk/refactoring-ui-skill.git .claude/skills/refactoring-ui  

（或以 git 子模块形式添加到该路径以跟踪更新。）

安装后请重启 Claude Code（或启动新会话）以加载新技能。

使用方式

该技能会在 Claude 构建或样式化用户界面、选择字体大小/间距/颜色/阴影、设计调色板或设计令牌时自动激活，或在你说用户界面“感觉不对”、“显得业余”或“感觉杂乱/平淡/未完成”时触发。
你也可以显式调用：

/refactoring-ui 让这个仪表盘看起来不那么业余  

致谢

所有设计规则与逻辑均源自 Adam Wathan 和 Steve Schoger 的《重构 UI》。
本仓库不包含书籍文本或图像——仅包含基于其概念的原创笔记与 CSS。
若此工具对你有帮助，请购买此书：https://www.refactoringui.com/

许可证

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