Refactoring UI：一个 Claude Skill

一本 AI 编码助手真正能执行的 Web 界面设计规则书，外加一层诊断。从 《Refactoring UI》（Adam Wathan & Steve Schoger 著）里拆出来。

⚠️ 非官方独立项目，与原书作者无隶属关系，未经其审阅，也未获其背书。

它替代不了读原书，感兴趣建议读原版，写得真的好。

详见 ATTRIBUTION.md。

English →

---

目录

• 问题在哪
• 这是什么
• 用起来是什么样
• 安装
• 它还能干什么
• 几件需要前置说明的事
• 工作原理
• 许可证

问题在哪

AI 写得出合格的 HTML 和 CSS，做出来的界面却总是差点意思。虽然不是直接报错，但有时候会隐隐感觉“不对劲”。

譬如，什么都居中。间距从头到尾一个值。主色总是偏好靛蓝或紫色。每个操作一律做成实心按钮。没有空状态。

这些单拎出来看好像也没什么。但问题在于：生成是局部的，设计要全局看。

中间缺的东西，可以用一本“规则书”来补。

这是什么

市面上的 AI 设计工具大多在做生成：你描述一个界面，它给你一个界面。

这个 Skill 干的是反过来的活。它是约束层和诊断层，是规则书和评审员，不是造型师。

所以它跟那些生成工具不是竞争关系，是可以充分互补的：生成之前把约束交给它，生成之后让它把产物走查一遍。

Refactoring UI 是一本规则书，不是灵感书。几乎每一页都是 症状 → 机制 → 具体做法 → 具体数值，而且作者也写了 Tailwind CSS，所以从原则到代码这一段几乎没有损耗：书里的字号阶、间距阶、色阶，就是 Tailwind 的默认值。这个项目把整本书拆成了可执行规则，151 条，每一条都可追溯。

用起来是什么样

“帮我看看这个设置页，总觉得哪里不对但说不上来。”

它会先摸清你的技术栈，分别在桌面和移动端两种宽度下把页面渲染出来，然后按固定顺序换七个视角逐一扫查：层级 → 间距 → 排版 → 色彩 → 深度 → 图像 → 收尾。

顺序是有因果的。层级没理顺，什么算间距问题就会跟着变；而间距一改，“这里到底要不要加条边框”这个问题往往自己就没了。

它交回来的每一条 finding（问题项）都按严重度排好序，而且必须挂着规则号：

严重度	规则	现状	建议
P0	§3.6	标签间距等于组间距，标签离自己的输入框和离下一组一样远	组内mb-1，组间 mb-6
P1	§2.8	三个按钮都是主操作样式	只留一个主操作，其余改描边和链接
P1	§6.2	静态卡片用了shadow-lg	换shadow-sm。阴影表达的是 elevation，不是重要性

后面还有一段“系统性问题”，主要抓整体，譬如“当前项目缺少间距阶”。

安装

/plugin marketplace add edisonmbli/refactoring-ui-skill
/plugin install refactoring-ui

就这样，没有中心化的包仓库，也不往任何地方上传东西。marketplace add 做的事，是把仓库 clone 下来、读一下 .claude-plugin/marketplace.json；install 再从约定目录里把内容加载进来。所谓更新，其实就是换了个名字的 git pull：/plugin marketplace update refactoring-ui。

脚本要 Python 3.9+，零第三方依赖。没有 Python 也照样能用，色板算法有一份可以手工执行的说明。

其他安装方式：普通 Skill，以及非 Claude Code 的工具

Claude Code，作为普通 Skill

git clone https://github.com/edisonmbli/refactoring-ui-skill.git

cp -r refactoring-ui-skill/skills/refactoring-ui ~/.claude/skills/   # 个人级
cp -r refactoring-ui-skill/skills/refactoring-ui .claude/skills/     # 项目级

其他编码助手

插件机制是 Claude Code 专属的，但 Skill 本身不是。它就是一堆 Markdown，而且刻意做成了“一个索引 + 按需加载的引用文件”，任何能读文件的助手都能照着走，告诉它一次就行。

先把 Skill 放到一个固定位置：

git clone https://github.com/edisonmbli/refactoring-ui-skill.git .refactoring-ui

然后直接拷贝现成的指路文件，别手抄——description 触发这种指令，模型一忙就是最先被跳过的那种：

# Codex、Copilot、Windsurf、Cline/Roo、Aider，或者作为 Cursor 的 AGENTS.md 兜底
cp .refactoring-ui/templates/AGENTS.md AGENTS.md          # 或合并进你已有的那份

# Cursor 专用——靠文件类型匹配挂载，不靠 Cursor 从 description 猜意图
mkdir -p .cursor/rules && cp .refactoring-ui/templates/cursor/refactoring-ui.mdc .cursor/rules/