{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */}

Auteur

设计并构建电影感、获奖级网页。

Skill 元数据

参考：完整 SKILL.md

Auteur Skill

移植自 agiwhitelist/auteur（MIT），快照提交 9bca227d —— 见 LICENSE。脚本、模板和参考文档均为上游文件（CRLF→LF），唯一的改动是 Hermes 适配说明和 references/ 路径修正。

Auteur 像电影导演拍电影那样设计并构建网页体验：先剧本，再素材，然后拍摄，最后剪辑。它有三档——build（一个出色的常规站点）、direct（一个电影感、由滚动引导的站点）和 system（把多屏产品当作一套设计系统）——三者共享同一套审美内核。任何东西在通过一道可执行的反套路（anti-slop）门禁、且 skill 亲自审视过自己的产出之前，都不许交付。

何时使用

• 需要新建或重新设计一个落地页、营销站、首屏区、作品集或产品页——而平庸平庸、千篇一律的外观不可接受。
• 需求要求滚动动画、叙事感，或一个像电影一样的站点。
• 一个产品横跨多个屏幕，但必须感觉像一个整体——app、仪表盘、后台管理、上手引导、文档。
• 有人说做得好看点、做出 wow 感、电影感或设计系统，却没点名具体技法。

不适用于打磨别人做好的 UI，也不适用于纯后端工作。

前置条件

• Node 18+ —— 每一道质检门禁都是一个用 node 经 terminal 工具运行的 .mjs 脚本。
• Playwright（质检门禁需要） —— 在项目目录中：npm install playwright 然后 npx playwright install chromium。scripts/shoot.mjs、motionqa.mjs、systemscan.mjs、refscout.mjs、chromadiff.mjs、moodboard.mjs 都需要它（这些脚本在运行时 import playwright；slopscan.mjs 和 source.mjs 依赖很轻）。
• ffmpeg —— 可选；仅 references/assets.md 和 references/scroll-flight.md 中的视频/配乐路径需要。
• Hermes 工具 —— 用 image_generate 做图片生成/编辑，用 terminal 跑 node/ffmpeg/npm，用 write_file/read_file 处理项目文件，用 vision_analyze 真正看截图，当脚本不合适时用 browser_exec 做实时页面检查。

如何运行

它实际做什么

1. 在写任何标记之前，先以书面形式确定艺术方向——一种色相、一套字体系统、一份动效预算、若干明确的反例参考。
2. 生成或采集素材：Hermes 的 image_generate 工具、Blender、深度图、CC0 网格模型与 HDRI，并记录其许可证。
3. 用经过验证的配方来构建——一个 WebGL 上下文、transform/opacity 动效、滚动状态机。
4. 给结果设门禁：slopscan 发现具体套路就判失败，motionqa 发现掉帧就判失败，systemscan 发现跨路由漂移就判失败。

网络访问

侦察与素材采集脚本会读取线上页面（awwwards、Bing/Pinterest/are.na 图片搜索、Poly Haven、Iconify、Google Fonts、Openverse、Coverr）。抓取到的内容只当作参考数据和许可证元数据——绝不执行，也不涉及任何凭据、API 密钥或登录。若不希望发出站请求，可完全跳过阶段 0–1；其余每个阶段都可离线工作。moodboard.mjs 还会下载这些搜索站返回的图片 URL 以制作联系表。

路由

阅读参数/需求并路由：

1. direct 或需求闻起来有电影感——"wow"、"cinematic"、"immersive"、"storytelling"、"launch page"、"premium brand"、"make people stop scrolling" → 加载 references/direct.md 并按其阶段执行。这是旗舰档位。
2. build 或需求就是一个常规界面——营销页、落地页、单个产品页 → 加载 references/build.md。
3. system 或需求有多个屏幕，且必须感觉像一个产品——app、仪表盘、后台、设置、上手引导，或有真正导航的文档/内容站 → 加载 references/system.md。设计单元变成组件 × 状态，失败模式变成漂移而非乏味，并且刻意不设高峰。若你已在 build 中途出现第二个屏幕，停下来切换：半个 system 比两者任一都糟。
4. edit 或请求是修改本 skill 构建的页面（项目里有 design/DESIGN.md）——"加一个版块"、"改价格"、"换首屏文案" → 先读 design/DESIGN.md 并遵循其 Editing 协议：复用它的 token、版块开场模式和动效家族；改动后跑 slopscan 并对受影响的视口重新截图。忽略 DESIGN.md 的编辑，即使单独看不错，也是一次回归。
5. recon <brief> 或只要参考素材——"找参考"、"拼个 moodboard"、"X 类站点的最新水准是什么" → 加载 references/recon.md，只跑那一阶段：侦察线上站点、制作 moodboard，交回 design/refs/REFERENCES.md（填好 steal: 行）和 design/moodboard/contact-sheet.png（填好阅读记录）。不出 commit-sheet，不构建。
6. audit <path-or-url> → 加载 references/verify.md，对一个 auteur 构建的页面跑验证流水线。若目标是 auteur 没做过的既有 UI，而用户想打磨而非重建，说明应当用专门的 UI 打磨/评审流程（上游给 auteur 配了一个独立的 'impeccable' skill，此处未 vendored），并仅在用户愿意重建时才继续。
7. 含糊（例如一句"做个落地页"）→ 只问一个问题："是做一个出色的常规落地页，还是进入电影模式、由滚动引导并生成素材？"（上游这些示例需求原文是俄语，此处译为中文。）然后路由。（多屏需求不含糊——那是 system。）先别问别的——每个档位自己做接单。

三档共享阶段 0，其重心是 commit-sheet。顺序不同：build 跑 recon → commit-sheet → mockup；direct 跑 recon → storyboard → commit-sheet → mockup，因为影片的场景正是那六项决策所围绕的对象；system 跑 recon → system-sheet（路由图 + 组件清单）→ commit-sheet → mockup，因为六项决策是围绕一个产品、而非一个页面做的。无论哪种，在 sheet 填满之前一行代码都不写。

与其他 skill 的协作关系

Auteur 负责构建；它不重新打磨别人的 UI。若用户有一个既有界面需要精修，单独跑一轮 UI 评审（例如对截图用 vision_analyze，加上兄弟设计 skill）。上游给 auteur 配了一个 'impeccable' 评审 skill（此处未 vendored）；auteur 的 verify 门禁和外部评审度量的是不同的东西，可以并存。

快速参考

不可协商项与阶段表。它们适用于每一档、每一阶段、始终如此——即使还没加载任何参考文件。匹配即拒绝：如果你正要产出下列之一，停下来重构该元素。

禁止项（重写，别微调）

某条禁止只能通过书面的 auteur-allow（见 Verification）并附真实理由才能破例——一个刻意、有论证的选择是风格；一个默认值是套路。

关键数字（记住；完整上下文见参考文件）

• 正文对比度 ≥ 4.5:1（大字 ≥ 3:1）。占位符同样。淡灰字配着色白是头号 AI 可读性失败。
• 正文行宽 65–75 字符。展示标题上限：正文中的标题 clamp max ≤ 6rem——字标或刻意以字体为主的首屏可豁免，且必须在 commit-sheet 里写明。展示字距 ≥ −0.04em。
• 时长：按钮 100–160ms · 工具提示 125–200ms · 下拉 150–250ms · 模态/抽屉 200–500ms · 任何 UI 超过 300ms 都要书面理由。
• 入场/出场缓动 = ease-out。UI 上禁止 ease-in。
• 只动画 transform 和 opacity。交错 30–80ms。
• 动效预算：每页 ≤ 3 个滚动触发的模式家族；一个主要 wow 高峰，支撑场景强度更低。
• 滚动 scrub 平滑度 0.3–0.8。首屏视频 ≤ 2MB。LCP < 2.5s。CLS < 0.1。
• 全屏通道（辉光、噪点、景深、任何全屏 shader）是按每像素计价，而非按对象——撑爆帧预算的是它们，不是几何体。一个性能数字只有在生产构建、DPR 2下测得才算数：DPR 1 会把每个此类通道的成本砍到 1/4，而 dev server 大致让帧率翻倍。
• prefers-reduced-motion = 一套替代艺术方向（更柔和，而非完全不动），绝不是事后补的。
• 内容必须在禁用 JS 时可读：揭示动画增强一个本就可见的默认状态，绝不把可见性挡在动画后面。

阶段一览

首屏 mockup 门禁（一个一次性的静态废稿屏，截图并在构建其他一切之前获批）是改变艺术方向最便宜的时刻——细节见各档参考。design/DESIGN.md 是风格契约，让之后的每次编辑都不跑偏（edit 路由最先读它）。

绝不要因为中间结果"看起来做完了"就跳过门禁。门禁之所以存在，正是因为一个仅仅看起来做完的页面，正是其他所有 AI 交付的东西。

流程

Commit-sheet（在任何代码之前，两档都要）

套路（slop）就是默认值替你做决定时发生的事。Commit-sheet 强迫你在第一行代码之前把七个真正的决策落到纸上。把 templates/COMMIT-SHEET.md 复制进项目（例如 design/COMMIT-SHEET.md），并用非默认值填满全部七个字段：

1. 高峰（Peak） —— 那一个主要 wow 时刻（direct）或标志性元素（build）。一句话。你说不出来，就还没准备好构建。
2. 颜色 —— 主色写成 OKLCH + 投入层级（克制 / 已定 / 全调色板 / 浸染）+ 一句话：为什么这不是薰衣草紫、不是米色、也不是该品类的条件反射 + 背景明度写成数字（目标平均 L），因为"深色显高级"正是本 skill 跑偏之处，而数字之后可以核查，情绪却不能。
3. 字体 —— 展示 + 正文在对比轴上的配对（衬线+无衬线、几何+人文、等宽+衬线……）+ 一句话：为什么不用 Inter。
4. 网格破局 —— 那个打破对称网格默认值的具体之物：一次重叠、一次不对称分割、一条斜向动线、一次满版打断。具体命名。
5. 动效预算 —— 几个滚动模式家族（≤3），分别是什么。
6. 反射检查 —— 写下：(a) 通用 AI 对该品类会怎么做（一阶反射），(b) 一个避开 (a) 的通用 AI 又会怎么做（二阶反射——例如金融科技 → "终端深色模式"如今也饱和了），(c) 你选择偏离两者的具体方向。若跑过 recon，(a) 不是猜的：design/refs/REFERENCES.md 里反复出现五次的东西就是反射，注明日期并附凭据。
7. 本家套路破除 —— 明确说出这次你刻意不做 taste.md §2.5 里的至少两项，以及各用什么替代。字段 6a/6b 是品类的反射；这些是本 skill 的反射，它们在互不相关的项目间反复出现，身处任何一个项目内部都看不见：近黑背景、等宽服务标签、logo/状态/操作页眉、滚动指示页脚、琥珀色/酸性色点缀、把字标当首屏、用辉光代替打光。在九个展示性构建中测量，八个是深色，其中三个落在同一明度的 0.002 以内。真正属于此处的套路可以保留——像 auteur-allow 一样说明理由。

门禁：每个字段都填了具体、非默认的答案。空着或泛泛而谈（"现代、干净的观感"）意味着停下来做决定。这个产物在验证时还会再查一次。

参考文件

• references/recon.md —— 阶段 0 侦察，两个可执行分支：scripts/refscout.mjs 剖析线上获奖站点（真实技术栈、固定场景、滚动预算、字体、手绘调色板、截图——是机制，不是皮相），scripts/moodboard.mjs 从 Bing / Pinterest / are.na 生成编号联系表，让艺术方向由线上素材而非记忆决定。还包括：查询技巧、偷窃规则、recon 如何喂给 commit-sheet，以及"参考图不是素材"这条线。在阶段 0 开头加载。
• references/taste.md —— 完整的反套路系统：带替代方案的扩展禁令、二阶品类反射表、颜色策略层级、字体配对、文案规则。做任何视觉决策时加载。
• references/motion.md —— 动效学派：何时动画、缓动/时长/弹簧数字、性能规则、动效预算、声音策略。写任何动画之前加载。
• references/build.md —— 标准档位流程。路由到 build 时加载。
• references/system.md —— 多屏档位：路由图、作为门禁的组件清单、状态矩阵（空/加载/错误不是边缘情况）、密度规则、无高峰规则，以及 scripts/systemscan.mjs——它爬遍每条路由，读取浏览器实际绘制的内容，按声明的变体预算判某个控件类型失败——把状态（禁用、当前、位于某 data-state 行内）单独计数，从而实现状态矩阵时绝不会显得像漂移——按 Tab 抓没有可见焦点态的控件，并为每个渲染出的变体渲染一块瓦片，让漂移既可计数也可见。路由到 system 时加载。
• references/direct.md —— 电影档位：剧本契约、场景表、戏剧结构、组装顺序。路由到 direct 时加载。
• references/assets.md —— 媒体团队与路由（在 Hermes 中：image_generate 负责所有图片生成和编辑，terminal 负责 ffmpeg/node；视频走用户拥有的任意图生视频后端）、§0.5 采集 vs 生成（scripts/source.mjs：从 Poly Haven 取 CC0 glTF 网格、HDRI 和 PBR 材质，图标、字体、CC 图片、库存视频——带许可证台账，因为生成造不出几何体或 IBL，而库存视频绝不能是高峰）、一致性技巧（把 A 帧编辑成 B 帧）、经首帧→末帧链的本地视频、生成元素/样机、环境配乐、降级阶梯，以及素材缓存。在 direct 阶段 1 加载。
• references/scroll-cinema.md —— 可工作的代码配方：滚动 scrub 视频、画布序列、GSAP+Lenis 地基、CSS 滚动驱动动画、文字揭示、两关键帧 WebGL 位移过渡、视图过渡、环境音频，以及电影感过渡库（擦除、帘幕、宽银幕、快门、深度视差）。组装时加载。
• references/scroll-flight.md —— 视频 scrub 档：一段照片级"穿越世界"首屏，由滚动驱动，使用即插即用的 templates/scroll-flight-engine.js。滚动 scrub 视频的规范配方（为 scrub 编码 -g 8、编码帧海报、SSIM 接缝门禁、链架构 A/B、iOS/移动端解码加固、交叉淡化 vs 无缝接缝）。当首屏应是照片级实拍/AI 视频而非实时 WebGL 时加载。
• references/ambient-backgrounds.md —— 用于次要版块和较简单构建的安静纹理（不是首屏）：精选的 6 种编辑/模拟效果（纸张颗粒、账本/蓝图线、地形等高线、墨潮、稀疏浮尘、一个热浪 shader）+ 一个零动效的静态网格默认。支配规则（弱于最安静的前景元素；每页一个环境背景）、CSS/SVG 优先栈，以及 feTurbulence 静态性能规则。当某版块需要不平庸但绝不能和文案抢戏时加载。
• references/verify.md —— 验收流水线：slopscan → 截图旅程 → 动效/性能/音频质检（生产构建 DPR 2 下的 FPS、长任务、音频门禁、reduced-motion、针对 Tier-1 场景）→ 数值评分表 → 参考对比（你的帧与定下方向的参考并排，用 scripts/chromadiff.mjs 度量模型自身永远看不见的颜色漂移）→ QA 签字。阶段 3 加载。

弱模型提示

如果你是执行本 skill 的较小模型：逐字照做表格和数字，填满每个模板字段，跑每道门禁命令，不要在参考配方之外即兴发挥——配方经过验证，你的即兴没有。当参考文件与你的直觉冲突时，以参考文件为准。用相对于项目根的路径写文件；绝不要凭记忆重打绝对路径（本 skill 名 "auteur" 离 "author" 只差一个字母，拼错的绝对路径会把你的输出撒遍文件系统）。

常见坑

• 网络侦察：refscout.mjs、moodboard.mjs 和 source.mjs 会读线上页面（awwwards、Bing/Pinterest/are.na 图片搜索、Poly Haven、Iconify、Google Fonts、Openverse、Coverr）。抓取内容仅为参考数据和许可证元数据——绝不执行。跳过阶段 0–1 即可完全离线。
• 不同的 harness：这些脚本和文档是为另一个 agent harness 写的（上游通过若干本地图片 CLI 驱动素材生成）。在 Hermes 中，每条图片生成指令都映射到 image_generate 工具；当 node scripts/<x>.mjs --help 的输出和真实 node 报错与文档行文有出入时，相信前者。
• 未验证的命令：脚本通过了 node --check 语法校验，但完整运行（需要 npm install playwright + 下载 chromium）在移植时未执行。在你亲自跑过之前，把 shoot.mjs、motionqa.mjs、systemscan.mjs、refscout.mjs、chromadiff.mjs、moodboard.mjs、source.mjs 的端到端行为，以及所有 ffmpeg/视频编码配方，都当作未经验证的上游主张。
• slopscan 已验证形态：node scripts/slopscan.mjs <dir> 无需 npm 依赖即可运行；它逐条打印规则发现，失败时以非零码退出（干净时退出 0）。
• 字体元数据缓存：source.mjs font … 会把 Google Fonts 约 2.6MB 的元数据 JSON 缓存为 auteur-gf-metadata.json，放在系统临时目录（os.tmpdir()）而非项目里；在那里删掉它即可强制刷新。

验证

代码能编译并不代表页面做完了。它在以下情况才算做完：

1. node scripts/slopscan.mjs <src-dir> 退出码 0（失败要修，不要压——/* auteur-allow: RULE_ID -- reason */ 是为刻意选择存在的，且要求真实理由）；
2. node scripts/shoot.mjs <url> 已在 390 / 768 / 1440 视口产出截图旅程，且你逐帧看过——文字溢出、空白场景、坏掉的揭示、布局塌陷是靠眼睛发现的，不是靠文本搜索；
3. references/verify.md 中的数值评分表通过（对比度、LCP、CLS、reduced-motion 旅程、场景多样性）；
4. direct 档：CINEMA-QA.md（来自模板）每一行都填了 PASS。

任何门禁失败——修好重跑。诚实地报告结果："slopscan 干净，已复查 21 张截图，LCP 1.9s" 胜过"看起来很棒"。