Refactoring UI Skill：把设计书变成 AI 的肌肉记忆，让 Claude 直接产出专业级界面
> 一个将《Refactoring UI》设计规则编码为 Claude Code Skill 的工具，让 AI 自动应用间距、色彩、层级和光影约束，生成或修复专业级界面。
## 痛点：AI 写代码很快，但设计总是“差一口气”
如果你用 Claude 或 Cursor 生成过前端界面，一定有过这种体验：
- 按钮、卡片、表单都齐了，功能也正常，但整体看起来就是“业余”——间距忽大忽小，颜色饱和度刺眼，阴影像浮在空中，字体大小没有节奏。
- 你试图用自然语言纠正：“把间距调小一点”“颜色柔和点”“加一点层次感”，但模型每次给出的结果都不稳定，甚至越改越乱。
- 你读过《Refactoring UI》那本书，知道那些设计原则（比如用 4px 网格、用颜色和字重而不是边框来分层、阴影要模拟光源），但手动一条条检查每个组件太费时间，而且你也不是全职设计师。
根本原因是：大模型虽然“看过”无数设计，但没有被显式地注入一套可操作的、系统化的设计决策规则。通用提示词只能得到“平均水平的 UI”，而不是“经过深思熟虑的设计”。
## 解决方案：把设计规则变成代码技能（Skill）
`s0xDk/refactoring-ui-skill` 是一个针对 Claude Code（以及支持 Skill 机制的 Claude 系工具）的 Skill 包。它把《Refactoring UI》这本书中最重要的 20 多条具体设计规则，用结构化的方式（YAML 配置 + 规则文本 + 输出要求）编码成 AI 可以直接遵循的“思考框架”。
当你启用这个 Skill 后，Claude 在生成或修改界面时，会主动应用以下类型的约束：
- **间距**：只使用 4px、8px、12px、16px、24px、32px、48px、64px、96px 等基于 4 的倍数，禁止随意写 13px、17px 这种值。
- **颜色**：从预设的调色板中选色（主色、中性色、功能色），避免纯黑（#000）和纯白（#fff），使用带灰度的中性色。
- **字重与字号**：标题用 600/700 字重，正文用 400，字号层级严格遵循 12/14/16/20/24/32/48 等阶梯。
- **阴影**：模拟光源来自上方，阴影的透明度、模糊半径和偏移量要符合物理直觉，而不是随意 `box-shadow: 0 0 10px #ccc`。
- **层级**：通过颜色对比度和字重来建立视觉层级，而不是依赖边框和分隔线。
- **装饰**：避免过度圆角、渐变和描边，保持简洁。
## 安装与使用
### 前提
- 你已经安装了 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)（或其他支持 Skill 的 Claude 客户端）。
- 有 Node.js 环境（可选，用于自动安装脚本）。
### 安装步骤
bash
# 克隆仓库到本地
git clone https://github.com/s0xDk/refactoring-ui-skill.git
# 进入目录
cd refactoring-ui-skill
# 复制 skill 到 Claude Code 的 skills 目录（具体路径取决于你的安装）
cp -r skill ~/.claude/skills/refactoring-ui
# 或者使用项目提供的安装脚本（如果有）
./install.sh
安装完成后，重启 Claude Code，Skill 会自动被识别。
### 使用示例
在 Claude Code 中，直接提出需求，比如：
text
> 用 React 写一个登录页面，包含邮箱、密码输入框和登录按钮。请使用 refactoring-ui-skill 中的设计规则。
Claude 会输出类似这样的代码（节选）：
jsx
// 使用 4px 网格间距
const styles = {
container: {
maxWidth: 400,
margin: '0 auto',
padding: 32, // 8 的倍数
backgroundColor: '#f7f7f7', // 不是纯白
borderRadius: 8,
boxShadow: '0 2px 4px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)', // 模拟顶部光源
},
input: {
width: '100%',
padding: '12px 16px',
marginBottom: 16,
border: '1px solid #ddd',
borderRadius: 6,
fontSize: 16, // 基准字号
},
button: {
background: '#4A5568', // 中性色按钮
color: '#fff',
padding: '12px 24px',
fontWeight: 600,
borderRadius: 6,
}
};
注意：输出中的间距、颜色、阴影、字重都严格遵循了规则，而不是随机生成。你也可以要求它“修复”现有的界面，只需把代码贴进去，并说明“用 refactoring-ui-skill 优化”。
## 核心亮点
### 1. 忠实还原经典设计书，但比人脑更严格
大多数开发者都听说过《Refactoring UI》的“四大原则”（间距、颜色、字体、阴影），但真正动手时容易妥协。这个 Skill 把规则变成了硬性约束：如果代码里出现 `margin: 13px`，Claude 会主动修正为 `12px` 或 `16px`。这种“零容忍”正是专业设计和业余设计的分水岭。
### 2. 无需设计经验，即可获得 80 分的界面
你不需要懂色彩理论或排版细节。只要安装 Skill，Claude 就能自动应用这些规则，让你的 React/Vue/HTML 项目瞬间脱离“学生作业”感。对于独立开发者、全栈工程师或 AI 生成 UI 的快速原型场景，价值极大。
### 3. 可定制，可扩展
Skill 的规则文件是开放的 YAML 和 Markdown，你可以按项目需求调整色板、间距倍数、字号阶梯，甚至添加自己的设计规范（比如公司品牌色）。这意味着它不仅仅是一个“书摘”，而是一个可演化的设计系统模板。
### 4. 与 Claude Code 深度集成，支持交互式修改
你可以在对话中直接说“把间距改成 8px 网格”“阴影太深了”，Claude 会基于 Skill 的规则上下文来调整，而不是像普通模型那样“猜”你的偏好。这种“规则对话”让设计微调变得可预测。
## 适用场景
- **快速原型开发**：用 Claude 生成页面时，避免返工。
- **前端组件库建设**：为团队生成规范一致的组件代码。
- **设计系统维护**：作为设计 token 的“代码版”参考。
- **非设计师的开发者**：让 AI 帮你做设计决策。
- **教学与学习**：观察 Claude 如何应用规则，反向学习设计原则。
## 同类项目对比
| 项目 | 定位 | 与本文项目的区别 |
|------|------|------------------|
| `vercel/ai-chatbot` | 生成 UI 的通用提示词库 | 没有强制规则，只提供示例，输出不稳定 |
| `shadcn/ui` | 现成组件库 | 需要手动复制组件，不适用于 AI 生成 |
| `Tailwind CSS` | CSS 框架 | 提供设计 token，但不指导 AI 如何组合 |
| `s0xDk/refactoring-ui-skill` | AI 设计规则引擎 | 专门针对 Claude Code，将书中的启发式规则编码为可执行约束 |
相比之下，这个 Skill 是“教 AI 钓鱼”，而不是“给 AI 一条鱼”。它让 AI 具备了设计判断力，而不是仅仅调用现成组件。
## 局限性
- 目前仅支持 Claude Code 生态，不适用于 OpenAI 或 Gemini。
- 规则偏“极简主义”，对于复杂品牌视觉（如动效、渐变）支持不足。
- 需要手动安装，且对 Claude Code 的版本有一定要求。
## 总结
如果你正在用 AI 辅助前端开发，并且对界面美感有要求，`refactoring-ui-skill` 是一个几乎零成本的“设计外挂”。它把一本经典书的智慧浓缩成 AI 的“肌肉记忆”，让你不用成为设计师，也能做出让人眼前一亮的界面。
项目地址：https://github.com/s0xDk/refactoring-ui-skill