anti-ui-slop Skill：给 AI 编程 Agent 装上设计品味护栏的爆款工具

Skill超级捕获手 技术创作者 2026-08-12 15 阅读

AI 生成代码最常见的问题是什么？不是逻辑错，不是功能少，而是 UI 丑——一股扑面而来的”AI 味”：过度装饰、emoji 图标、彩色圆点、用不熟的字体。anti-ui-slop 正是为解决这个痛点而生：它给 AI 编程 Agent 装上一套设计品味约束，让 Claude Code / Codex / Cursor 生成界面时，先看 80 万+ 真实屏幕找参考，再落笔。截至 2026-08-12，其 skills.sh 安装量已达 247K，周增长从 7 月中旬的 4K 飙到上周的 106K，是新晋爆款 Skill。

功能与原则

anti-ui-slop 不是一个布局生成器，也不是产品策略引擎。它的核心定位是：在 Agent 准备做重大 UI 决策前给它一双”有品味的设计眼睛”，然后在第一次渲染后做一次窄范围源码级拦截检查。

核心设计原则（来自 SKILL.md）：
– 相对产品做改进，而非相对抽象 novelty 做改进：熟悉的模式如果是最清晰的解法，就用，不要为证明”用了 Skill”而刻意陌生化。
– 禁止添加多余元素：不要为了展示 Skill 而添加 copy、标签、数字前缀、装饰性 emoji、Unicode glyph 作为图标或装饰。
– 排版克制：h1/h2 是英雄区第一个可见文字，不要加 eyebrow/kicker/overline/pre-headline。
– 窄屏友好：导航自适应而不是裁剪或推离按钮，按钮文字和图标对齐。
– 图标系统一致：需要图标时用项目已有的 SVG 体系，而不是随手贴 emoji。

认可度

指标 数据
安装量（skills.sh） 247K（截至 2026-08-12）
周增长趋势 4,081 → 14,588 → 86,056 → 106,826（连续四周暴涨）
首次上线 2026-07-15
覆盖 Agent Claude Code、Codex、Cursor、GitHub Copilot、Antigravity、Lovable
社媒讨论 X/Twitter 上有多个 AI 开发者社区转发，被称为”UI slop 终结者”

链接

GitHub（官方 Skill 源码）：https://www.skills.sh/site/uizze.com/anti-ui-slop

UIZZE 官网：https://uizze.com/

原作者

UIZZE（由 objective.company 设计、构建并支持）——一家专注 AI 编程工具设计体验的公司，UIZZE 是其核心产品，定位为”AI 编程 Agent 的 UI 品味基础设施”。

介绍

当前 AI 编程 Agent 有一个系统性盲区：它们能写出功能正确的代码，但界面往往带着一种”AI 原生”的廉价感——过度使用 emoji、彩色装饰物、不协调的字体和间距。这不是模型能力的问题，而是缺乏设计约束机制。

anti-ui-slop 从源头上解决这个问题。它背后是 UIZZE 这个设计参考库：超过 50 万张真实 Web/iOS 屏幕截图、3.5 万 UI 元素、1400+ 设计系统、15+ 授权字体。Agent 在做 UI 决策前，先查这个库找参照系，而不是凭”直觉”发挥。

这个 Skill 的 SKILL.md 只有一条核心指令：”If your UI screams AI, your app is dead.” 它不生成代码，而是约束 Agent 的设计选择——什么不该做，什么是品味红线。它是一个”设计守门员”，不是”设计代笔者”。

适用 Agent 覆盖主流 6 个：Claude Code、Codex、Cursor、GitHub Copilot、Antigravity、Lovable，安装一条命令即用。

特点

  • 80 万+ 设计参考库：真实生产级 UI 截图，涵盖 Web 和 iOS，不依赖抽象规则或 AI 生成的设计规范
  • 安装量 247K，增长曲线陡峭：7 月 15 日上线，不到一个月冲到 skills.sh 前列，周增速仍在六位数
  • 多 Agent 通用：同一套 Skill 可注入 Claude Code、Codex、Cursor、Copilot、Antigravity、Lovable，不需重复安装
  • 安装极简：一行命令 npx skills add https://uizze.com/，Agent 每次启动自动加载
  • 专注约束而非生成：不替代设计工具，不输出代码片段，只给 Agent 提供设计判断标准，是真正意义上的”设计护栏”
  • 开源规则，持续迭代：SKILL.md 规则随 UIZZE 库更新同步演进

使用方法

安装（任意支持 skills.sh 的 Agent）：

npx skills add https://uizze.com/

安装后，Agent 在处理 UI 相关任务时会自动触发 Skill——无需每次手动调用。Agent 在重要布局/交互决策前查 UIZZE 参考系，完成后运行源码级 slop 检查。

配合 Claude Code 使用示例：

# 启动 Claude Code 并确保 Skill 已加载
claude

# 正常发出 UI 任务指令
# > 用 React 做一个作品集页面
# Agent 会自动加载 anti-ui-slop，在设计阶段查询 UIZZE 参考，输出时做 slop 检查

使用场景与人群

适用场景：
– AI 编程 Agent（Claude Code / Codex / Cursor 等）日常生成前端页面
– 快速原型阶段需要设计保底线，避免”AI 味”界面拉低产品印象
– 团队没有专职设计师，开发者依赖 AI 生成 UI 时的品味兜底
– 自动化 UI 生成流程中，作为 CI 检查环节

目标用户：
– 使用 AI 编程工具的一线开发者（个人开发者、独立开发者）
– 期望 AI 生成界面能直接用于演示或小规模发布的团队
– 关注 AI 产品设计质量的社群（对 UI slop 敏感）

输入与输出案例

输入示例：

用 React 做一个落地页，包含 Hero 区、功能介绍和定价表格。

不使用 anti-ui-slop 的 Agent 输出（常见问题）：
– Hero 区顶部加一行彩色小字 “🚀 Introducing…” 类型的 eyebrow
– 功能卡片用 emoji 作为图标（📧 邮件、⚡ 速度）
– 背景用渐变色块 + 装饰性几何图形
– 按钮文字带 emoji 或用彩色圆点作为状态指示

使用 anti-ui-slop 后的 Agent 输出：
– Hero 区 h1 是第一个可见文字，无多余 eyebrow/kicker
– 图标用项目已有 SVG 体系，无 emoji
– 状态文本用可读文字，不用装饰性彩色圆点
– 导航在窄屏自适应，不裁剪按钮
– 整体克制、专业，类似成熟产品的设计语言

总结：anti-ui-slop 不是一个炫酷的新能力，而是一个”设计品味守门员”。它解决的是 AI 编程 Agent 最普遍、也最难自动修复的 UI 品味问题。247K 安装量 + 连续四周六位数增长，说明这个痛点真实存在且广泛。随着 AI 生成代码能力持续提升，约束层（设计护栏）的需求只会越来越大。

GitHub: https://www.skills.sh/site/uizze.com/anti-ui-slop

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读