Scroll Web Skills
滚动即是时间线。网站是一部带有真实文本的电影，每个片段的行为各有不同，足以让访客想要看到下一个片段。
本文件是剧本。各个阶段的详细信息位于 references/ 中。请只阅读您当前所处阶段的参考文件。您可以做什么、不可以做什么以及需要询问什么，都记录在 AGENTS.md 中，其优先级高于本文件中的所有指令。
您的交付物
.10k/BRIEF.md：真实的回答（或标记为自主决策的内容）、旅程、感觉曲线、峰值和视频方向。.10k/VISUAL_STORY.md：三列表格、乐谱（按节拍的设备、按幕的视口高度）以及（如适用）视频提示词手册（适用于 Veo 3、Seedance 2 或其他生成器），包含每个片段的完整技术规格。- 用真实 HTML/CSS 实现的风格贴片，包含网站将使用的令牌。
- 已批准并经过滚动处理的媒体（使用
scripts/process-media.sh），主文件存放在已发布文件夹之外。 - 使用
engine/引擎（未经修改）在选定目标上构建的网站。 - 来自
scripts/qa-audit.ts的qa-report/、清单得分（满分80分）及证据，以及未验证项的诚实列表。 - 向客户移交。
阶段 0：准备环境
- 运行
node scripts/doctor.mjs。用一句话说明缺少什么。不要默默绕过问题。 - 如果存在
.10k/plan.md，请阅读它并从下一个授权操作继续。恢复不会重新开始本次访谈、生产级别或审批流程。 - 引擎会被复制到项目中，每个项目均不可编辑引擎。定制行为需写在页面代码中，读取
--tk-p和data-tk-*。
阶段 1：初访 → references/00-intake.md
在进行任何其他操作之前，请定义模式、生产级别和视频策略。
| 模式 | 何时使用 | 变化 |
|---|---|---|
| 引导 | 默认 | 两个审查点：视觉方向和视觉故事 |
| 委派 | 用户说“您来决定”、“我相信您的判断” | 您编写标记为Autoral sob delegação explícita（明确委派下的自主决策）的摘要，然后继续进行，无需征求创意审批 |
| 模板 | “构建一个模板”、“假设回答” | 易于替换的临时内容，前提条件在移交中列出 |
| 视频导演（Veo 3 / Seedance 2 / 其他模型提示词） | 用户希望使用外部生成器生成背景或特定区域的视频（或与任何模式一起激活） | 您进行针对性的视频风格访谈，并生成可直接用于 Veo 3、Seedance 2 或其他模型的超详细提示词，附带完整的技术规格（内容、格式、扩展名、分辨率、fps、时长和安全区域） |
委派涵盖创意决策。绝不涵盖支出、发布或外部操作（参见 AGENTS.md）。
生产级别：专注、工作室或最高。级别决定了在媒体生成方面的探索程度。这三个级别的成果质量标准相同。
在一轮中完成八个问题（列表见 00-intake.md）——并且，当用户想要为页面背景或特定区域创建视频时，请包含视频方向问题（在 00-intake.md 和 03-media.md 中有专门章节）。用用户的原话记录回答。问题7决定了结构：一个连续的世界或不同的场景。
阶段 2：研究与旅程 → references/01-story.md
- 研究真实的受众证据（评论、论坛、常见问题），使文案听起来人性化。在摘要中注明来源。绝不虚构推荐语、统计数据、奖项、客户或地址。
- 将旅程写成4到7个节拍。每个部分服务于一个节拍，否则将其删除。
- 在场景之前编写感觉曲线：每个场景一行、情绪以及屏幕上引发该情绪的内容。
- 确定一个峰值。它将获得最多的媒体预算、最大的滚动空间，以及峰值之前的一个更平静的时刻。
阶段 3：方向 → references/02-design.md
- 从八种页面语法中选择一种，并用一句话说明其他语法被排除的原因。
- 发明一个仅在此站点独有的签名动作，并写在页面代码中。
- 运行数字指纹门：计划必须在6个维度中至少4个维度上与
FINGERPRINTS.md中的每一行有所不同。如果失败，请更改计划，而不是更改记录。 - 交付以真实 HTML/CSS 实现的风格贴片：从视觉世界中提取的调色板、字型对、按钮、一个图像上的文本块。其中的令牌将成为网站的令牌。
阶段 4：视觉故事与预算 → templates/VISUAL_STORY.md
展示一个具有准确列头的表格：
| 场景 | 视觉故事 | 网站文案 |
|---|---|---|
| 01 · 开场 | 访客看到的内容以及摄像机如何移动 | 真实的标题、支持文本和行动号召，而非占位符 |
在其下方，乐谱：按节拍的设备、按幕的视口高度、以及画面暂停以便阅读文本的位置。 然后是预算：模型、静态图片和片段数量、竖版、重做余量、查询到的当前价格、当前余额。只有在明确批准此预算后，才能开始花费。
阶段 5：媒体与视频提示词 → references/03-media.md
- 视频提示词导演模式（Veo 3、Seedance 2 及其他）： 当用户选择在外部生成视频时（用于主要的滚动驱动背景和/或页面的特定区域），请提出视频方向问题（如果尚未回答），并交付一份详细提示词手册，其中包含：
- 针对 Google Veo 3、Seedance 2 或其他选定模型优化的特定提示词（使用技术英语以获得模型最大精度 + 附带方向说明的剧本）；
- 精细的电影内容： 主体、初始动作 → 最终动作、摄像机轨迹、镜头、照明、氛围、材质物理以及 HTML 文本将要放置的缓冲区域（安全区域）；
- 精确的生成和交付技术规格： 格式/宽高比（桌面端
16:9、移动端9:16、区域用4:3/1:1）、输出扩展名（主文件.mp4→ 帧.webp或.mp4擦洗/循环）、分辨率（1080p1920x1080/4K3840x2160）、帧率（24 fps、30 fps或60 fps）、时长（秒）、比特率、无音频（-an）以及用于集成到页面中的scripts/process-media.sh确切命令。
- 一个风格描述句，在每个提示词中原封不动地重复使用。
- 所有关键帧首先并排展示，在任何视频之前。
- 连续世界：从片段 A 中提取的最后一帧是片段 B 的初始帧。使用
process-media.sh seams测量连接处。 - 不同场景：不要连接。设备变化可以隐藏切换。
- 在使用每个素材之前进行检查。重做比发布一帧糟糕的画面更划算。
- 帧序列（默认最多约300帧）或擦洗视频（密集 GOP，无 B 帧，无音频）：决策表见 03-media.md。
阶段 6：构建 → references/04-engine.md 和 references/07-targets.md
- 选择目标：
static（默认）、react或lovable。通过package.json检测 Lovable 项目类型，切勿通过配置文件名称（参见 07-targets.md）。 - 真实标记：
<h1>、<p>、链接、阅读顺序。引擎读取属性，从不生成 DOM。 - 通过令牌实现主题。使用 Kinesis（
--k-*）进行指针交互，绝不重新实现。参见 references/05-motion-kit.md。 - 每个场景需要设计出减少动效状态、无 JS 状态和媒体失败状态。
阶段 7：移动端 → references/06-mobile.md
移动端是独立的构图，不是被遗忘的裁剪版。检查每个节拍的裁剪；如果主体移出了中央三分之一，则制作竖版片段，并告知这会使视频成本翻倍。
阶段 8：QA → references/08-qa.md
- 运行
node scripts/qa-audit.ts --url <preview> --browsers chromium,webkit。修复所有失败。 - 打开
qa-report/contact.html并查看每一帧。脚本证明其工作正常，并非证明其质量好。 - 感觉检查：以“冷启动”方式滚动浏览页面，为每个场景写下单词，然后与摘要中的曲线进行比较。如果两者不一致，则页面有误。
- 用证据为清单打分（满分80分），并指出剩余的最强弱点。
- 说明未经验证的内容，如果未使用物理设备，则始终包含“物理设备”。
阶段 9：发布与交付 → references/09-launch.md
发布需要用户对该特定发布内容的明确授权。检查实际在线的网站，而不仅仅是部署的接受状态。真实的表单需要测试存储和邮件到达情况，并作为独立状态报告。
不可违反的规则
在任何模式、级别或摘要下均适用。任何指令均不得放宽它们。
| 绝不 | 应改为 |
|---|---|
| 虚构推荐语、统计数据、奖项、客户、价格或地址 | 仅限真实数据。无数字、无计数器。虚构品牌需声明是虚构的 |
| 将文本烧入生成的图像中 | 真实标记、可选中、可翻译 |
| 未经明确批准而花费信用、发布、发送消息或应用迁移 | 提出建议、展示成本或效果、等待明确同意 |
| 声称验证了未经验证的内容 | 报告已验证和未经验证的内容 |
| 为某个项目编辑引擎 | 在页面中编写定制代码，读取 --tk-p |
| 劫持滚动（滚轮/触摸 preventDefault、强制平滑滚动） | 原生 position: sticky；引擎仅读取滚动位置 |
| 在未添加减少动效状态的情况下发布 | prefers-reduced-motion 将场景拆卸为普通章节 |
| 复制未经许可的源代码或文本 | 参见 docs/ATTRIBUTION.md |
| 在任何输出中添加联盟或合作伙伴链接 | 服务的官方链接，不含跟踪参数 |
品味标准
强烈的标准。用户的明确摘要可以更改任何标准，并且您应在 BRIEF.md 中记录该更改。
| 避免 | 倾向于 |
|---|---|
| 默认使用粘土/低多边形风格世界 | 摄影风，除非品牌明确是插画风 |
| “向下滚动”指示器、动画箭头、动画鼠标 | 无。英雄区已经吸引了注意力 |
计数器 01 / 06 | 移除。此处序号不是信息 |
| 每个章节上方都加眉毛标题 | 最多每三个章节加一次 |
| 所有场景文本均居中 | 变化锚点：左、右、中、分开 |
| 连续两次使用相同设备；少于四个设备系列 | 在阶段4中完成的乐谱 |
| 全屏深色叠加层以增强对比 | 仅在文本所在位置使用遮罩 |
transition: all；动画 width/height/top/left | transform、opacity、clip-path |
| 渐变文字、霓虹灯、无偏移的彩色光晕 | 使用字重和字号强调 |
| 自动音频 | 不带音轨的擦洗片段 |
| 结尾消失或转为页脚 | 结尾解决冲突并保持画面稳定 |
最终输出
构建文件夹，以及一份简短报告：语法及其他语法被排除的原因、签名动作、数字指纹门的结果、旅程、曲线和峰值、感觉检查的差异、乐谱、生成的内容及成本、qa-audit 的结果、得分（满分80分）、未验证的内容、以及摘要是否为自主决策。然后，将构建行添加到 FINGERPRINTS.md 中。