把《Refactoring UI》变成可执行的代码：一个让AI自动遵循设计原则的Claude Skill
> 一个将《Refactoring UI》设计法则编码化，让Claude Code自动生成符合专业设计规范界面的Skill工具。
## 痛点：AI生成界面，为什么总差一口气？
如果你用过Claude、ChatGPT等工具生成网页或组件，大概率有过这种体验：**结构完整、功能齐全，但视觉上总透着一股“AI味”**——间距随意、颜色刺眼、字体大小毫无章法、阴影乱飞。这不是模型能力不足，而是缺少一套**可执行的、具体到数值的设计规范**。
大多数开发者并非不懂设计，而是缺少系统性的设计决策框架。而《Refactoring UI》这本书恰好提供了这样一套框架，但它是一本300多页的书，AI模型虽然读过，却很难在生成代码时**逐条遵守**那些抽象原则（比如“不要用纯黑色”“间距要成倍递增”）。
`s0xDk/refactoring-ui-skill` 正是为了解决这个gap而生：它把书中的设计原则**转译成Claude Code可以读取并执行的Skill文件**，让AI在生成或修改界面时，能像遵循代码规范一样遵循设计规范。
## 这个项目做了什么？
简单说，这是一个**Claude Code Skill**——Claude Code是Anthropic推出的终端编程助手，支持通过“Skills”机制加载特定领域的知识包。这个项目把《Refactoring UI》中的核心设计规则，拆解为：
- **间距系统**：使用4px基准的倍增尺度（4、8、12、16、20、24、32、40、48、64、80、96、128、160、192、224、256）
- **颜色系统**：定义主色、灰色、强调色的生成策略，包括色相偏移规则（如暖色偏黄、冷色偏蓝）
- **字体系统**：字号阶梯（12、14、16、18、20、24、30、36、48、60、72），以及字重对比规则
- **阴影系统**：基于光源方向的阴影层次，而非随意模糊
- **层级表达**：通过颜色深浅、字重、尺寸而非边框和分隔线来区分层级
- **深度模拟**：通过阴影方向和透明度模拟真实光照
这些规则不是写在README里的泛泛而谈，而是**结构化、可被程序读取的指令**，Claude在生成代码时会主动引用这些规则。
## 安装与使用：三步上手
### 前提条件
- 安装Claude Code（需Anthropic账号）
- 一个前端项目（React/Vue/纯HTML均可）
### 安装步骤
bash
# 1. 克隆项目到本地
git clone https://github.com/s0xDk/refactoring-ui-skill.git
# 2. 将skill目录复制到Claude Code的skills目录
# 在项目根目录下执行：
mkdir -p .claude/skills
cp -r refactoring-ui-skill/skill/* .claude/skills/
# 3. 在Claude Code中启用（在对话中直接引用）
### 使用示例
在Claude Code中，你可以这样要求：
# 使用refactoring-ui-skill来创建一个登录表单组件
请使用refactoring-ui-skill规则，生成一个React登录表单，包含邮箱、密码输入框和登录按钮。
Claude会自动应用以下规则：
- 输入框高度设为40px（间距尺度中的第5档）
- 按钮使用主色，文字用白色，边框圆角用4px
- 表单间距使用24px（尺度第7档）
- 错误提示用红色但明度降低，避免纯红刺眼
- 阴影使用两层：一层是底部环境光，一层是顶部定向光
如果你已有代码，还可以让它“修正”：
请用refactoring-ui-skill规则审查并修复当前页面的间距和颜色层级问题
它会输出具体的修改建议，例如：
diff
- padding: 15px; /* 不在尺度表内，应改为16px */
- color: #000; /* 纯黑应改为#1a202c这类深灰 */
- box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* 阴影太生硬，应分层 */
+ padding: 16px;
+ color: #2d3748;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08);
## 核心亮点：为什么它比“提示词工程”更有效？
### 1. 规则是结构化的，而非口头描述
很多开发者尝试用提示词让AI遵守设计规范，比如“请使用好的间距”“颜色要和谐”。但模型对“好”的理解是概率性的，每次生成可能不同。而Skill文件提供了**具体的数值表和判定标准**，模型可以精确匹配，输出稳定。
### 2. 覆盖了“隐性知识”
《Refactoring UI》中很多规则是反直觉的，比如：
- “不要用纯黑，用深灰”
- “阴影不是越大越好，而是越远越模糊”
- “强调文字用颜色+字重，而不是下划线”
- “按钮的层级通过颜色饱和度区分，而不是边框”
这些知识通过读书可以理解，但写代码时容易忘。Skill让它们成为默认约束。
### 3. 可组合、可扩展
Skill文件是纯Markdown+YAML格式，你可以：
- 修改间距基数（比如从4px改为8px）
- 添加品牌色板
- 添加组件级规则（如导航栏、卡片）
- 与其他Skill组合使用（如Tailwind规则）
### 4. 与Claude Code深度集成
不像其他工具需要单独运行，它直接嵌入Claude Code的工作流。你可以在同一个会话中“生成→审查→修复”循环，无需切换工具。
## 适用场景
- **前端开发者**：快速生成设计达标的UI原型，减少反复修改
- **全栈开发者**：后端逻辑写完，前端页面不再“惨不忍睹”
- **独立开发者**：没有设计师搭档，但想让产品看起来专业
- **AI辅助开发团队**：统一AI生成界面的设计标准，减少人工审查负担
- **设计系统维护者**：将设计规范编码化，让AI自动遵循
## 同类项目对比
| 项目 | 方式 | 优点 | 缺点 |
|------|------|------|------|
| **refactoring-ui-skill** | Claude Code Skill | 结构化、可编程、与IDE集成 | 仅限Claude Code |
| **纯提示词模板** | 在Prompt中写设计规则 | 通用 | 不稳定、易遗忘、长Prompt消耗token |
| **Tailwind CSS** | CSS框架 | 自带设计尺度 | 只解决样式，不解决布局和层级决策 |
| **Chakra UI / MUI** | 组件库 | 开箱即用 | 定制性受限，不教AI如何思考 |
| **Figma插件** | 设计工具 | 可视化 | 不生成代码 |
可以看出，这个项目的独特价值在于：**它不是给你一套组件，而是给AI一套“设计大脑”**。其他工具解决“写什么样式”，它解决“为什么这样写”。
## 深入技术细节：Skill文件内部结构
项目主要包含以下文件：
refactoring-ui-skill/
├── SKILL.md # 主入口，定义技能描述和触发条件
├── rules/ # 按主题划分的规则文件
│ ├── spacing.md # 间距尺度表
│ ├── typography.md # 字体层级
│ ├── color.md # 调色板生成策略
│ ├── shadow.md # 阴影与深度
│ └── hierarchy.md # 视觉层级规则
└── examples/ # 示例代码和对比
以 `spacing.md` 为例，它不只是写“间距要一致”，而是：
markdown
## 间距尺度表
- 基础单位：4px
- 有效值：4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192, 224, 256
- 规则：
- 元素内部padding：使用8px或16px
- 元素之间margin：使用16px或24px
- 区块间距：使用32px或48px
- 页面级间距：使用64px或80px
- 禁止：使用不在表中的任意值（如13px、17px）
这种精确性让AI在生成时能做出**确定性选择**，而不是“凭感觉”。
## 实际效果评测
我实际测试了三个场景：
1. **生成一个定价卡片组件**：默认Claude生成的卡片间距混乱，按钮颜色刺眼；使用Skill后，间距层次分明，按钮用了主色+暗色hover，阴影自然。
2. **修复一个现有页面**：原页面用了纯黑文字、红色错误提示、大阴影。Skill修复后，文字变为深灰，错误提示变为暗红，阴影分层。
3. **生成一个完整仪表盘**：Skill让数字、图表、卡片之间的层级清晰，标题用600字重+大字号，数据用500字重+中等字号，辅助说明用400字重+灰色。
整体效果接近中级设计师水平，远高于默认AI输出。
## 局限与展望
- **仅限Claude Code**：如果你用Cursor或Copilot，暂时无法直接使用（但可以借鉴规则自己实现）
- **规则覆盖有限**：目前主要覆盖视觉基础，对于复杂布局（如响应式、栅格）和动效没有涉及
- **需要人工复核**：AI仍可能在特殊场景下过度应用规则（如小屏幕上的间距过大）
未来如果作者加入响应式规则、暗色模式规则，以及组件库特定规则，这个项目会成为AI前端开发的标配工具。
## 总结
`s0xDk/refactoring-ui-skill` 是一个**小而精**的项目，它没有发明新设计体系，而是把一本经典设计书变成了AI可以执行的代码。对于被“AI生成界面太丑”困扰的开发者，这是一个立竿见影的解决方案。它证明了：**设计规范不是玄学，而是可以编码的工程资产**。
如果你在使用Claude Code做前端开发，强烈建议尝试一下。即使不用Claude Code，阅读它的规则文件本身也是一次很好的设计复习。
**项目地址**：https://github.com/s0xDk/refactoring-ui-skill