Auteur

设计与构建电影级、获奖水准的网页。

技能元数据

来源	可选 — 使用 hermes skills install official/creative/auteur 安装
路径	optional-skills/creative/auteur
版本	1.3.1
作者	agiwhitelist (https://github.com/agiwhitelist, 上游 agiwhitelist/auteur)，由 Hermes Agent 移植
许可证	MIT
平台	linux, macos, windows
标签	web-design, cinematic, scroll-animation, design-system, anti-slop, frontend
相关技能	popular-web-designs, design-md, p5js

参考：完整 SKILL.md

信息

以下是 Hermes 在此技能被触发时加载的完整技能定义。这就是技能激活时智能体看到的指令。

Auteur 技能

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

Auteur 设计并构建网页体验，如同电影导演拍摄一部电影：先剧本，再素材，然后拍摄，最后剪辑。它有三种呈现方式——build（一个出色的常规站点）、direct（一个电影级滚动叙事的站点）和 system（一个多屏幕产品作为统一的设计系统）——共享同一套审美内核。在页面通过可执行的防 slop 关卡、且技能审视过自己的产出之前，任何东西都不会发布。

何时使用

• 一个落地页、营销站点、主视觉区域、作品集或产品页需要构建或重新设计——而看起来千篇一律是不可接受的。
• 需求要求滚动动画、叙事，或一个感觉像电影的站点。
• 一个产品横跨多个屏幕，必须感觉是一体的——app、仪表盘、后台、引导流程、文档。
• 有人说把它做得漂亮、让它惊艳、电影级，或设计系统，而没有指定任何具体技法。

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

前置条件

• Node 18+ — 每个质量关卡都是一个 .mjs 脚本，通过 terminal 工具用 node 运行。
• Playwright（用于质量关卡） — 在项目目录中：npm install playwright 然后 npx playwright install chromium。scripts/shoot.mjs、motionqa.mjs、systemscan.mjs、refscout.mjs、chromadiff.mjs、moodboard.mjs 都需要它（脚本在运行时导入 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 会因具体的 slop 让构建失败，motionqa 会因丢帧让其失败，systemscan 会因跨路由漂移让其失败。

网络访问

侦察与素材脚本会读取实时页面（awwwards、Bing/Pinterest/are.na 图像搜索、Poly Haven、Iconify、Google Fonts、Openverse、Coverr）。抓取的内容只作为参考数据和授权元数据对待——绝不执行，也不涉及任何凭据、API 密钥或登录。如果你不想发起对外请求，可完全跳过阶段 0–1；其余所有阶段都可离线运行。moodboard.mjs 还会下载搜索主机返回的图片 URL，用于构建接触印相图（contact sheet）。

路由

读取参数／命题并路由：

1. direct 或命题带有电影感——"wow"、"cinematic"、"immersive"、"storytelling"、"launch page"、"premium brand"、"make people stop scrolling" → 加载 references/direct.md 并遵循其阶段。这是旗舰档位。
2. build 或命题只有 ONE（一个）常规界面——一个营销页、一个落地页、一个单一产品页 → 加载 references/build.md。
3. system 或命题有不止一个屏幕，且必须让人感觉像同一个产品——应用、仪表盘、管理后台、设置、引导流程，或带有真实导航的文档／内容站点 → 加载 references/system.md。这时设计单元变成组件 × 状态，失败模式变成漂移而非无聊，并且刻意没有高峰。如果你已经在 build 中，又出现了第二个屏幕，立即停下并切换：半个系统比两者中任何一个都糟。
4. edit 或请求是要修改本 skill 构建过的页面（项目包含 design/DESIGN.md）——"add a section"、"change the pricing"、"swap the hero copy" → 首先读取 design/DESIGN.md 并遵循其 Editing 协议：复用它 token、区块开场模式和动效族；变更后运行 slopscan 并重新截取受影响的视口。忽略 DESIGN.md 的修改即使单独看效果不错，也是一种回归。
5. recon <brief> 或请求只是要参考素材——"find references"、"put together a moodboard"、"what's the state of the art for X sites" → 加载 references/recon.md 并只运行该阶段：侦查实时站点，构建情绪板，交回 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. 模棱两可（例如只说 "make a landing page"）→ 只问一个问题："A great conventional landing page, or cinema mode with scroll direction and generated assets?"（上游将这些示例命题用俄语表述；此处已转译。）然后路由。（多屏命题不算模棱两可——它们是 system。）先别问其它任何东西——每个档位都有自己的 intake 流程。

三个档位共享阶段零，其重心是 commit-sheet。顺序不同：build 运行 recon → commit-sheet → mockup；direct 运行 recon → storyboard → commit-sheet → mockup，因为影片的场景才是六项决策所针对之物；system 运行 recon → system-sheet（路由图 + 组件清单）→ commit-sheet → mockup，因为六项决策是针对一个产品作出的，而不是针对一个页面。无论哪种，在表单填满之前都不写代码。

与其他 skill 的协作关系

Auteur 构建；它不对外来 UI 做二次打磨。如果用户已有想优化的界面，就运行一次单独的 UI 评审流程（例如对截图运行 vision_analyze，外加配套的设计 skill）。上游把 auteur 与一个 'impeccable' 评审 skill 配套（不在此 vendored）；auteur 的 verify 关卡与外部评审衡量的是不同的事，可以欣然共存。

快速参考

这是不可妥协事项与阶段表。它们始终适用于每一个档位、每一个阶段——即使尚未加载任何参考文件。匹配即拒绝：如果你即将产出其中某一种东西，停下来，重构该元素。

禁止使用（直接重写，不要小修小补）

#	禁止项	改用
1	在卡片、标注框、警示框上，使用宽度超过 1px 的 border-left/border-right 作为彩色强调装饰	完整边框、背景底色微调、前导图标，或者干脆不用
2	渐变文字（background-clip: text + 渐变）	单一纯色；通过字重或字号强调
3	将毛玻璃效果作为默认风格（装饰性的 backdrop-filter 卡片）	少用且有目的地使用，或者改用实心表面
4	主视觉指标模板（大数字、小标签、统计排名、渐变强调）	用散文形式陈述证据，配一个有力的视觉呈现
5	完全相同的卡片网格（重复的等大图标+标题+文字）	改变大小、结构，或者彻底去掉卡片
6	每个章节上方都加眉题开场标（小字号、全大写、带字距的标签）	作为品牌系统最多在一处有目的地使用；变化章节开场方式
7	当顺序本身没有含义时，使用带编号的章节框架（01 / 02 / 03）	只有确实存在序列关系时才用编号
8	将 Inter 或 Space Grotesk 作为首选字体	从对比轴上成对选择字体（见 taste.md）；这两款是 2024–2026 年 AI 生成内容的默认字体
9	紫色→蓝色渐变（两个色相都在 250–290 之间）	确定的品牌色相，或者不用渐变
10	作为「温暖感」的条件反射而使用奶油色/暖米色正文背景（OKLCH L 0.84–0.97，C <0.06，色相 40–100）	饱和的品牌表面色、真正接近零色度的灰白，或者带色调的深色中间调；温暖感应该来自强调色 + 字体 + 图像
11	每个章节都使用相同的淡入/上滑入场	每次揭示要与它所揭示的内容相匹配；变化缓动、距离、方向
12	transition: all	逐一列出被动画的属性
13	window.addEventListener('scroll', ...)	IntersectionObserver、GSAP ScrollTrigger，或者 CSS animation-timeline
14	scale(0) 入场	从 scale(0.95) + 透明度开始
15	由近乎相同或空白的单元格组成的 Bento 网格；白卡片叠在白底上的 Bento	Bento 只有在每个单元格都有真实的视觉变化时才使用，否则换一种布局
16	文案套路： 「Revolutionize」、「Seamless」、「Effortless」、「Unleash」、「Elevate」、满是破折号的句子、类似「BRAND. MOTION. SPATIAL.」的装饰条	用平实的语言陈述具体的论点
17	每页超过一个跑马灯效果	一个，或者不用
18	条件反射式地将 Instrument Serif / Playfair Display 当作「优雅衬线体」	衬线体应基于品牌选择，而不是从 AI 默认短名单中选取

禁令只有在通过书面 auteur-allow（见 Verification 章）并给出实际理由时才能豁免——深思熟虑、有据可辩的选择是你的声音；默认选择则是低质内容。

关键数字（必须记住；完整背景见参考文件）

• 正文对比度 ≥ 4.5:1（大号文字 ≥ 3:1）。占位符也一样。淡灰文字叠在带色调的白色上，是 AI 最常见的可读性第 1 号失败。
• 正文行宽 65–75ch。大标题上限：clamp 最大值 ≤ 6rem——针对正文流中的标题。文字标志或有意以排印为主的主视觉不受此限，且 commit-sheet 中必须说明。大字号字距 ≥ −0.04em。
• 各时长：按钮 100–160ms · 工具提示 125–200ms · 下拉菜单 150–250ms · 模态/抽屉 200–500ms · 任何超过 300ms 的界面动画都需要书面理由。
• 进入/退出缓动 = ease-out。界面上禁止使用 ease-in。
• 只对 transform 和 opacity 做动画。交错延迟 30–80ms。
• 动效预算：每页 ≤ 3 个滚动触发的模式族；一个主要的高光峰值，辅助场景用更低的强度。
• 滚动擦除平滑度 0.3–0.8。首页视频 ≤ 2MB。LCP < 2.5 秒。CLS < 0.1。
• 全屏处理效果（泛光、颗粒、景深、任何全屏着色器）的代价按像素计算，而非按对象计算——它们才是吃掉帧预算的主因，不是几何体本身。性能数据只有在 DPR 2 的生产构建下实测才算数：DPR 1 会让每个此类处理的成本降到四分之一，而开发服务器大约会使帧时间翻倍。
• prefers-reduced-motion 意味着另一套艺术方向（更柔和，而不是完全没有），绝不是事后补丁。
• 内容在 JS 禁用时必须可读：揭示动画是在已有的可见默认之上做增强，绝不能把控可见性。

各阶段概览

阶段	构建语域	直接语域	系统语域	要加载的参考文件
0	侦察 → commit-sheet → 主视觉样稿关卡	侦察 → 剧本（STORYBOARD.md） → commit-sheet → 主视觉样稿关卡	侦察 → SYSTEM-SHEET.md（路由 + 组件清单 + 状态） → commit-sheet → 样稿关卡	recon.md，然后 build.md / direct.md / system.md
1	—	资产制作（生成 → 编辑 → 优化）	—（通过 source.mjs 提供图标/字体来源）	assets.md
2	构建页面	组装影片（先做平滑滚动，然后主视觉，然后自上而下逐场景）	tokens → 外壳 → 按流量顺序排列页面 → 每个状态	build.md / scroll-cinema.md / system.md + taste.md + motion.md
3	验证	验证 + CINEMA-QA.md	验证 + 跨每个路由的 systemscan	verify.md
4	锁定风格：填写 design/DESIGN.md	同上	同上，但 DESIGN.md 是组件契约	templates/DESIGN.md

主视觉样稿关卡（在开始构建其他内容之前，用一个一次性的静态画面截图并获得确认）是改变艺术方向最廉价的时机——细节见各语域的参考文件。design/DESIGN.md是风格契约，确保之后每一次修改都保持风格一致（edit 路由会首先读取它）。

绝不要因为中间结果「看起来完成了」就跳过关卡。关卡存在的意义正是因为——仅仅看起来完成的作品，恰恰是所有其他 AI 交付的东西。

流程

承诺单（写任何代码之前，两个语域都要做）

慵懒感源自让默认值替你做出决定。承诺单强制你在写下第一行代码之前，先在纸面上完成七个真实的决定。把 templates/COMMIT-SHEET.md 复制进项目（例如 design/COMMIT-SHEET.md），然后为全部七个字段填入非默认答案：

1. 峰值 — 那一个主打的惊艳瞬间（direct）或标志性元素（build）。一句话说清。如果你说不出来，就还不该动手。
2. 颜色 — 主色用 OKLCH 表示 + 承诺层级（克制 / 投入 / 全色板 / 浸染）+ 一行说明：为什么这不是薰衣草紫、不是奶油色、也不是该类别的条件反射式用色 + 把背景亮度写成数字（目标平均 L），因为“暗色显得高级”正是这个技能容易滑落的地方，而数字事后可核验，情绪不能。
3. 字体 — 在对比轴上配对展示字体与正文字体（衬线+无衬线、几何+人文、等宽+衬线……）+ 一行说明：为什么不是 Inter。
4. 破格 — 用来打破对称网格默认值的那个具体做法：一处叠压、一次不对称分割、一种对角流向、一处满版打断。具体到名字。
5. 动效预算 — 有多少个滚动模式族（≤3），它们分别是什么。
6. 反射检查 — 写下：(a) 一个普通 AI 针对这个类别会怎么做（一阶反射），(b) 一个避免 (a) 的普通 AI 会怎么做（二阶反射——例如，金融科技→“终端深色模式”如今也饱和了），(c) 你选择的相对于两者都不同的偏离。如果跑了侦察，(a) 就不靠猜：design/refs/REFERENCES.md 里出现了五次的那个东西就是反射，有日期、有凭证。
7. 已打破的本人习惯 — 从 taste.md §2.5 中挑出你这次刻意不做的两项（至少），并写出每一招用什么替代。第 6a/6b 字段是类别的反射；这些是这个技能自己的反射——它们跨不相关的项目反复出现，从任何单个项目内部看不见：近黑背景、等宽服务标签、logo/状态/操作构成的页眉、滚动提示页脚、琥珀色或酸性色点缀、商标字当主角、用辉光代替打光。对九个 showcase 作品做测量，八个是暗色，三个的亮度落在同一个值的 0.002 以内。一个真正属于当前项目的习惯可以保留——就必须说明理由，如 auteur-allow 一样。

关卡：每个字段都要填具体的、非默认的答案。空着或笼统（“现代、干净的感觉”）就意味着停下来做决定。这份产出在验证阶段还会被复查一次。

参考文件

• references/recon.md — 阶段 0 侦察，两条可执行腿：scripts/refscout.mjs 对在线的获奖级站点做剖析（真实技术栈、固定场景、滚动预算、字体、实际绘制的调色板、截图——是机械机理，不是皮相），scripts/moodboard.mjs 从 Bing / Pinterest / are.na 汇出一张编号联络表，让美术方向由现场素材决定而非凭记忆。另外包括：查询话术、借鉴规则、侦察如何输入承诺单，以及“参考图不是素材”这条界线。在阶段 0 开头加载。
• references/taste.md — 完整的反慵懒系统：带替代方案的翻倍禁令、二阶类别反射表、颜色策略层级、字体配对、文案规则。做任何视觉决策时加载。
• references/motion.md — 动效学派：何时该动、缓动/时长/弹簧的参数、性能规则、动效预算、声音政策。写任何动画之前加载。
• references/build.md — 标准 build 语域流程。被路由到 build 时加载。
• references/system.md — 多屏语域：路由地图、作为关卡存在的组件清单、状态矩阵（空/加载/错误不是边缘情况）、密度规则、禁止峰值规则，以及 scripts/systemscan.mjs——它会爬遍每条路由、读取浏览器真正绘制出来的结果、对超出其声明变体预算的控件类型判负——并且把状态（disabled、current、位于 data-state 行内的）单独计数，这样实现状态矩阵永远不会被读成漂移——它会按 Tab 键抓出没有可见聚焦状态的控件，并为每个渲染出的变体渲染一块拼图，让漂移既可被计数、也可被看见。被路由到 system 时加载。
• references/direct.md — 电影语域：剧本契约、场景表、戏剧设计、装配顺序。被路由到 direct 时加载。
• references/assets.md — 媒体剧组与路由（在 Hermes 中：所有图片生成与编辑用 image_generate，ffmpeg/node 用 terminal；视频走用户所拥有的任何图生视频后端）、§0.5 取材对比生成（scripts/source.mjs：来自 Poly Haven 的 CC0 glTF 网格、HDRI 与 PBR 材质，图标、字体、CC 图像、stock 视频——附带许可台账，因为生成做不出几何体或 IBL，而且 stock 视频绝不是峰值）、一致性技巧（把帧 A 编辑成帧 B）、经由首→末帧串成的本地视频、生成元素/样机、环境配乐、降级阶梯，以及素材缓存。在 direct 阶段 1 加载。
• references/scroll-cinema.md — 可直接使用的代码配方：滚动拖拽视频、canvas 序列、GSAP+Lenis 基础、CSS 滚动驱动动画、文字揭示、双关键帧 WebGL 位移转场、视图过渡、环境音频，以及电影转场库（擦除、幕布、信箱、快门、景深视差）。在装配环节加载。
• references/scroll-flight.md — 视频拖拽层级：一个由滚动驱动的照片级“飞越世界”hero，用可即插即用的 templates/scroll-flight-engine.js。滚动拖拽视频的经典配方（为拖拽编码 -g 8、编码帧作海报帧、SSIM 接缝关卡、A/B 串链架构、iOS/移动端解码加固、交叉淡出与无缝接缝的取舍）。当 hero 应为照片级素材/AI 视频而非实时 WebGL 时加载。
• references/ambient-backgrounds.md — 面向次要区块和较简单构建的安静质地（不是 hero）：精心挑选的 6 种编辑/模拟效果（纸纹、账簿/蓝图格线、等高线、墨潮、疏尘、一个热浪着色器）+ 一个零动的静态网格默认方案。支配规则（比最安静的前景元素还要弱；每页一个环境效果）、以 CSS/SVG 优先的技术栈，以及 feTurbulence 静态化的性能规则。当一个区块需要不做平板一块、但绝不能与文案争抢时加载。
• references/verify.md — 验收管线：slopscan → 截图旅程 → 动效/性能/音频 QA（production 构建下 DPR 2 的 FPS、长任务、音频门、减弱动效，针对 Tier-1 场景）→ 数字评分量表 → 参考对照（你的帧放在那个定下方向的参考图旁边，用 scripts/chromadiff.mjs 测量模型自己永远看不见的颜色漂移）→ QA 签核。在阶段 3 加载。

弱模型提示

如果你是一个执行此技能的较小模型：请按表格和数字字面照做，填写每一个模板字段，运行每一个检验命令，不要超出参考配方进行即兴发挥——配方是经过验证的，你的即兴发挥不是。当参考文件与你的直觉冲突时，以参考文件为准。写入文件时使用相对于项目根目录的路径；切勿凭记忆重新敲写绝对路径（技能名 "auteur" 与 "author" 仅一字之差，拼错的绝对路径会把你的输出散落到文件系统各处）。

陷阱

• 网络侦察：refscout.mjs、moodboard.mjs 和 source.mjs 会读取实时页面（awwwards、Bing/Pinterest/are.na 图像搜索、Poly Haven、Iconify、Google Fonts、Openverse、Coverr）。获取的内容仅为参考数据和许可元数据——绝不要执行它。跳过阶段 0–1 可保持完全离线。
• 不同的执行框架：这些脚本和文档是为另一个智能体执行框架编写的（上游通过多个本地图像 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 缓存为操作系统临时目录（os.tmpdir()）中的 auteur-gf-metadata.json，而非项目目录；要强制刷新，请在该位置删除它。

验证

页面不是在代码能编译时就完成了。完成的标准是：

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、减少动态效果历程、场景多样性）；
4. 对于 direct register：CINEMA-QA.md（来自模板）每一行都填写为 PASS。

如果任何检验失败——修复并重新运行。如实报告结果："slopscan clean, 21 screenshots reviewed, LCP 1.9s" 胜过 "looks great"。