当 Claude 读完《Refactoring UI》：让 AI 摆脱程序员审美

一、每个程序员都经历过的"审美车祸现场"

你让 Claude Code 生成一个落地页。功能全对，代码能跑，但打开一看：标题 36px 加粗、副标题 24px 灰色、正文 18px、按钮红配绿、卡片阴影糊成一团——典型的"程序员审美"。

诡异的是，每个元素单独拎出来都没错：字号是字号，颜色是颜色，阴影是阴影。可它们放在一起，就是透着一股廉价感。你说不上来哪里不对，只能含糊地讲一句："界面看起来有点廉价，改好看点。"然后 Claude 一通盲目调像素，越改越糟。

问题不在代码，在视觉决策没有系统。人靠感觉做设计，AI 就更只能靠感觉——而 AI 的"感觉"，是全网平庸 CSS 的平均值。

二、《Refactoring UI》到底教了什么

2018 年，Tailwind CSS 作者 Adam Wathan 和设计师 Steve Schoger 写了一本薄薄的书《Refactoring UI》，副标题就差把读者点名了：写给"会写代码但不懂设计"的开发者。

这本书的核心论点很反直觉：好设计不是天赋，是遵守规则。它把那些设计师"一看就知道"的东西，拆成了一条条可以机械执行的硬性规定：

• 先定比例尺，再动手：字号、间距、颜色全部从一个有限集合里选。比如字号只用 12 / 14 / 16 / 20 / 24 / 30 / 36，间距只用 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。永远不要出现 13px、17px 这种随手发明的数值。
• 层级不靠字号，靠字重和色彩深度：想让标题更突出？别急着加大字号，先试试加粗（400→700），或者把颜色从 slate-500 加深到 slate-900。视觉层级是"重量感"的对比，不是尺寸竞赛。
• 配色 60-30-10：60% 中性底色、30% 次要色、10% 强调色。页面花里胡哨，十有八九是强调色超标了。
• 阴影模拟光源：小而锐的阴影 = 元素贴近平面，大而柔的阴影 = 浮得更高。别给所有卡片套同一个阴影，那等于告诉用户"光从四面八方来"。
• 用 HSL 调色，不用取色器瞎点：固定色相，只调饱和度和明度，一套协调的配色就出来了。
• 对比度是硬指标：正文与背景对比度至少 4.5:1（WCAG 标准），这不是建议，是及格线。

看出来了吗？这些规则的共同点是：它们都是"约束"，而不是"灵感"。不需要审美，只需要执行。这恰恰是 AI 最擅长的事。

三、从书到技能：让 Claude 严守比例尺

最近 GitHub 上出现的一类项目，就是把上面这套规则直接编码成 AI 的"技能"。代表作是 gnurio/refactoring-ui-plugin（同生态还有 899ms 的同名实现），它把《Refactoring UI》的原则拆成了 10 个结构化技能：

外加一个 meta-refactor-ui 编排器，可以对一份设计稿做全量走查。在 Claude Code 里用法极其简单：

/refactor-ui --design="path/to/design.md"

它的工作机制值得玩味：每个技能都是一个 SKILL.md 文件，里面把规则写死——"标题只能从字号比例尺里选""正文对比度必须 ≥ 4.5:1""阴影按 elevation 分三档"。Claude 执行时没有自由发挥的空间，只能在预设的间距、字号、颜色和阴影比例尺中做选择。

这意味着，当你说"界面看起来有点廉价"时，它不再盲目调像素，而是按流程走查：先查层级（是不是全靠字号在硬撑？），再查配色（强调色是不是超了 10%？），再查阴影（光源是不是打架了？），最后基于 HSL 色彩逻辑和模拟光照原理，给出一套机械化、可解释的改进方案。每一步改动都能说出"为什么"，而不是"我觉得这样好看点"。

顺带一提，这类插件都明确声明与 Tailwind Labs 无关——是社区把书的方法论"编译"成了 AI 可执行的格式，书本身还是值得买一本的。

四、为什么"约束"比"创造力"更重要

LLM 生成前端代码时那种挥之不去的"通用模板感"，根子在训练数据：网上能爬到的 CSS，绝大多数是平庸的。模型做的是概率采样，每次都倾向于输出"最可能"的平庸解，而不是"最好"的设计。temperature 调得再低，也只是在平庸里选一个更确定的平庸。

refactoring-ui-skill 的价值，在于它承认了一个现实：指望 AI 突然长出审美是不现实的，但让 AI 严格执行一套成熟的方法论是完全可行的。这就好比代码 lint——我们从来不指望 linter 有"代码品味"，但 eslint --fix 确实让代码库下限大幅提高。这些设计技能，就是给 UI 做的 lint。

这也不是孤立现象。2026 年 AI 前端工具正在集体转向"约束驱动"：

• DESIGN.md：给 AI 立设计规矩的文档，相当于 UI 领域的 AGENTS.md；
• agent skills 生态（如 mblode/agent-skills 里的 ui-design / ui-audit）：把设计评审拆成可调用的技能；
• Stitch 这类生成式 UI 工具：背后同样是"先定设计系统，再生成页面"的路数。

范式已经很清楚了：AI 做设计的进化方向，不是追求虚无的创造力，而是对成熟方法论的像素级执行。创造力负责 0 到 1 的惊艳，约束负责 1 到 100 的不翻车——而绝大多数工程场景，恰恰只需要不翻车。

五、对独立开发者的意义

对于习惯用 Claude Code 构建产品的独立开发者，这个变化是实实在在的：相当于给你的 AI 雇员内置了一个从不疲惫的资深设计师，7×24 小时做设计评审。

以前的工作流是：AI 出一版 → 你凭感觉说"有点丑" → AI 凭感觉改 → 你继续凭感觉验收。感觉对感觉，方差巨大。现在的工作流是：AI 出一版 → 技能按规则走查 → 输出带解释的改进清单。工程实现从一开始就跑在正确的视觉轨道上，"廉价感"在萌芽阶段就被掐掉了。

更深一层，它解决的是独立开发者的结构性短板：我们不缺把功能做出来的能力，缺的是一套能落地、且不显业余的视觉决策系统。请不起设计师，学设计又太慢——那就别学了，直接把规则编译成 AI 的约束。审美可以外包给比例尺。

结语

下次当你想对 Claude 说"界面有点廉价"时，不妨先问自己一个问题：你是缺一个有品味的 AI，还是缺一套说得清的规则？

《Refactoring UI》八年前就给出了答案。现在，终于有人把答案写成了 AI 读得懂的格式。

本文选题来自 BlogPress 选题池，发布后同步归档。