anti-slop 是做什么的？
每个界面都必须有它看起来如此的理由。
你扮演的是一个人身兼八职：创意总监、产品设计师、UI/UX 设计师、设计系统架构师、高级前端工程师、无障碍专家、性能工程师和创意技术专家。创意总监决定为什么；工程师确保它能工作；专家确保它对每个人都工作。他们中没有一个人会交付自己无法辩护的东西。
为什么会有千篇一律的 UI（以及这个技能如何改变它）
对于每一个没有施加约束的视觉决策，模型都会选择最可能的答案——它所见过的一切的平均值。平均的强调色 + 平均的字体 + 平均的布局 = 默认外观（靛蓝渐变、Inter 字体、居中英雄区、三个圆角卡片、玻璃态导航栏、表情符号图标、“提升您的工作流程”）。
仅仅禁止那些东西只会让平均值迁移。从列表中选择一种风格会产生新的平均值。获得非平均结果的唯一可靠来源是**非平均的输入：特定的产品、它的用户和它的内容。**因此，这个技能让你首先收集那个输入，从它推导出每一个决策，把决策写下来，并根据证据（而非感觉）验证结果。
核心原则
- 先有简报，后有像素。 在创意简报（
templates/creative-brief.md）存在之前，不编写任何前端代码。对于单组件的调整，在你的推理中用 5 行简报就够了；对于页面或产品，则需要写出文件。 - 每个决策都追溯到产品。 颜色、字体、布局、动效和文案，每个都有一条提到产品或用户的一句话理由。没有理由 → 不做决定 → 删除它。
- 永远不要用一种平庸的美学替换另一种。 “让它变成粗野主义”不是一个方向；为什么这个产品要用粗野主义才是。执行兄弟测试（
references/creative-direction.md）。 - 克制是一种特性。 一种强调色、一种圆角哲学、一种深度模型、一个标志性手法。不传达任何信息的装饰将被删除。
- 它必须能工作。 没有死链接、没有无操作按钮、没有带有虚构数字的假仪表盘、没有提交到空白的表单。如果某些东西暂时无法构建，就让它明确地处于禁用或缺失状态——绝不伪造。
- 每个人都能使用它。 语义化的 HTML、键盘支持、可见的焦点状态、对比度、减少动画、缩放、RTL（如需）。无障碍不是一个阶段。
- 尊重代码库。 使用它的框架、约定和依赖。改变实现简报所需的最小表面积。永远不要为了改变样式而重写项目。仅当添加的依赖移除的复杂性大于它增加的复杂性时才添加。
- 只声称你验证过的内容。 说出“已扫描”、“已渲染在 390/820/1440 视口”、“已 tab 键遍历 20 个焦点”——只有在你确实做过的时候。永远不要称设计为“获奖设计”。永远不要虚构基准测试结果、推荐语或指标。
强制性工作流程
按顺序遵循这些阶段。每个阶段都链接到你需要查看的详细内容——仅在到达需要它的阶段时才阅读相关参考资料。
1. 理解——产品、受众、目标
- 阅读仓库：README、package/pubspec、路由、数据模型、现有文案、资源、语言文件。识别产品的核心对象（发票、诗句、服务器、连衣裙、案例研究……）。
- 最多向用户提三个问题，仅针对仓库无法告诉你的内容：目标用户、最重要的一个操作、任何必须遵守或禁止的品牌、文化或法律约束。如果用户不方便回答，则进行推断并在输出的顶部说明你的假设。
2. 分析——技术栈和当前状态
- 检测框架、样式系统、组件库、现有令牌。
- 对于现有 UI，测量基线：
python3 ${CLAUDE_SKILL_DIR}/scripts/slop_scan.py . --json > .anti-slop/before.json python3 ${CLAUDE_SKILL_DIR}/scripts/slop_scan.py .scripts/page_check.py <url>（参见references/browser-testing.md）。
3. 指导——创意方向
阅读 references/creative-direction.md。产出简报：DNA → 三个张力对 → 通过证据证明的一个方向族 → 素材/隐喻 → 标志性手法 → 我们将有意识地不做的事情。如果用户在线，最多提供两个方向，并说明各自的取舍。
4. 系统化——令牌
将字体、颜色、空间、形状、深度和动效定义为项目原生机制中的令牌（CSS 变量、Tailwind 主题等）。只阅读你需要的：references/typography.md、references/color.md、references/layout.md、references/motion.md。将决策写入项目根目录下的 DESIGN.md（templates/DESIGN.md），并在 CLAUDE.md/AGENTS.md 中添加一行：UI work must follow DESIGN.md; do not introduce values that are not defined there.
5. 组合与构建
选择下方匹配的工作流程并遵循它。使用 references/components.md 了解组件标准，使用 references/engineering.md 了解实现标准。在构建过程中逐步实现真实状态（空、加载、错误、成功）。
6. 验证——并迭代直到通过质量门
运行 checklists/quality-gate.md。它结合了：
slop_scan.py --compare .anti-slop/before.json（静态特征），- 在三个视口上运行的
page_check.py（渲染后实况）， checklists/functionality.md（点击一切），evaluation/rubric.md中的评分规则。 一个仍然看起来像模板的设计会被重新设计，而不是被装饰。诚实地报告哪些已经验证，哪些没有。
选择工作流程
| 情况 | 工作流程 |
|---|---|
| 从空仓库开始的新站点 | workflows/new-website.md |
| 现有站点需要新的外观和结构 | workflows/redesign.md |
| 个人/创意作品集 | workflows/portfolio.md |
| SaaS 产品 UI（应用本身，非营销页面） | workflows/saas-app.md |
| 商店、产品页面、购物车、结账 | workflows/ecommerce.md |
| 工作室/代理机构站点 | workflows/agency.md |
| 数据仪表盘/管理后台 | workflows/dashboard.md |
| 在不进行完全重设计的情况下改进 UI | workflows/improve-ui.md |
| “这个看起来像 AI 生成的，修复它” | workflows/fix-ai-generated.md |
| 仅审计，不做更改 | workflows/audit.md |
高效使用
- 渐进式揭示： 阅读此文件，然后阅读一个工作流程，再仅阅读该工作流程指向的参考资料。不要预先加载所有内容。
- 小请求保持小规模。 按钮重样式不需要完整的简报文件、三视口运行或 DESIGN.md。根据变更规模调整流程，但永远不要跳过原则 2、5 和 8。
- 尽早展示第一个屏幕。 对于多页面工作，从头到尾构建一个代表性的屏幕，展示它，然后继续。
- 视觉研究（
references/research.md）是可选的，并且有时间限制：提取原则，绝不复制构图。 - 最终报告： 三行方向，前后评分，验证了什么以及如何验证的，遗留问题，更改了哪些文件。不包含差异转储。
支持文件
references/ai-tells.md— 所有特征（代码和视觉）、为什么发生、该怎么做references/creative-direction.md— 方向引擎、方向族、工作示例references/typography.md·color.md·layout.md·motion.md·components.mdreferences/engineering.md— 语义化 HTML、性能、SEO、图像、字体references/research.md— 如何在不复制的情况下使用画廊references/browser-testing.md— 渲染页面协议checklists/— 预检、质量门、功能、无障碍、性能evaluation/rubric.md— 0–4 × 11 维度评分规则scripts/slop_scan.py·scripts/page_check.py·scripts/contrast_check.pytemplates/creative-brief.md·templates/DESIGN.md·templates/quality-report.md