紫色渐变、满屏 emoji、“Welcome back! 👋”，unslop 专门改掉 AI 界面的这些毛病

“技能”（skill）在这里指一份写给 AI 编程工具看的说明书：一个文件夹，里面是规则、参考图和小脚本。装好以后，你在 Claude Code 里打 /unslop，或在 Codex 里打 $unslop，AI 就会按这份说明书的步骤干活。unslop 的说明书管的是一件事：把“一看就是 AI 生成”的界面，改成像是有人认真设计过的样子。

仓库目前约 3.6k 星、175 个 fork，许可证是 CC BY 4.0，可以商用和修改，条件是署名作者并链接回仓库。

01它不先动手，先交一份问题清单

unslop 第一步是审计：对照仓库里的 signs.md，把界面上每一处 AI 痕迹写成一行，标明在哪个文件、哪个位置。清单分成配色、字体、图标、间距、文案、组件、首屏、配图、动效几组，比如标题用 800 以上的粗字重、全大写加宽字距的小标签、mt-[13px] 这种随手写的间距、没有出处的“被 10,000+ 团队信赖”。

看完清单，它会判断改多少：问题多就整套重做；大体不错只剩几处，就只修这几处，保留原来的品牌色和布局；本来就没问题，它会直接说“不用改”，最多给两三条小建议。作者在说明书里写得很直白：不要为了不一样而去改一个好界面。

02方向从产品里找，不准用“简洁、现代、高级”

动手前，它要写五行方向：产品是做什么、给谁用的；两三个具体的性格词；产品所属的“世界”，比如笔记应用靠近纸和墨水，监控工具靠近仪表盘和夜班；一两处允许颜色和细节变丰富的地方；以及一个只有这个产品才有的标志性小细节，比如监控工具的实时状态小圆点、开发者工具的键帽样式。

性格词里明确禁止 clean、modern、sleek、minimal、premium，理由是这些词能套在任何模板上。写完方向，它默认停下来给你看，等你点头再改，因为方向一变后面全要重来。你一开始就说“直接做”，它才跳过这一步。

03九轮按顺序改，间距排第一

正式修改分九轮，顺序是固定的：间距、配色、图标、文案、字体、布局、细节、视觉、动效。每一轮要过完整个界面才进入下一轮。说明书给了排序的理由：间距定下来之后，其他东西看起来都会不同；文案排在字体和布局前面，因为标题有多长，决定了它该多大、放哪儿；配图和动效放最后，因为它们应该配合一个本身已经成立的界面。

几条比较有代表性的规定：

• 间距全部落在 4px 网格上，同一列表里每行一样高，组内间距小于组间间距。
• 背景、边框、文字用同一组带一点色调的中性灰，强调色只留给主按钮、选中项或那个最重要的数字；去掉色相渐变、渐变文字和彩色发光。
• emoji 图标换成同一套线性图标（项目没有就用 lucide），统一 16 或 18px。
• 文案不用感叹号，不用 supercharge、seamless、unlock、magic 这类词；涨跌要写跟谁比，比如“+12% vs 上月”；查不到来源的数字先问你是不是真的，不是就删。
• 动效只留能说明状态变化的，循环闪烁、悬停放大、弹簧回弹都去掉。

最后它会再截图对照审计清单，没改掉的继续改，然后交一份报告：方向是什么、每一轮改了哪些地方。

04用什么写的界面都能接，只有链接也行

README 列的适用范围是 Next.js、React、Vue、Svelte、Tailwind 和纯 HTML/CSS，仪表盘、应用页、落地页都可以。手上只有一个线上网站链接、没有源码时，它会用 Playwright（一个能自动打开网页的浏览器工具）把页面存成本地文件，在副本上改，交出来的是一份改好的页面代码，由你转给负责那个网站的人。只有截图的话，它会先照着截图还原成一个静态 HTML 再改。

落地页首屏需要配图时，它可以调用 fal、Replicate、OpenAI 图像或 Higgsfield 这类生图服务；没接的话会提出帮你以 MCP 服务的方式接上，每次付费生成前都会先把提示词给你看、征得同意。仪表盘和应用页它通常不配图，重点放在把图表和数字做好。

还有一个附加功能：生成一段不到 10 秒的方形视频，展示界面一步步“去 AI 味”的过程，带红色批注框，适合发社交平台。这一步需要 Playwright 和 ffmpeg，也会多花几分钟，所以只在你要的时候才做。

05装上它

Claude Code 用户，把技能文件夹拷进技能目录（只想在某个项目里用，就拷到那个项目的 .claude/skills/ 下）：

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

Codex 用户可以让它直接从仓库安装，或者手动拷到 ~/.agents/skills/：

$skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop

要处理线上网站或生成视频，再在项目目录里装 Playwright：

npm install -D playwright
npx playwright install chromium

用的时候直接说要改什么就行，例如“/unslop this dashboard”“/unslop the hero of https://example.com”。仓库的 examples 目录里放了两个典型的 AI 风格界面，可以先拿它们练手。

对经常用 AI 搭页面的人来说，比起这套工具本身，signs.md 那份痕迹清单更值得先读一遍：哪怕不装，照着它自查一次自己的页面，也能挑出不少问题。