anti-ai-slop-ui

anti-ai-slop-ui

防止 AI Agent 生成千篇一律、一眼就能认出的氛围编码式 UI。

不要默认采用常见的 AI SaaS 界面。编写 UI 代码之前，先定义视觉方向、设计令牌、布局策略、动效规则和反劣质设计质量门槛，打造符合产品特性的设计。

核心原则

不要从组件入手，而要从设计意图入手。

适用场景

• 落地页、SaaS UI、仪表盘、引导流程
• 应用界面（桌面端 / 移动端）
• 前端组件、Figma / 原型图
• UI 改版和 UI 质量评审
• shadcn/Tailwind UI 重构

不适用场景

• 纯后端、仅涉及数据库或仅涉及 DevOps 的工作
• 数据处理、仅包含 CLI 的脚本、纯文本写作
• 除非任务包含可见 UI

必须遵循的流程

按此顺序执行，不要跳过步骤。

1. 对 UI 任务进行分类

确定一个主要类型：

• 落地页 / 产品营销页
• 应用仪表盘 / 管理后台 / 控制面板
• 引导流程
• 移动端或桌面应用界面
• 组件库工作
• 改版或评审
• Figma / 原型图生成
• 实现或重构

评审时使用匹配的清单：

• checklists/landing_page_checklist.md
• checklists/dashboard_checklist.md
• checklists/ui_review_checklist.md

2. 推断产品背景

确定：

• 产品类型、目标用户、主要用户操作
• 平台、信息密度、信任要求
• 情感基调、品牌成熟度、业务目标
• 无障碍要求

如果缺少信息，简要说明假设。除非缺失信息至关重要，否则不要因此停下。

生成任务使用 templates/design_brief_template.md。

3. 选择具体的视觉方向

选择一个带有明确约束的方向。不要只用“现代”“简洁”或“时尚”等模糊标签，而不加具体说明。

阅读 references/visual_directions.md 并选择一个方向，例如：

• 原生 macOS 实用工具
• 开发者工具 / CLI 配套工具
• 企业控制平台
• 安全运营控制台
• 研究档案
• 高端健康伴侣应用
• 加密货币情报终端
• 消费级创作者工具
• 金融仪表盘
• 极简编辑风格产品
• 趣味消费级应用

各方向的完整约束请参阅 references/visual_directions.md。

4. 编写 UI 代码之前定义设计令牌

实现之前，先定义：

• 配色、字体、间距比例
• 圆角规则、阴影 / 层级规则
• 图标样式、动效规则
• 布局节奏、组件密度

使用 templates/design_tokens_template.json。

阅读 references/typography_guidance.md 和 references/motion_rules.md。

5. 选择布局策略

不要默认采用：

centered hero -> subtitle -> two CTAs -> three cards -> bento -> FAQ -> CTA

从 references/layout_patterns.md 中选择符合产品特性的布局，例如：

• 非对称产品主视觉
• 指挥中心
• 编辑式分栏
• 工作流时间线
• 原生设置窗口
• 证据账本
• 高密度仪表盘
• 单一大型对象
• 问题 / 证据 / 结果
• 产品故事板

6. 避免常见的 AI / 氛围编码式默认设计

以下都是有风险的默认设计，需要给出符合产品特性的理由。除非用户要求或产品有充分理由，否则不要采用。

阅读 references/anti_slop_patterns.md，了解相关特征和替代方案。

默认应避免：

• 默认的 shadcn/Tailwind 视觉语言
• 紫色 / 靛蓝色 AI 配色、紫蓝渐变、渐变主视觉文字
• 居中主视觉 + 三张卡片 + CTA
• 将表情符号用作 UI 元素
• 毫无目的的暗色霓虹光效
• 到处使用玻璃拟态
• 毫无目的的极光 / blob / 模糊装饰
• 所有元素都使用圆角
• 不加思考地默认使用 Inter/Geist
• 每张卡片都有悬停动画
• 到处使用滚动显现效果
• 通用 SaaS 版块节奏
• 默认用 Bento 网格作装饰
• 用空白空间营造高端感
• 视觉上完全相同、权重均等的卡片

7. 生成或评审 UI

生成： 深度定制组件，避免使用原始演示组件，让层级一目了然，使用协调一致的图标，定义空、加载和错误状态，让动效服务于功能，保留基本的无障碍功能，并测试响应式表现。

评审： 找出泛化特征，说明原因，按影响程度排列修复项，并提出调整后的方向。

所有 UI 工作都要使用 checklists/accessibility_basics.md。

研究 examples/ 中的对比案例：

• examples/bad_to_good_landing.md
• examples/bad_to_good_dashboard.md
• examples/native_macos_utility_example.md

8. 运行 AI Slop Score 和 Distinctiveness Score

最终交付前评分：

• rubrics/ai_slop_score.md
• rubrics/distinctiveness_score.md
• rubrics/implementation_readiness_score.md（用于生成简报）

质量门槛问题：

• 这看起来像默认的 shadcn 演示吗？
• 主强调色是否为紫色/靛蓝色，却没有产品层面的理由？
• 是否有渐变的主视觉标题？
• 页面是否基本上就是主视觉区 + 三张卡片 + CTA？
• 是否把表情符号用作图标？
• 卡片/按钮/模态框是否都采用了过度圆角？
• 是否有缺乏用途的光晕、极光、斑点、模糊或玻璃质感装饰？
• 是否只是因为 Inter/Geist 是默认字体才使用它？
• 悬停/滚动动画是否过多？
• 前端/设计社区会不会说“这看起来就是 AI 做的”？

9. 如果 UI 看起来泛泛无奇，就进行修改

• AI Slop Score 为 0-4：可以继续，附上少量备注
• AI Slop Score 为 5-6：修改影响最大的部分
• AI Slop Score 为 7+：不要发布；重新设计视觉方向和布局
• Distinctiveness Score 低于 7：至少提出三项具体改进

10. 输出可直接用于实现的备注/代码

使用正确的输出模板：

• 生成：templates/ui_generation_output.md
• 评审：templates/ui_review_output.md

必需的输出格式

UI 生成

1. 设计方向
2. 令牌决策
3. 布局策略
4. 实现/代码
5. 反 AI Slop 检查（评分 + 风险）
6. 尚存的权衡

UI 评审

1. 直接诊断
2. 发现的泛化特征
3. 这些特征产生的原因
4. 优先修复项
5. 调整后的设计方向
6. AI Slop Score
7. Distinctiveness Score
8. 具体实现步骤

资源索引

角色	文件
视觉特征 + 替代方案	references/anti_slop_patterns.md
设计方向库	references/visual_directions.md
非默认布局	references/layout_patterns.md
字体/排版决策	references/typography_guidance.md
功能性动效	references/motion_rules.md
生成前简报	templates/design_brief_template.md
令牌结构	templates/design_tokens_template.json
生成输出格式	templates/ui_generation_output.md
评审输出格式	templates/ui_review_output.md
Slop 评分	rubrics/ai_slop_score.md
独特性评分	rubrics/distinctiveness_score.md
就绪度评分	rubrics/implementation_readiness_score.md
通用评审清单	checklists/ui_review_checklist.md
落地页清单	checklists/landing_page_checklist.md
控制面板清单	checklists/dashboard_checklist.md
无障碍基础要求	checklists/accessibility_basics.md
落地页对比示例	examples/bad_to_good_landing.md
控制面对比示例	examples/bad_to_good_dashboard.md
原生 macOS 实用工具示例	examples/native_macos_utility_example.md
可复用任务提示词	examples/prompt_examples.md
安装到 Agent	scripts/install_skill.py
UI Slop 启发式检查	scripts/ui_lint.py

实用脚本

需要时运行这些脚本。它们不能取代上述设计流程。

scripts/install_skill.py

适用于克隆了仓库的用户。通过符号链接（默认）或复制，将此技能安装到 Agent 技能目录中。

python scripts/install_skill.py
python scripts/install_skill.py --status

公开安装替代方式：npx skills add rwcod/anti-ai-slop-ui

scripts/ui_lint.py

实现或审查 UI 代码后，扫描可量化的潦草迹象：

python scripts/ui_lint.py ./src
python scripts/ui_lint.py path/to/Component.tsx

将输出作为 AI Slop Score 的输入，而非最终结论。出现误报是意料之中的。

强烈建议的默认指令

实现 UI 之前，先制定简短的设计方向和设计令牌计划。

采用鲜明且符合产品特性的视觉语言。优先考虑层级、克制、适当的不对称、适用时遵循平台原生规范，以及仅使用具有实际功能的动效。

先定义视觉系统，再实现 UI。