agiwhitelist/auteur

## 证据 别只听宣传 —— 打开这六个网站看看。每个都是由 auteur 构建的，并且每个都通过了该 skill 自身的 linter，取得了 **0 失败 / 0 警告** 的成绩： | 网站 | 技术 | 实时演示 | |---|---|---| | **FLUX** | 在光标下撕裂字标的 WebGL 流体模拟 | [打开 ↗](https://agiwhitelist.github.io/auteur/showcase/flux/) | | **STATIC** | 可以通过快速拖动撕碎的广播故障字体，静止时清晰分明 | [打开 ↗](https://agiwhitelist.github.io/auteur/showcase/static/) | | **SWARM** | 在 curl-noise 场上的 131,072 个 GPU 粒子，最终组合成一个字标 | [打开 ↗](https://agiwhitelist.github.io/auteur/showcase/swarm/) | | **DRIFT** | 一个你可以飞越的巨石阵 + 体积雾大气 3D 世界 | [打开 ↗](https://agiwhitelist.github.io/auteur/showcase/drift/) | | **ATLAS** | 逼真的摄像机飞行（沙丘 → 峡谷 → 海岸 → 山顶）—— 真正的 AI 视频，通过滚动控制 | [打开 ↗](https://agiwhitelist.github.io/auteur/showcase/atlas/) | | **ABYSS** | 逼真的海洋潜水（水面 → 珊瑚礁 → 暮光层 → 生物发光 → 深渊）—— 视频 + 由滚动驱动的摄像机推轨 | [打开 ↗](https://agiwhitelist.github.io/auteur/showcase/abyss/) | FLUX / STATIC / SWARM / DRIFT 是实时的 WebGL；**ATLAS** 和 **ABYSS** 属于视频滚动控制层级（参见 `reference/scroll-flight.md`）—— 即带有由滚动驱动的摄像机推轨的逼真视频片段。主页本身是第七个作品 —— 由它所推崇的同一套规范构建而成。 ## 安装 auteur 是一个 Claude Code skill：包含一个 `SKILL.md`、参考配方以及几个可运行的脚本。将它放入你的 skills 文件夹即可。 ``` git clone https://github.com/agiwhitelist/auteur ~/.claude/skills/auteur ``` 然后，在 Claude Code 中： ``` "build me a cinematic landing with auteur" ``` Claude 会运行 pipeline —— 提交表 → 资产生成 → 构建 → 把关 —— 并将网站交付给你。 ## 工作原理 导演的 pipeline，按顺序执行： 1. **提交表。** 一份确定的美术指导 —— 一种单一的品牌色调、一个字体系统、一个动态预算、具名的反面参考 —— 全都在编写任何 *标记语言之前* 写好。杜绝“看看效果如何”的偏移。 2. **生成的资产。** 来自本地 CLI（Codex / Gemini 图像生成、Blender headless、Depth-Anything）的图像、视频帧、深度图和 3D 几何体，根据成本以及各个工具实际擅长的领域进行路由。 3. **构建。** 一个 WebGL context，GSAP/Lenis 滚动，仅在 transform 和 opacity 上进行 DOM 动态 —— 全部来自经过验证的配方：流体、GPGPU 粒子、3D 世界、滚动变形状态机。 4. **把关。** 在通过以下两道关卡之前，任何内容都不会发布。 ### 关卡（这才是关键） **`slopscan`** —— 一个零依赖的 linter，它会在发现具体的同质化内容时 *让构建失败*，而不是凭感觉： ``` node scripts/slopscan.mjs docs # the landing node scripts/slopscan.mjs docs/showcase/flux # → 摘要: 0 个失败, 0 个警告, 0 个已抑制 ``` 它能捕捉 250–290° 的紫色→蓝色 AI 渐变、`transition: all`、用于动画的 `addEventListener('scroll')`、自动播放音频、没有 poster 的视频、没有 `prefers-reduced-motion` 分支的 WebGL、Inter/Space-Grotesk 默认值、破折号泛滥的文案等等。它会在 CI 中对每个发布的页面运行 —— 这样上面关于“0 同质化”的声明就不会悄无声息地失效。 **`motionqa`** —— 一次 Playwright 测试，它会在限流的 CPU 上驱动页面运行，并在出现丢帧、长任务、自动播放声音或控制台错误时失败。网站的目标是 60fps；而这道关卡就是执行这一标准的工具。 ``` node scripts/motionqa.mjs docs/showcase/swarm --headed ``` ## 目录内容 ``` SKILL.md the skill Claude Code loads reference/*.md the recipes: direct, scroll-cinema, scroll-flight, motion, assets, taste, verify, build scripts/slopscan.mjs the anti-slop linter (zero deps) scripts/motionqa.mjs the Playwright motion + a11y gate scripts/shoot.mjs responsive screenshot capture templates/ commit-sheet, storyboard, cinema-QA, design templates + scroll-flight-engine.js — drop-in photoreal scroll-scrubbed-video engine docs/ the landing + the four live showcase sites (GitHub Pages) ``` ## 环境要求 - **Claude Code**（该 skill 在其中运行）。 - **Node 18+** 用于 `slopscan`（零依赖）。 - **Playwright** 用于 `motionqa` / `shoot`（`npx playwright install chromium`）。 - 可选，用于资产生成：任何你拥有的本地媒体 CLI（Codex、Gemini/`agy`、Blender）。该 skill 会路由到可用的工具，并在工具不存在时优雅降级为手工制作的资产。 ## 无障碍基准 auteur 发布的每个网站：`prefers-reduced-motion` → 丰富的静止画面，绝非空白；所有文案在关闭 JavaScript 的情况下依然可读；无全屏频闪；在 390 / 768 / 1440 分辨率下具有响应性且无水平溢出。这些是强制执行的，而非仅仅是期望。 ## 致谢 逼真的滚动控制视频引擎（`templates/scroll-flight-engine.js`） 及其技术改编自 cyw (MIT) 的 **[scroll-world](https://github.com/cth9191/scroll-world)** —— 这是一个专注于 AI 视频摄像机飞行的同级 Claude Code skill。 auteur 将其与自身的资产生成以及 slopscan / motionqa 关卡结合使用。 ## 许可证 MIT © agiwhitelist —— 参见 [LICENSE](LICENSE)。内置的组件保留了它们 各自的 MIT 声明（参见文件头）。

标签：Claude, CVE检测, MITM代理, Syscall, Web开发, 代码质量检查, 前端工程化, 数据可视化, 特征检测, 自动化构建, 自定义脚本, 视觉设计