unslop：给"AI 味"界面做一次红线条审的 Claude Code 技能

一、一个具体的场景

你让 AI 花了 40 分钟做出一个数据看板。代码跑起来了，布局也像模像样：深色背景、紫色到蓝色渐变的标题文字、每个卡片标题前面挂一个 emoji、按钮发着微弱的光、图表用彩虹色柱状、角落里有个永远在呼吸的加载光圈。你截图发给同事，对方憋了半天，只回了一句："这个……是 AI 做的吧？"

这不是你代码写得差。这是当前 AI 生成界面的集体病症：紫色渐变、外发光、emoji 标签、New ✨ 徽章、全大写加宽字距的分类标题、复制粘贴的营销文案、随手写的 mt-[13px]。它们出现在几乎每一个 AI 生成的界面上，而且每次出现的方式都一模一样。

unslop（作者 Damir Sokolovsky，X 上 @heydamir）要解决的就是这件事。它不是一个 UI 组件库，也不是一个 CSS 框架，而是一份给 Claude Code 和 Codex 用的技能说明书——用设计师做红线条审（redline review）的方式，把一个界面一层一层拆开来看：先找出所有"slop"痕迹，再定方向，然后按九个固定次序逐层重做。

二、作者与背景

Damir Sokolovsky 是一位独立设计师（heydamir.design），在 X 上做"Unslopping"系列内容成名——系列视频展示一个 AI 生成界面在几秒内被逐帧改造成设计过的界面，播放量很高，反响最大的几条评论几乎都在问："这个是怎么做到的？能不能做成技能？"

于是仓库在 2026 年 10 月 29 日创建，到 11 月初就积累了超过 1 万 star，成为 Skills 生态里增长最快的项目之一。有意思的是它的构成：仓库主体只有 SKILL.md（约 31KB）、5 个参考文档、2 个 Node 脚本和一个 OpenAI agents 配置。代码量很小，方法论很重。

三、类比：给界面做"红线条审"

如果把 UI 设计比作出版行业，那么 unslop 就是编辑部的文字编辑：

• 写作初稿是 AI 写的，快速、流畅、满是套路（"解锁潜能""无缝体验""10 倍效率"）。
• 编辑不做重写，做的是逐行标注：这里用词太空泛、这里感叹号多余、这里信息不可核实、这里标点风格不统一。
• 编辑不改作者的观点（不改产品功能、不改信息结构），只修工艺。
• 定稿后读者会觉得"这版读起来不一样"，却说不出哪里不一样——因为好编辑的痕迹是看不见的。

unslop 的九道工序完全对应这个逻辑。它甚至定义了 "slop vs craft"的关键分界线：slop 把色彩和效果撒在边框、按钮、背景上；craft 让界面框架保持安静，把丰富度集中在一两个能被记住的内容瞬间——一个渲染出来的实物、一张精心画的图表、一张来自产品世界的图片。

四、核心功能：九道工序

技能的核心是一套强约束的顺序流程，每一步都规定了"允许做什么、不允许做什么"，以及具体到数值的 token（间距刻度、字号、圆角、描边粗细都在 references/tokens.md 里）。

第 0 步：看屏幕。 优先找到渲染该界面的文件，能跑起来就截图，用"人眼看到的样子"而不是代码来评判。只有一个线上链接没有代码时，用 scripts/snapshot.mjs 存下页面（含 --dark/--light 主题），再对副本动手。只有一张截图时，先把界面还原成一个静态 HTML 作为"原稿"。

第 1 步：审计。 逐条列出所有 slop 痕迹及位置，对照 references/signs.md（约 7KB 的痕迹清单）。

第 2 步：定方向并停下。 写出五行：Product（产品是什么、为谁做）、Character（两个三个具体性格词，禁止用 clean/modern/premium 这类描述所有模板的词）、World（产品天然所属的世界，决定中性色基调与点缀色）、Moments（一两个承载色彩与材质的内容瞬间）、Signature（只有这个产品才有的小细节，一个，不是五个）。这一步必须把审计和方向给用户看并等确认——方向一改，全部要返工。

第 3–9 步：九道 pass，顺序固定。 间距 → 颜色 → 图标 → 文案 → 字体 → 布局 → 细节 → 视觉 → 动效。

几个可以看出作者品味的具体规则：

• 间距：所有值落在 4px 网格上；导航是全应用最密的部分，行高 32–36px；要求把侧边栏量一遍，因为"间距最容易在这里崩"。
• 颜色：应用和看板的背景、表面、边框、文字必须保持中性（石墨色系），"一个背景读起来像橙色的界面已经过火了"；世界里的一切只出现在点缀色、图表和 moments 里。渐变只允许做同一中性色内的轻微明暗过渡，绝不跨色相。
• 图标：emoji 一律换成同一套线性图标（默认 lucide），16 或 18px、1.5 描边，图标取文字角色颜色，本身不染色。
• 文案：标题必须说清"这个产品为谁做什么"，换成任何别的产品都不成立；禁止 Welcome back, Damir! 👋 这类打招呼标题；禁止 supercharge / seamless / magic / revolutionize 这类营销词；不可核实的数字（"10,000+ 团队喜爱"）要么在用户确认为真后改成具体的，要么删除；界面文字里的感叹号全部去掉。
• 字体：一个字体族 + 最多一个搭配族（等宽或展示体）；只用 400/500 两个字重，600 仅偶尔使用，禁止 700–900 的粗黑标题；层级靠字号和颜色而非字重；全站句首大写（sentence case）。
• 布局：应用保持真实应用比例——外壳填满视口，侧边栏 240–280px，内容区流式并封顶 1440–1600px，"绝不把一个应用压缩成居中窄栏"；首屏整体构图，hero 填满视口高度不留空带。
• 细节：嵌套圆角规则（内圆角 = 外圆角 − 内边距，绝不小于 4）；统计卡就是数字，不加迷你柱状图充数；图表有主次，只有一张主图，"第二张同样大的图表"是不允许的；每个图表只用一种强调色。
• 视觉：删掉所有装饰性填充物——高光球体、轨道、霓虹网格、全息大脑、机器人形象。落地页 hero 要有"真实的东西"，看板和应用几乎不需要生成图。
• 动效：删掉无意义的循环动画（animate-pulse、animate-ping、标题微光、呼吸光晕）；禁止 transition-all，只过渡 color/background/border/opacity/transform，且禁止动画 width/height/top/left。

额外的：Story 视频。 这是全项目最出圈的功能——生成一个 10 秒内的方形视频，展示界面自己"一步步去掉 AI 味"。做法非常讲究：所有改动写成叠加的 CSS class（.s1、.s2…），只改值不改结构，这样浏览器才能补间动画；渐变这类不能补间的效果单独放一层淡出；文本替换用 <span class="swap"> 做模糊淡出 + 逐字升起，且全片不超过 8 处（否则会像两张图硬切）；红线条注用 data-gap、data-radius、data-slop 属性标注，跟着元素实时计算间距数值。

五、上手门槛

极低，但有前提。 技能本体是纯 Markdown 指令，没有任何运行时依赖：

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

Codex 用户用 $skill-installer install，也可以手动放进 ~/.agents/skills/。装完在 Claude Code 里敲 /unslop this dashboard 即可，或者直接用自己的话描述，Agent 会自动拾起这个技能。

可选依赖只有两个：做网页快照和 Story 视频需要 npm install -D playwright && npx playwright install chromium；Story 视频还需要 ffmpeg 在 PATH 上。

接入图像生成：当 hero 需要场景图时，技能会调用 fal、Replicate、OpenAI Images 或 Higgsfield 等图像服务；没配置则提示可以以 MCP server 方式接入，并且每次付费生成前都会展示 prompt 并征得同意。看板类应用几乎用不到这一步。

成本：技能按需加载，只有匹配到请求时才进入上下文，不常驻占 token。

六、争议与局限

1. 它是一份"提示词"，不是可执行的质量保证。 全部约束都依赖模型自觉遵守。对 Claude Code 效果很好（作者本人就是这么用的），但换成能力较弱的模型，"间距落在 4px 网格上""禁止 700–900 字重"这类细节未必能稳定落地。

2. 技能里明确要求"审计完先给用户看方向并等待确认"。 这是一个正确的设计，但与"全自动跑完"的期望冲突——用户不能完全无人值守。

3. 强风格化有风险。 "界面框架保持中性""背景不能读起来像蓝色"对工具类应用是对的，但如果产品品牌本身就是蓝色的，技能给的建议会与品牌冲突。作者的解法是"真实品牌优先"，但这条边界由模型自行判断。

4. 无法验证"改造后的界面真的更好"。 技能给出了大量可量化的规则（对比度 4.5:1、字号 11px 下限、圆角 4–20px），但最终好不好看仍是主观的。缺少 A/B 测试或用户验证环节。

5. 许可与商业化。 CC BY 4.0，允许商用但必须署名作者并链接回仓库；作者同时在 heydamir.design 出售"3 天改造一个关键页面"的人工服务，技能与商业服务之间存在定位张力（作者自己的表述是"不想雇设计师？先用这个"）。

6. 只处理"前端表层"。 它不碰后端、数据模型、性能和可访问性的深层问题。键盘导航和 focus ring 有被提到，但没有系统性的 WCAG 检查。

七、行业意义

unslop 精准命中了一个正在规模化的问题：AI 让"做出能跑的界面"的成本趋近于零，同时让"界面长得像 AI"成了默认状态。当产出速度不再是瓶颈，工艺就重新成为瓶颈——而这类"工艺型技能"正在成为 AI 编程生态的新一层。

它和同类的 "generate awesome README"、"add tests" 技能有本质区别：那些是加法（增加某样东西），unslop 是减法加重构（先把东西拆了，再决定留什么）。它提供的不是组件和代码，而是一套可执行的审美判断标准——"什么算好"被写成了可以被模型逐条执行的规则集。

从数据看：仓库创建不到两周，star 破 1 万，fork 近 600，贡献者 3 人（作者 + 2 位外部 PR），代码几乎全是 JavaScript（29KB，几乎全部是两个 Playwright 脚本）。这个结构本身说明了一件事：价值不在代码，在知识。这也预示了 Skills 生态的一个方向——越来越多高质量"技能"会是这种"重文档、轻代码"的形态。

从更长的视角看，unslop 的故事和当年的 eslint、prettier 一样：当工具足够强大时，规范就需要被自动化。只是这次被规范的不是代码风格，而是界面品味。

八、结论

适合：经常用 AI 生成前端界面、并且真的在意成品的独立开发者与小团队；已经在做产品化而不只是 demo 的阶段。 不适合：追求一键全自动无人值守的流水线；对品牌有强自定义要求的团队（需自行裁剪规则）；期待它解决非视觉问题的用户。

一句话：它把"我觉得这个界面很 AI"变成了一份可执行、可复现、可交付给 Agent 的施工图。