auteur

Auteur 设计并构建 Web 体验的方式，就像电影导演拍摄电影：先写剧本，再准备素材，然后拍摄，最后剪辑。它有三种模式——build（出色的常规网站）、direct（由滚动驱动的电影感网站）和 system（作为统一设计系统的多屏产品）——共用一套审美核心。只有当页面通过可执行的反劣质设计检查，且该技能审视过自身产出后，内容才会发布。

适用场景

• 需要构建或重新设计落地页、营销网站、主视觉区块、作品集或产品页面——而且不能看起来平庸。
• 需求涉及滚动动画、叙事，或营造电影般的体验。
• 某个产品包含多个必须浑然一体的界面——应用、仪表板、管理后台、引导流程、文档。
• 有人说“做得漂亮”“做出惊艳效果”“有电影感”或“设计系统”，却没说明具体方法。

不适用于润色他人构建的 UI，也不适用于纯后端工作。

实际功能

1. 在编写任何标记之前，以书面形式确定艺术指导——一种色调、一套字体系统、一个动效预算，以及明确列出的反向参考。
2. 生成或获取素材：本地图片/视频 CLI、Blender、深度图、CC0 网格和 HDRI，并记录相应许可。
3. 基于经过验证的方案构建——一个 WebGL 上下文、变换/不透明度动效、滚动状态机。
4. 对结果进行门禁检查：slopscan 会针对具体的劣质设计问题使构建失败，motionqa 会针对丢帧使构建失败，systemscan 会针对跨路由偏差使构建失败。

网络访问

侦察和素材获取脚本会读取实时页面（awwwards、Bing/Pinterest/are.na 图片搜索、Poly Haven、Iconify、Google Fonts、Openverse、Coverr）。获取的内容仅作为参考资料和许可元数据处理——绝不会执行，也不会涉及凭据、API 密钥或登录。如果不希望发起出站请求，可完全跳过阶段 0–1；其他所有阶段均可离线运行。

不可妥协的要求

这些要求始终适用于每种模式、每个阶段——即使没有加载任何参考文件。如果即将产出以下任何内容，请停止并重新设计该元素。

禁止项（重写，不要微调）

#	禁止项	替代方案
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）	使用高饱和度的品牌表面、色度约为 0 的真正灰白色，或更深的带色调中间色；通过强调色、字体和图像来营造温暖感
11	每个区块都使用相同的淡入／上滑入场动画	根据展示内容设计每种动画；改变缓动、距离和方向
12	transition: all	列出要设置动画的属性
13	window.addEventListener('scroll', ...)	使用 IntersectionObserver、GSAP ScrollTrigger 或 CSS animation-timeline
14	使用 scale(0) 入场	从 scale(0.95) + opacity 开始
15	使用单元格几乎相同或空白的 Bento 网格；在白色 Bento 网格中使用白色卡片	仅在每个单元格有实际视觉变化时使用 Bento 网格，否则改用其他布局
16	文案套话：“Revolutionize”“Seamless”“Effortless”“Unleash”“Elevate”、大量使用破折号的句子，以及“BRAND. MOTION. SPATIAL.”这类装饰性标语	用朴实的语言陈述具体主张
17	每页使用多个跑马灯	使用一个，或不使用
18	将 Instrument Serif / Playfair Display 本能地用作“优雅衬线字体”	根据品牌选择衬线字体，而不是从 AI 常用清单中挑选

仅当通过书面 auteur-allow（见“验证”）说明充分理由时，才可豁免某项禁令。经过深思熟虑并有理有据的选择体现风格；默认套用则是敷衍。

关键数字（请牢记；完整背景见参考文件）

• 正文文本对比度 ≥ 4.5:1（大号文本 ≥ 3:1）。占位符也必须符合要求。灰色文字置于带色调的白色背景上，是 AI 设计中最常见的可读性问题。
• 正文行长为 65–75ch。展示型标题的上限：在正文流中的标题，clamp 最大值 ≤ 6rem；字标或刻意以字体排印为主的英雄区不受此限，但提交说明必须注明。展示型文字的字距 ≥ −0.04em。
• 动画时长：按钮 100–160ms · 工具提示 125–200ms · 下拉菜单 150–250ms · 模态框／抽屉 200–500ms · 任何 UI 动画超过 300ms 都需要书面说明理由。
• 进入／退出动画使用 ease-out。UI 禁止使用 ease-in。
• 仅对 transform 和 opacity 设置动画。错开间隔为 30–80ms。
• 动效预算：每页滚动触发的动画模式系列 ≤ 3 个；一个主要惊艳效果峰值，辅助场景的强度应更低。
• Scrub 平滑度为 0.3–0.8。英雄区视频 ≤ 2MB。LCP < 2.5s。CLS < 0.1。
• 全屏效果（泛光、颗粒、景深、任何全画幅着色器）的成本按像素计，而非对象计——超出帧预算的原因是这些效果，而不是几何体。性能数据只有在生产构建中以 DPR 2 测得才有效：DPR 1 会将这些效果的成本降至四分之一；开发服务器则会使帧耗时大约翻倍。
• prefers-reduced-motion 应采用替代性的艺术方向（更柔和，而非完全移除），绝不能事后才考虑。
• 即使禁用 JS，内容也必须可读：动画只增强默认已可见的内容，绝不能控制内容是否可见。

路由

阅读参数／需求描述并进行路由：

1. direct，或需求描述带有电影感——“惊艳”“电影感”“沉浸式”“叙事”“发布页”“高端品牌”“让人停下滚动” → 加载 reference/direct.md 并遵循其中的阶段。这是旗舰风格。
2. build，或需求描述只涉及一个常规界面——营销页、落地页、单个产品页 → 加载 reference/build.md。
3. system，或需求描述包含 多个必须看起来像同一产品的屏幕——应用、仪表板、管理后台、设置、引导流程，或带有实际导航的文档或内容网站 → 加载 reference/system.md。设计单元变为组件 × 状态，失效模式变为风格漂移而非乏味，并且刻意不设高潮。如果你已经在执行 build，却又出现第二个屏幕，请停止并切换：半套系统比两者都糟。
4. edit，或请求要修改此技能构建的页面（项目包含 design/DESIGN.md）——“添加一个版块”“修改定价”“替换主视觉文案” → 首先阅读 design/DESIGN.md，并遵循其中的编辑流程：复用其中的设计令牌、版块开场模式和动效系列；修改后运行 slopscan，并重新拍摄受影响的视口。即使单独看效果不错，忽略 DESIGN.md 的编辑仍属于回退。
5. recon <brief>，或请求只需要参考资料——“найди референсы”“собери мудборд”“X 类网站的最新水平如何” → 加载 reference/recon.md，并且只运行该阶段：考察线上网站，制作情绪板，交付 design/refs/REFERENCES.md（填好 steal: 行）和 design/moodboard/contact-sheet.png（填好 read 字段）。不做 commit-sheet，不构建。
6. audit <path-or-url> → 加载 reference/verify.md，并对由 auteur 构建的页面运行验证流程。如果目标是 auteur 未构建的现有 UI，且用户想要的是润色而非重建，请说明 /impeccable 才是合适的工具，并表示只有在用户想要重建时才继续。
7. 含糊不清（例如只说“сделай лендинг”）→ 只问一个问题：“普通的出色落地页，还是带滚动导演手法和素材生成的电影模式？”然后进行路由。（多屏幕需求并不含糊——应归入 system。）暂时不要问其他问题——每种风格都有各自的需求收集流程。

所有三种风格都共用阶段零，其核心是 commit-sheet。执行顺序有所不同：build 按 recon → commit-sheet → mockup 执行；direct 按 recon → storyboard → commit-sheet → mockup 执行，因为影片场景是制定六项决策的对象；system 按 recon → system-sheet（路由图 + 组件清单）→ commit-sheet → mockup 执行，因为六项决策针对的是产品，而不是页面。无论采用哪种方式，sheet 填完整之前都不能开始编码。

commit-sheet（编写任何代码之前，适用于所有模式）

当默认选项替你做了决定，就会产生糊弄之作。commit-sheet 会迫使你在写下第一行代码之前，先把七项真正的决定写下来。将 templates/COMMIT-SHEET.md 复制到项目中（例如 design/COMMIT-SHEET.md），并为全部七个字段填写非默认答案：

1. 亮点 — 一个主要惊艳时刻（direct）或标志性元素（build）。用一句话说明。如果说不出来，就还没准备好开始构建。
2. 色彩 — 主色采用 OKLCH 表示法 + 承诺程度（克制 / 明确投入 / 全色盘 / 浓烈）+ 一句话说明：为什么不是薰衣草色、不是奶油色，也不是品类本能反应 + 背景亮度数值（目标平均 L）。因为“深色显高级”正是这项技能容易偏离的方向，而数值可以事后核验，氛围却不行。
3. 字体 — 展示字体 + 正文字体的对比轴搭配（衬线 + 无衬线、几何体 + 人文主义体、等宽 + 衬线等）+ 一句话说明：为什么不用 Inter。
4. 网格突破 — 明确指出打破对称网格默认做法的一处具体设计：叠加、不对称分割、斜向流动、通栏中断等。具体说清是哪一种。
5. 动效预算 — 滚动模式系列有多少种（≤3），以及分别是什么。
6. 本能反应检查 — 写明：(a) 通用 AI 在这一品类中会怎么做（一阶本能反应）；(b) 通用 AI 为了避免 (a) 会怎么做（二阶本能反应——例如，金融科技 →“终端深色模式”如今也已经泛滥）；(c) 你选择的、偏离两者的做法。如果运行了 recon，(a) 就不是猜测：design/refs/REFERENCES.md 中出现五次的内容就是本能反应，并且有日期和佐证。
7. 要打破的固定特征 — 指出 taste.md §2.5 中至少两项你这次刻意不采用的元素，并说明分别用什么替代。6a/6b 字段记录的是品类本能反应；这里记录的是本技能的本能反应。这些特征会在毫不相关的项目中反复出现，从任何单个项目内部都难以察觉：近黑背景、等宽的服务标签、Logo / 状态 / 操作组成的页眉、滚动指引页脚、琥珀色或酸性色点缀、以文字标识作为主视觉、用光晕代替灯光。在九个展示构建中进行统计，八个使用了深色背景，其中三个的亮度值相差不超过 0.002。真正适合此处的固定特征可以保留——说明理由，例如使用 auteur-allow。

关卡：每个字段都必须填写具体、非默认的答案。字段空白或答案过于笼统（如“现代、简洁的外观”）就意味着必须停下来做决定。验证时会再次检查此产物。

各阶段一览

阶段	build 模式	direct 模式	system 模式	要加载的参考文件
0	recon → commit-sheet → 主视觉模型图关卡	recon → 分镜稿（STORYBOARD.md）→ commit-sheet → 主视觉模型图关卡	recon → SYSTEM-SHEET.md（路由 + 组件清单 + 状态）→ commit-sheet → 模型图关卡	recon.md，然后是 build.md / direct.md / system.md
1	—	资产制作（生成 → 编辑 → 优化）	—（通过 source.mjs 获取源图标 / 字体）	assets.md
2	构建页面	组装影片（先实现平滑滚动，再从上到下构建主视觉和各场景）	设计令牌 → 外壳 → 按访问流量顺序构建屏幕 → 覆盖每一种状态	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 都会交付的东西。

参考文件

• reference/recon.md — 阶段 0 侦察，包含两项可执行任务：scripts/refscout.mjs 为实时的获奖级网站建立档案（真实技术栈、固定场景、滚动预算、字体、实际绘制的调色板、截图——关注机制，而非皮肤）；scripts/moodboard.mjs 从 Bing / Pinterest / are.na 整理出带编号的联系表，让艺术指导依据实时素材而非记忆做决定。还包括：查询技巧、借鉴规则、侦察结果如何流入提交表，以及“参考图不是素材”这条原则。在阶段 0 开始时加载。
• reference/taste.md — 完整的反劣质设计体系：扩展禁用清单及替代方案、二阶类别反射表、色彩策略分级、字体搭配、文案规则。进行任何视觉决策时加载。
• reference/motion.md — 动效规范：何时添加动画、缓动／时长／弹簧数值、性能规则、动效预算、声音政策。编写任何动画前加载。
• reference/build.md — 标准注册流程。分配到 build 时加载。
• reference/system.md — 多屏注册：路由图、作为门槛的组件清单、状态矩阵（空、加载中、错误都不是边缘情况）、密度规则、禁止设置峰值的规则，以及 scripts/systemscan.mjs——它会爬取每条路由，读取浏览器实际绘制的内容；若某种控件类型超出其声明的变体预算，就会报错——并将状态（禁用、当前项、处于 data-state 行内）单独计数，因此实现状态矩阵不会被视为偏离；它还会按 Tab 键，以发现没有可见焦点状态的控件，并为每个已渲染变体渲染一个图块，让偏离情况既能被计数，也能直观呈现。分配到 system 时加载。
• reference/direct.md — 电影化注册：剧本契约、场景表、戏剧构思、组装顺序。分配到 direct 时加载。
• reference/assets.md — 媒体团队与路由（图片使用 agy / codex / grok-4.5，视频使用 grok，配乐使用 MiniMax，另有 ffmpeg）、§0.5 来源与生成（scripts/source.mjs：来自 Poly Haven 的 CC0 glTF 网格、HDRI 和 PBR 材质、图标、字体、CC 图片、库存视频——附带许可证台账，因为生成无法制作几何体或 IBL，而且库存视频绝不能成为峰值）、一致性技巧（将 A 帧编辑为 B 帧）、通过首帧→末帧链生成本地视频、生成元素／样机、环境配乐、降级阶梯和素材缓存。在 direct 阶段 1 加载。
• reference/scroll-cinema.md — 可直接使用的代码配方：滚动控制的视频、画布序列、GSAP+Lenis 基础、CSS 滚动驱动动画、文本显现、双关键帧 WebGL 位移转场、视图转场、环境音频，以及电影化转场库（擦除、幕布、信箱遮幅、快门、景深视差）。组装期间加载。
• reference/scroll-flight.md — 视频控制层级：由滚动驱动的照片级真实感“穿越世界”主视觉，使用可直接嵌入的 templates/scroll-flight-engine.js。这是滚动控制视频的规范配方（为拖动定位编码的 -g 8、编码帧海报图、SSIM 接缝门槛、A/B 链架构、iOS／移动端解码强化、交叉淡化与无缝接缝的比较）。当主视觉应采用照片级真实感实拍／AI 视频，而非实时 WebGL 时加载。
• reference/ambient-backgrounds.md — 用于次要版块和简单构建的静谧纹理（不可用于主视觉）：精选四种编辑／模拟效果（纸张颗粒、账本／蓝图线条、地形等高线、墨潮、稀疏尘埃、一种热浪着色器）以及默认的零动效静态网格。指导原则（效果弱于最安静的前景元素；每页仅用一种环境效果）、优先使用 CSS／SVG 的技术栈，以及 feTurbulence 静态性能规则。当版块需要避免显得单调、但又绝不能与文案争抢注意力时加载。
• reference/verify.md — 验收流程：slopscan → 截图走查 → 动效／性能／音频 QA（Tier-1 场景需在生产构建上以 DPR 2 测量 FPS、长任务、音频门控和减少动效设置）→ 数值评分标准 → 参考差异对比（将你的画面与确定设计方向的参考图并排，使用 scripts/chromadiff.mjs 测量模型无法自行察觉的色彩偏差）→ QA 签核。在阶段 3 加载。

验证是构建的一部分

代码编译通过，并不意味着页面已经完成。只有满足以下条件，页面才算完成：

1. node scripts/slopscan.mjs <src-dir> 以 0 退出（发现问题就修复，不要压制——对于有意为之的选择，可以使用 /* auteur-allow: RULE_ID -- reason */，但必须提供充分的理由）；
2. node scripts/shoot.mjs <url> 已生成 390 / 768 / 1440 尺寸的截图体验流程，并且你检查了每一帧——文本溢出、场景空白、展示效果损坏、布局崩塌，都要靠眼睛发现，而不是靠 grep；
3. reference/verify.md 中的数字评分标准通过（对比度、LCP、CLS、减少动态效果的体验流程、场景多样性）；
4. 对于直接注册：CINEMA-QA.md（来自 templates）中的每一行都已填写 PASS。

如果任何一项未通过，就修复并重新运行。诚实地报告结果：“slopscan 无问题，已检查 21 张截图，LCP 为 1.9 秒”胜过“看起来很棒”。

与其他技能的协作关系

Auteur 负责构建，不会重新润色其他来源的 UI。如果用户已有需要改进的界面，请推荐 /impeccable。如果 auteur 自身的输出需要外部评审，那么在构建好的页面上使用 /impeccable critique 是可行的第二意见——auteur 的验证关卡与 impeccable 的评审衡量的是不同方面，两者可以并行使用。

弱模型注意事项

如果你是执行此技能的小型模型：严格按照表格和数字操作，填写模板中的每个字段，运行每条关卡命令，不要超出参考方案自行发挥——参考方案已经过验证，而你的即兴发挥没有。如果参考文件与你的直觉相冲突，以参考文件为准。使用相对于项目根目录的路径写入文件；不要凭记忆重新输入绝对路径（技能名“auteur”只差一个字母就会变成“author”，绝对路径拼错会让你的输出散落在文件系统各处）。