AI 写的前端页面正在变得一眼可辨：紫蓝渐变背景、发光按钮、标题里嵌 emoji、”New ✨” 徽章、忽大忽小的间距。这不是错觉，是模型训练数据的平均值——大家都这么生成，结果就是所有 vibecoded 页面长得像同一个模板。上周我还在琢磨这事儿只能靠人肉改，10 月 29 日 GitHub 上就冒出来一个专门治它的东西：unslop，一个给 Claude Code 和 Codex 用的设计技能，三天冲到 3500+ star，11 月 1 日还在日榜上。它承诺的事很简单：把 AI 味儿的 UI 审计一遍，定个设计方向，然后按九个 pass 逐层改掉。
技能本质是一份 685 行的 markdown prompt（SKILL.md 加四个 reference 文件），CC-BY-4.0 协议，作者 Damir Sokolovsky 是设计师，在 X 上有个持续更新的 Unslopping 系列。既然是纯 prompt，那它就不该被锁在 Claude Code 里——我把它装进了 opencode，配了个免费模型，从造页面到改完页面全程真实跑了一遍。这篇文章记录完整过程和量化结果，包括一个模型自检报告翻车的小细节。
先装：三条路都通
仓库是 heydamir/unslop。Claude Code 用户复制技能目录即可：
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/
# 单项目安装则放进项目的 .claude/skills/Codex 用户在会话里输 $skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop，或者手动复制到 ~/.agents/skills/。这几个路径本质上都是往终端 Agent 的技能目录里放一份 SKILL.md，和之前改 Claude Code 源码定制行为那种改法相比，技能是官方支持的扩展位，升级不会被覆盖。
我用的 opencode 2.1.4（之前实测 TokenEconomizer的同一套环境），技能放进项目的 .opencode/skill/unslop/。opencode 会读取 SKILL.md 头部的 description 做技能注册，我在指令里明确要求应用 unslop，输出里能看到 → Skill "unslop" 的触发行，确认挂载生效。
想跟网页快照或生成改造过程视频，还要装 Playwright 和 ffmpeg；这两样纯粹可选，后面会说我这次就没装。
造一个无可救药的页面
技能要治什么病，得先有个病人。我手写了一个「重 slop」电商数据看板，故意把常见 AI 痕迹堆满：紫→蓝→紫三色渐变背景、两个模糊光晕 blob、渐变文字标题、发光的 “New ✨” 徽章加 pulse 循环动画、玻璃拟态卡片、emoji 当图标（🚀📊👥💎🔥 一共 16 个）、大写宽字距的标题、促销腔的 CTA（”提升 300% 效率！”）。然后用脚本给病灶定量，作为改造前的基线：
# 量化 slop 指标，运行环境：Python 3.13，任意系统
import re
src = open('dashboard.html').read()
for name, pat in [
('linear-gradient', r'linear-gradient'),
('radial-gradient', r'radial-gradient'),
('渐变文字', r'background-clip:\s*text'),
('彩色glow', r'box-shadow:[^;]*rgba'),
('text-shadow', r'text-shadow'),
('emoji', r'[\U0001F300-\U0001FAFF\u2600-\u27BF\u2B00-\u2BFF]'),
]:
print(name, len(re.findall(pat, src)))基线数据：linear-gradient 6 处、radial-gradient 2 处、渐变文字 2 处、彩色 glow 3 处、text-shadow 3 处、emoji 16 个、大写/宽字距 5 处。病得相当重，正好测技能的完整流程。
跑起来：免费模型 2 分 43 秒改完
命令一行（--auto 免去逐条确认，模型是 opencode 自带的免费档 GLM）：
opencode run --auto --model opencode/glm-5.3-flash-free \
"请应用 .opencode/skill/unslop/ 里的 unslop 技能处理 src/dashboard.html。\
我已经确认方向，直接执行全部九个 pass，不要等待确认。"说明一下环境：macOS（Apple M4 / 16GB），opencode 2.1.4，模型 opencode/glm-5.3-flash-free 花费 $0，全程 2 分 43 秒。技能流程里本来有一步”先给审计和方向、等用户确认再动手”，我在提示里明确说跳过等待，实际场景里建议别跳——方向（性格、世界、高光时刻、签名细节）定错了后面九个 pass 全要重来。
跑完先看它定的方向，说实话有点东西：产品是”给电商运营看的数据看板”，性格定为”清楚、准确、务实”，世界取”仪表台与办公桌”——中性色阶取 graphite，唯一 accent 是数据仪器的钴蓝 #1d4ed8；高光时刻选了热销商品排行（用销量占比细条让数据自己说话）；签名细节是标题旁一枚绿色实时状态点加 mono 时间戳。审计也全：非 4px 的任意间距值（23、17、29、37…）、三张兄弟卡片各不相同的 padding、无对比基准的涨幅、三连感叹号，逐条带位置列了出来。
改造后的量化对比：
指标 改造前 改造后
linear-gradient 6 0
radial-gradient 2 0
渐变文字 2 0
彩色 glow 3 0
text-shadow 3 0
emoji 16 0
大写/宽字距 5 0
backdrop-filter 1 0
font-weight 900 3 0全部归零。整个页面从紫渐变玻璃拟态换成浅色 graphite 界面：背景 #fafafa、白色卡片、8% 透明度的发丝线边框，钴蓝只出现在”升级 Pro”按钮和排行榜第一名的份额条两处。emoji 换成了 7 个内联 SVG 线条图标（16px / 1.5 描边 / 继承文字颜色），涨跌数字补上了”较上月”基准，”提升 300% 效率”这类不可验证的宣称被直接删掉，”错过再等一年!!!”改成了中性的事实陈述。
自检报告别全信：我抓到一个偏差
这里是我觉得整次实测里最值得写的一段。模型交上来的自检清单把”全部间距落在 4px 网格”勾成了 [x]，报告里白纸黑字写着”删除全部任意值”。我不放心，写了个脚本只查 margin/padding/gap/top/bottom/left/right/height/width 这些真间距属性，结果抓到 9 处非 4px 值。
逐条核对后，大部分是技能明文允许的例外：图标与标签的间距技能规定就是”8 或 10″，10px 合规；1px 是发丝线边框宽度；6px 是状态点这种小元素的尺寸，不是间距。但有一处是真偏差：按钮的 padding: 10px 16px，10 不在网格上（技能只允许小控件内 2px 微调，勉强能算擦边）。另外它声明用的 #1d4ed8 钴蓝、tabular-nums 数字等宽、正文零感叹号，我抽查全部属实——唯一的感叹号在 <!DOCTYPE html> 里。
结论很清晰：这份技能是 prompt，不是程序，模型执行得再好也没有强制力。自检清单是模型自己念给自己听的，交付前值得用脚本复核关键指标——上面那段 Python 脚本你直接就能拿去用。另一个诚实度细节：我的环境没有浏览器，技能流程里”渲染截图比对”那步做不了，模型主动在报告里写了”未做渲染比对，建议你在浏览器里开一眼”。headless 跑这个技能，最后人工开浏览器看一眼是必须的收尾。
什么时候别用它
三个不建议使用的场景，来自技能自身的设计逻辑和这次实测：
一是靠氛围吃饭的促销页。unslop 的方向是”安静的 chrome、单一 accent、删掉不可验证宣称”，这套审美对工具类产品是对的，但双 11 大促页的紫渐变和爆炸贴纸就是转化氛围本身，让 unslop 跑一遍等于把促销感全拆了。它的流程第一步会先问你方向，但你 headless 一次成稿时就没人拦着了。
二是已有成熟设计系统的项目。技能对这种情况有专门的 polish 模式（只修审计出的问题、不换方向），但如果你不明确说”保持品牌”，免费模型有可能自作主张全量重做。我这次就是明确给了方向才跳过确认，等于把保险拆了。
三是指望它替代设计师。它治的是”AI 味”，产出的是”干净、克制、有签名细节”，但方向的质量取决于它对你产品的理解——作者自己的话是”干净但换成任何产品都成立的界面是下一个模板”。同品类的Hallmark（42k+ star，57 项反模式检测加 21 套主题）走的是主题库路线，两者可以对照着试。
值得留下的三点
回到开头的问题：AI 生成 UI 的千篇一律，靠一个 prompt 能治多少？这次实测的答案是：病灶层面（渐变、glow、emoji、乱间距、促销腔）能全清，而且是免费模型就能做到的水平；但”有设计感”的上限取决于方向那五条线定得多准，这一步目前还得人来把关。行动建议收尾：用 AI 生成过落地页的，把技能装上跑一遍你现有页面，用脚本量化对比；团队里有多人 vibecoding 的，把这个技能放进项目目录统一 UI 下限；自己动手写 UI 的，读一遍它的 SKILL.md 本身——那 685 行是一份相当完整的设计走查清单，不用跑模型也值回票价。