Auteur Skill：把网站当电影来导——AI 视觉生产的反套路神器

Auteur Skill：把网站当电影来导——AI 视觉生产的反套路神器

大多数 AI 建站工具把网页当成内容容器来堆砌，千篇一律的渐变背景、Inter 字体、transition-all 动画——产出的是”模板感”而非”作品感”。Auteur Skill 则把电影导演的分镜思维引入 AI 前端生产，让每一个 commit 都有导演决策，每一行代码都有审美约束，每个产出的网站都带明确的视觉签名。

功能与原则

Auteur 的设计原则只有一条：美术方向在第一行代码之前锁死。整个生产管线严格按顺序执行：

• Commit-Sheet：在动手之前，先把品牌主色调、字体系统、运动预算、Anti-References 写成文档，不允许中途漂移。
• Generated Assets：用本地 CLI（Codex / Gemini 图像生成、Blender 无头渲染、Depth-Anything 深度图）生成图片、视频帧、3D 几何体，按工具所长分配任务。
• Build：一个 WebGL context + GSAP/Lenis 滚动 + DOM transform&opacity 运动——来自经过验证的配方：流体模拟、GPGPU 粒子、3D 世界、滚动状态机。
• Gate：任何东西在通过两道关卡前不许发出：slopscan（反套路检测 linter）和 motionqa（Playwright 帧率压测）。

核心哲学：AI 生成的内容必须经过硬性质量门禁，不是”有 AI”就等于”做得好”。

认可度

• GitHub 709 stars（截至 2026-08-03），2026-07-11 才创建，不到一个月即破 700
• forks 数量不少，在 GitHub Trending 的 JavaScript 分类中占据过显著位置
• 社区反馈热烈：开发者认可”像拍电影一样做网站”的思路独特
• 官方有完整 landing page + 6 个真实展示网站，全部通过自身 linter 的 0 fails / 0 warns 检测

链接

GitHub：https://github.com/agiwhitelist/auteur

在线演示：https://agiwhitelist.github.io/auteur/

原作者

• GitHub username：agiwhitelist（AGI Whitelist 组织）
• 一句话简介：用 AI 工具链做有审美约束的数字产品，反套路、反模板

介绍

Auteur 的核心思路来自一个观察：AI 生成网站最大的问题不是技术粗糙，而是视觉上没有签名。当所有 AI 都在堆 Inter + 紫色渐变时，真正稀缺的是”一眼就知道是谁做的”的那种辨识度。

为此，Auteur 为 Claude Code 设计了一套导演式管线：先用 Commit-Sheet 锁死艺术决策（主色、字体、运动风格、参考/反参考图），再让 AI 生成对应的素材和代码，最后用 slopscan linter 拒绝 250–290° 紫色渐变、Inter/Space-Grotesk 默认字体、addEventListener(‘scroll’) 动画等套路写法。每一关都有明确的是/否判断，不靠感觉打分。

整个技能以 SKILL.md + 参考配方 + 可执行脚本组成，Clone 后直接放入 Claude Code 的 skills 目录即可使用。slopscan 是零依赖的 Node 脚本，在 CI 中可完整复现，产出的”0 slop”声明不会随时间腐化。

特点

• Commit-Sheet 先决条件：美术方向文档化在代码之前，中途不许”看看效果再改”
• 零依赖反套路 linter：slopscan 纯 Node 脚本，检测 250–290° 紫蓝渐变、Inter 默认字体、all-transition 动画等已知的 AI 套路写法
• 帧率质量门禁：motionqa 用 Playwright 在节流 CPU 上压测，掉帧/长任务/控制台报错直接 fail
• 本地资产生成：Codex / Gemini / Blender / Depth-Anything 按工具所长分配，支持渐进降级
• 无障碍 + 包容性：prefers-reduced-motion → 精美静态；JS 关闭时所有文字可读；390 / 768 / 1440 三端无横向溢出

使用方法

安装：

在终端执行：

git clone https://github.com/agiwhitelist/auteur ~/.claude/skills/auteur

基本调用：

在 Claude Code 中输入：

/auteur build me a cinematic landing with auteur

Claude 会自动执行完整管线：commit-sheet → 资产生成 → 构建 → linter 门禁 → 交付站点。

依赖：

• Claude Code（技能在其内部运行）
• Node 18+（slopscan 零依赖）
• Playwright + Chromium（motionqa 和截图用：npx playwright install chromium）
• 可选：本地媒体 CLI（Codex、Gemini/agy、Blender），不存在时优雅降级到手工资产

运行 linter 验证：

node scripts/slopscan.mjs docs
# → Summary: 0 fails, 0 warns, 0 suppressed

使用场景与人群

• 前端开发者 / 设计工程师：想摆脱 AI 生成页面的模板感，做真正有辨识度的作品集或产品页
• 设计机构 / 创意工作室：需要给客户交付有品牌签名、不是”AI 批量产出”的定制网站
• 独立开发者 / 创业者：让个人项目 landing page 看起来像出自专业团队
• Motion Designer / Art Director：与 AI coding agent 协作时有审美标准，不接受”能用就行”

输入与输出案例

输入（用户告诉 Claude Code）：

build me a cinematic landing with auteur

Claude 读取 SKILL.md，按 commit-sheet 模板要求用户先填写艺术决策，再逐步执行资产生成和构建，最后运行：

node scripts/slopscan.mjs docs
# → Summary: 0 fails, 0 warns, 0 suppressed
node scripts/motionqa.mjs docs/showcase/swarm --headed
# → 60fps, no dropped frames

输出：一个带品牌签名、通过了 slopscan 和 motionqa 双门禁的完整网站，所有滚动动画在节流 CPU 上 60fps 运行，无控制台错误。

Auteur 把 AI 建站从”内容堆砌”升级为”导演创作”——如果你受够了 AI 生成的模板感，这个 Skill 值得一试。

GitHub: https://github.com/agiwhitelist/auteur