posts/anti-ui-slop-skill.md
这个 UI Skill 60.2 万次安装,专治千篇一律
让 Agent 做一个习惯追踪页面,它很容易交出深色背景、紫色渐变、四张数据卡片。功能不一定错,脸已经串台了。
一个专门收拾这种模板脸的免费 UI Skill,最近冲到了 Skills.sh 的 601.6K 次安装。页面公开的最新周安装桶是 124,931。安装也只要一行命令。
npx skills add https://uizze.com/ --skill anti-ui-slop
它叫 anti-ui-slop。你把一个页面、组件或者改版任务交给 Claude Code、Codex、Cursor 这类编码 Agent,它会先补一层设计约束,再让 Agent 动手。
好家伙,名字挺凶,做法反而很克制。

官方技能页主视觉,免费 Skill 与付费参考库是两层能力。
Skills.sh 的 FAQ说得很清楚,排行榜来自 CLI 的匿名汇总安装数据。所以 60.2 万次安装只能证明很多人在找这类解法,不能证明装上以后页面自动变好看。
更有意思的是,它的 GitHub 镜像抓取时只有 15 Star,却已经有 431 次提交。官方 README 也特意说明,uizze.com 上的域名包才是权威版本,GitHub 仓库只是镜像。
这组数字放在一起挺有意思。Star 和安装量都不是免检章,最多告诉你,人们已经被 AI 模板脸折腾得不轻。
它先拦住的不是配色,是开工顺序
很多 UI 提示词喜欢从风格开场。极简、玻璃拟态、Bento Grid、科技感、紫色渐变,词越堆越多,到头来每个产品都长着同一张脸。
anti-ui-slop 的公开技能定义把顺序调了过来。Agent 得先读产品 brief、当前页面、已有组件、设计 Token 和约束。项目自己的视觉语言优先级更高,Skill 只能补空位,不能推翻它。
这个动作听着朴素,省的却可能是一次整页返工。
假设你在做一个团队排班后台。真正能让它区别于普通仪表盘的,不是把按钮做成异形,而是班次、冲突、缺勤、换班申请这些产品对象。Agent 若没读这些东西,最熟练的选择就是侧边栏、四张卡、一个折线图。棒棒的,又一套 SaaS 模板出生了。
这里的例子是显式假设,不是本地实测。可它对应的约束很具体。熟悉控件继续熟悉,差异要从内容、结构、字体、图像和交互里长出来,不靠新奇本身。
真要调用,我会把任务写成这样。
Use anti-ui-slop for this settings page.
Read DESIGN.md, the existing page, components, and tokens first.
Keep familiar controls familiar.
Load only the product and dashboard playbook.
Cover loading, empty, error, success, disabled, and recovery states that can occur.
Render once at 390px and 1440px, then fix observable breakage.
注意那句 Load only。这套 Skill 把新页面、产品后台、精修、简化、审查和 iOS 分成不同 playbook,并要求一次最多选一个。
这条我挺喜欢。设计规则不是越多越好。新建页面时读新界面 playbook,后台产品读产品与仪表盘 playbook。两套一起塞,Agent 很可能一边追求强视觉方向,一边要求界面消失在任务里,自己跟自己打架。
上下文窗口也不是储物间,什么都往里堆,只会更乱。
这组 Before 和 After,先看它改了什么
这次没有做本地独立盲测。下面两张图来自 UIZZE 官方主页,是同类习惯追踪产品的宣传对照,适合看设计方向,不适合拿来证明平均效果。

Before,信息块齐全,但产品身份主要停在通用数据卡片。
Before 并不难看。深色底、紫色重点色、环形进度、日历、底部导航,该有的都有。问题是把标题换成学习时长、健身记录或者项目工时,它大概还能继续工作。
能换皮复用,正是模板脸最麻烦的地方。

After,星期弧线、习惯对象和每日进度组成更明确的产品叙事。
After 没靠多塞组件取胜。它把「A Mindful Week」和一周节奏放到第一视觉层,饮水、步行、阅读变成可感知的产品对象,下面才是进度与分析。浅色渐变只是结果,不是起点。
这一前一后,真正变化的是阅读顺序。用户先知道今天处在这一周的哪里,再看到三项习惯,然后下钻到进度。页面开始像一件具体产品,而不是一包 UI 零件。
坦率讲,官方图选得很会卖货,我们不能拿它当第三方评测。但它至少把 anti-ui-slop 的主张兑现成了可见产物。不是「更高级」,而是「更像这个产品」。
免费层够做什么,什么时候别装
免费 Skill 不需要账号、Token、MCP 连接或者额外脚本。只用上面那条安装命令,就能得到产品优先、单一 playbook、完整状态和一次渲染检查这套流程。
完整 UIZZE 参考库是付费层。官方页面写的是 80 万以上 Web 与 iOS 屏幕、3.5 万 UI 元素和 1.4 万设计系统,价格显示每月 9 美元或一次性 99 美元。MCP 只开放两个动作,找界面参考与找字体、图标等材料,而且每次只返回少量结果。
这个边界反而挺健康。没有具体视觉问题时,不该为了显得勤奋就搜一堆参考图。现有设计系统能回答,继续用现有系统。搜索没结果,也不重试到天荒地老。
有几类场景,我不会急着装它。
如果任务只改一个边距或文案,直接改更快。如果团队已经有完整设计规范和严格评审,重复加一层 Skill 可能只是多一份上下文。如果你期待一句提示词凭空产出品牌策略,它也做不到。产品 brief 为空,任何设计指南都只能对着空气努力。
它也替代不了无障碍、安全、性能和真实用户测试。公开审查 playbook最多返回三项重大问题,并明确要求只报告可观察证据。这个限制很实用,但三项 UI 发现不等于产品已经可以上线。
我自己的判断是,anti-ui-slop 最值得抄走的不是那 80 万张参考图,而是三道门。
先读产品,再选一个 playbook,收尾时看一次真实渲染。
少任何一道,Agent 都可能很忙。页面也可能继续长得像别人家。
这事儿多少有点冷幽默。我们给 AI 塞了越来越多审美词,真正救页面的,还是开工前认真读材料,交付前亲眼看一遍。
做设计和写代码,到这里忽然又是同一件事了。