用可执行的 anti-slop 门禁，像执导电影一样构建网站

AI 构建的网站有一批共同的应激反应：250–290° 的紫蓝渐变、transition: all、用 scroll 监听器驱动动画、默认字体 Inter。1k star 的 Claude Code skill agiwhitelist/auteur 把这些反应直接变成构建失败。写代码之前先锁定视觉方向，素材由本地 CLI 生成，可执行的 anti-slop linter 和真实的动效检查都通过之前，什么都不许发布。

为什么这个 Skill 重要

auteur 不是组件库：没有任何东西来自现成的 registry，它展示的每个网站都从自己的 commit-sheet 起手写成，原生实现，零运行时依赖。这个 skill 是一条按顺序强制执行的导演级流水线：侦察、commit-sheet、生成素材、构建、门禁。

• 侦察（Recon）。 refscout 分析获奖在线网站——它们实际加载的库、固定的场景数、滚动预算、实际渲染的字体和调色板——moodboard 则从 Bing / Pinterest / are.na 抓取带编号的 contact sheet。对 headless 浏览器隐藏 CSS 的网站会如实报告为 NO CAPTURE，而不是靠猜。
• Commit-sheet。 确立唯一的视觉方向——单一品牌色、字体系统、动效预算、明确的反面参考（anti-references）——在写任何 markup 之前全部落笔，杜绝「先看看效果再说」的随意漂移。
• 生成素材。 图像、视频帧、深度图和 3D 几何体由本地 CLI 生成（Codex / Gemini 图像生成、Blender headless、Depth-Anything），根据成本和各工具的实际专长进行路由。
• 构建。 单一 WebGL context，GSAP/Lenis 滚动，DOM 动效仅限 transform 和 opacity。
• 门禁。 下面两道门禁不通过，禁止发布。

安装

auteur 是一个 Agent Skill：一个 SKILL.md 加参考配方（recipes）和几个可运行脚本——约 1MB，无依赖，无 API key，无需构建步骤。任何能读这个格式的智能体一条命令即可安装：

npx skills add agiwhitelist/auteur

在 Claude Code 上以插件方式安装，可以原地更新：

/plugin marketplace add agiwhitelist/auteur
/plugin install auteur@auteur

要求：运行 skill 需要 Claude Code，slopscan 需要 Node 18+，motionqa、shoot、refscout、moodboard 几个脚本需要 Playwright（npx playwright install chromium）。可选的素材生成 CLI 只在存在时才会被使用——没有这些 CLI 时，skill 会优雅降级到手工素材。

实战：构建一个电影感落地页

1. 装好 skill，然后提问：

build me a cinematic landing with auteur

2. Claude 会跑完整条流水线——commit-sheet → 素材 → 构建 → 门禁——然后把网站交给你。
3. 盯着门禁真的跑起来。slopscan 是一个零依赖 linter，对具体的劣质模式直接阻断构建：紫蓝 AI 渐变、transition: all、用 addEventListener('scroll') 做动画、自动播放音频、无 poster 的视频、缺少 prefers-reduced-motion 分支的 WebGL、默认的 Inter/Space-Grotesk 字体、滥用破折号的文案等等。它在 CI 中对每个发布页面运行，所以「0 slop」的声明不会悄悄腐化：

git clone --depth 1 -b gh-pages https://github.com/agiwhitelist/auteur site
node scripts/slopscan.mjs site
# → Summary: 0 fails, 0 warns, 0 suppressed

4. motionqa 是一个 Playwright 测试流程，在受限 CPU 下驱动页面，遇到掉帧、长任务、自动播放声音或 console 报错即判定失败。它在 DPR 2 下测量，因为全屏后期效果的开销按像素计价，DPR 1 的测量可能给一张在 Retina 笔记本上会卡顿的页面开出 60fps 的合格证。

多屏产品还有 systemscan：爬取每个路由，某类组件偏离其声明的同类预算、或任何组件缺少可见的 focus 状态时判定失败。

实证与底线

README 的实证是十个在线网站，每个都由 auteur 构建，每个都以 0 fails / 0 warns 通过这个 skill 自带的 linter。第十个不是 Claude 做的：Kimi K3 拿到的是 SKILL.md 和一份需求，没看过前面九个网站，照样过了同样的门禁——真正可迁移的是这套纪律，不是某个模型。每个网站还满足 README 称之为「强制执行的底线，而非愿景」的无障碍底线：prefers-reduced-motion 会呈现丰富的静态画面而不是空白；关掉 JavaScript 后所有文案依然可读；无全屏频闪；390 / 768 / 1440 三档响应式且无横向溢出。

技巧

• README 声明仓库里没有任何 benchmark 数据——唯一的量化声明是 linter 结果，用上面的 slopscan 命令即可复现。
• 侦察和素材获取是仅有的两个联网阶段，抓到的内容只当作参考素材和许可元数据——绝不会被执行。跳过这两个阶段，其余全部可以离线运行。
• 获取的素材在 assets/sourced/ASSETS-SOURCED.md 里保留许可台账；CC-BY 图片自带署名行，不会无署名发布。素材视频只允许用作环境层，用作 hero 区域会被拒绝。
• 展示网站放在 gh-pages 分支上，所以安装 skill 只拉约 1MB 的配方，而不是 45MB 的渲染视频。

何时不用这个 Skill

README 自己画了边界：它不是组件库——如果你想要拿来即用的动效组件，请用 shadcn 或 originkit.dev；这个 skill 执导页面，而不是囤积零件。

查看 排行榜 了解更多 skill。