scroll-craft（滚动工艺）

scroll-craft（滚动工艺） 是做什么的？

滚动是每个访客本就知道如何使用的唯一输入。本技能将其视为一条时间线：滚轮是一个划片器，页面是一部带有真实文本的电影，每个部分的行为都足够不同，以至于访客会不断滚动，想看看下一个部分会做什么。

你的产出物： 一份访谈简报、一份页面语法、一张客户旅程地图、一条带有一个精心设计高潮的情感曲线、一个滚动评分、一个签名动作、生成的资产、一个在令牌驱动设计底板上运行的真实 HTML 页面，以及一组证明其在每个滚动位置都表现良好的截图像带。

这不是什么

这不是“生成飞越效果并在上面放文字。” 那种方法会对整个页面应用一种设备，并且每个这样构建的网站一眼就能认出来：相同的黏土动画立体模型、相同的居中文案、相同的 01 / 06 计数器、相同的“滚动探索”提示。五个行为完全相同的部分只是同一个部分被展示了五次。

由此衍生出四条规则，它们是本技能的脊梁：

1. 多样性即产品。 一个页面至少使用四种设备族，并且绝不会连续两次使用相同的设备。阅读 references/devices.md。
2. 除非品牌本质上是插画风格，否则世界是照片写实的。 软磨砂低多边形黏土立体模型默认被禁用。阅读 references/worlds.md。
3. 无连续镜头。 单个不间断的摄像机飞行是你能够构建的最昂贵、最脆弱的东西，它存在的唯一目的是隐藏场景之间的切换。相反，变化使用设备，切换就会免费消失，因为访客不是在观看一部电影。只有当简报明确要求“一次连续旅程”时，才使用连续镜头。
4. 不同的世界不是不同的页面。 设备套件改变页面的外观。结构是一个独立的轴，必须经过深思熟虑才能决定，否则每个构建都会继承相同的骨架。前四次构建恰恰就是如此。阅读 references/uniqueness.md。

常驻英雄区偏好

对于高级营销英雄区，立体分层是基线要求。 在请求资产之前，规划独立移动的背景、主体、前景和大气层。一个漂亮的单背景配上文本淡入淡出不满足此偏好。深度必须来自可见的分离、遮挡和受控的移动差异，同时标题保持可读，场景讲述一个清晰的故事。

在规划英雄区或生成其资产之前，阅读 references/hero-depth.md。它涵盖了清洁板、真正的 Alpha 抠图、共享接触锚点、平面间的排版、克制的滚动编排、移动端美术指导和视觉验收，并附有已批准的 Sonder 示例。使用适合所选语法的构图；不要重复 Sonder 的场景，也不要将固定效果强加于禁止它的语法。尊重明确的静态或更简单的指示，并在减少动效时保持静态构图中的深度。

已批准收藏标准

在规划高级营销网站之前，阅读 references/approved-collection.md。它提炼了已批准的十个网站的重新构建：真实的品牌研究、图层合同、有意义的指针/滚动深度、合适的照片写实或 3D 渲染、独特的导航和结尾、有用的交互、移动端美术指导以及最终包中的证据。这些是执行原则和工作示例，而不是可重用的页面骨架。

第 0 步：简报与创意权限

在生成任何内容之前，先确立简报。 重用已提供的答案和资产。当用户明确委托创意方向时（例如，“用你的判断”或“我不想妨碍你”），编写一份标题为 在明确创意委托下自撰 的简报并继续。涵盖以下八个主题，区分证据和假设，不要捏造用户引述或强制进行另一次访谈/批准检查。

否则，针对缺失的决策进行访谈。提出真正的问题，记录答案，并避免从品牌名称推断整个品牌。

本技能是一个范围工具，而不是一种固定风格。人类带来意图和他们拥有的任何资产；访谈正是将这转化为正确页面类型的地方：一个连续的世界、不同的场景、印刷的章节、一个活生生的表面。本技能可以处理其中任何一种。由访谈决定选择哪一种。

保持简短。八个问题，一次性问完：

1. 用三到五个词描述氛围，加上最多三个来自任何媒介的参考。一部电影、一张专辑封面、一家商店、一本杂志、一个游戏。不是“你喜欢的网站”：命名网站是页面最终看起来像现有网站的方式。
2. 滚动旅程，逐部分描述，用用户自己的话。 访客应该首先看到什么，接下来是什么，最后看到什么。他们的顺序，而不是你提供的菜单。
3. 能量曲线。 哪里应该感觉平静，哪里应该感觉强烈。一个从头到尾都很响亮的页面，和一个从头到尾都很安静的页面一样平淡。
4. 滚动时，在每个阶段应该有什么感受，以及他们应该记住的一个瞬间是什么？ 能量是响度。这是情感，两者并不对齐：在一个响亮的页面上，安静的动作可能是最激烈的。逐阶段的答案成为情感曲线，那个瞬间成为高潮点。两者都必须在 BRIEF.md 中。参见 references/feel.md。
5. 这个网站应该做的一件他们见过的网站都没做过的事情。 这是签名动作的种子。推动用户给出一个真实的答案；“令人难忘”不是一个答案。
6. 他们想要偏离高级极简主义多远。 提供 uniqueness.md §5 中的范围：粗野主义、极繁主义、俏皮、复古、密集、编辑风格、高级极简。他们的答案决定审美家族，而不是你的口味。
7. 一个连续的世界，还是不同的场景？ 整个页面应该感觉像一个连续的地方，滚动可以飞过（worldflight，参见 references/worldflight.md），还是像独立的场景、章节或剪辑？这是最大的结构分叉，由他们决定，而不是你稍后挑选的一个设备。坦率地提供两者；两者都不是默认选项。
8. 他们已拥有哪些资产？ 视频片段、照片、产品图、品牌工具包、自己的剪辑。真实资产锚定世界并降低生成成本；这个答案决定了什么是被分级和编码的，什么是被生成的。“没有”是一个完全可以接受的答案，意味着一个完全生成的世界。

在开始任何动作规划之前，将答案写入 <workspace>/builds/<name>/BRIEF.md，使用用户的原话，而不是转述成营销辞藻。所有后续步骤都从此文件读取。

BRIEF.md 必须至少包含：

• 八个主题，附上用户的逐字答案（如提供），以及在授权情况下清晰标注的自行决定。
• 情感曲线。 每个动作一行：情感，以及屏幕上导致该情感的内容。在动作存在之前编写，随着评分填充而添加。
• 高潮点。 那个瞬间，写成一个访客会对朋友说的句子，以及它位于哪个动作中。
• 完成的“告诉别人”句子。 “这是那个___的网站”，用一个体验来填充，而不是一个设备名称。
• 任何主动选择的静默，以便验证过程能将其与死亡滚动区分开来。

references/feel.md 是以上所有四项的规范。

如果用户确实无法联系并且运行完全自主，请自行编写 BRIEF.md：以品牌的语气回答所有八个问题，在文件顶部标记 自撰，未经访谈，并在最终报告中说明。未经授权的自撰简报是备选方案。以上所述的明确委托是正常支持的流程，不要求用户无法联系。

引导（Bootstrap）

这是环境设置，不是工作阶段。在访谈得到解答后、第 1 步之前完成。

运行预检而不是手动检查。 它知道那些否则会在后续以误导性错误形式出现的故障模式，主要是一个被裁剪的 ffmpeg，它会把丢失的过滤器报告为命令中的语法错误：

node <skill>/scripts/doctor.mjs

它会报告 node、完整的 ffmpeg 构建、playwright 和 Chrome、API 密钥以及已解析的工作空间。必需的失败将导致非零退出。清晰地说明哪些项目缺失，而不是静默地绕过它们。

工作空间

构建和指纹注册表都位于一个目录中，并且它是被解析出来的，而不是被假设的：

node <skill>/scripts/workspace.mjs --ensure     # 打印路径、创建目录、种子注册表

解析顺序，第一个匹配的获胜：

1. SCROLLCRAFT_HOME
2. 从当前工作目录向上查找最近的 .scrollcraft.json，{ "workspace": "..." }
3. <项目根目录>/scrollcraft，其中项目根目录是持有 .git 的最近祖先

因此构建文件夹是 <workspace>/builds/<name>/，注册表是 <workspace>/FINGERPRINTS.md。注册表初始为空：门控的存在是为了阻止你重复自己，所以你的第一次构建没有任何需要清除的内容。

如果你已经将构建保存在其他位置，在你的项目根目录放置一个指向该位置的 .scrollcraft.json，所有文件无需移动。

其余设置

1. KIE_AI_API_KEY，仅当你生成资产时需要。 使用用户自己的照片和片段进行构建不需要密钥，也没有花费，这是一条重要的路线，而不是备选方案。使用 node <skill>/scripts/kie.mjs probe 确认余额。一张静止图片花费几分钱，一个 5 秒的片段更贵；一个带两个片段的六动作页面是小额花费，而不是大额。
2. 如果存在品牌工具包（颜色、标志、字体、现有产品图）。如果该品牌在此仓库中有一个文件夹，在生成任何内容之前阅读它，并遵守其硬性规则。一个禁止虚构数字的品牌意味着没有统计计数器，无论它们看起来多好。

将 engine/scrollcraft.js 和 engine/scrollcraft.css 复制到构建文件夹中。永远不要按项目编辑引擎；它是机制。使用令牌对其进行主题化，并编写你自己的标记。

第 1 步：简报，旅程优先

主题由用户陈述。以开放、简单的散文形式提问，永远不要用编造的行业多选列表：一个编造的菜单会引导他们，并且看起来像是你在替他们决定业务。

第 0 步已经涵盖了氛围、顺序、能量和范围。不要再问这些。只问你无法明智地默认的问题：

1. 这是什么，是给谁的？ 用他们的话说一两句话。
2. 访客在最后必须相信什么？ 页面旨在植入的那句话。不是功能列表。如果他们给了三个，让他们选择一个。
3. 访客下一步做什么？ 一个动作。一个标签，在页面各处使用。
4. 你已经有什么？ 标志、调色板、摄影、产品图、片段、品牌文档。真实资产每次都比生成的资产好。
5. 艺术指导：提供 references/worlds.md 中的世界作为真实选择，并说明他们可以走自己的路。

然后在其他任何事情之前编写旅程：四到七个节拍，每个节拍都是访客所知或所感的一个转变。

1  识别     他们看到自己的早晨
2  紧张     代价，被直白地命名
3  转折     改变一切的事物
4  实质     为什么它站得住脚
5  范围     他们可以选择什么
6  承诺     那个动作

节拍是脊梁。部分服务于节拍；一个不服务任何节拍的部分将被剪掉，无论镜头有多好。在生成资产之前解决旅程问题。当需要用户决策时，向他们展示旅程；在明确的创意委托下，记录选定的旅程并在授权范围内继续。

第 2 步：语法、门控、然后评分

按顺序处理三件事，前两件事在任何动作规划之前完成。详细信息见 references/uniqueness.md。

选择一种语法。 从八个已定义的语法及其约束开始。只有当新语法的导航、顺序、结尾和明确的禁止项描述了一个不同的结构时，才允许使用新语法；仅新标签没有价值。电影单镜头是前四次构建都使用的，所以再次选择它意味着要在报告中说明为什么其他七个不符合访谈。导航、英雄区和收尾都遵循语法；它们不是单独决定的。

发明签名动作。 一个仅在此网站上存在的定制交互，编码在页面中，而不是对套件设备的参数更改。访谈中的问题 5 是种子。引擎保持不变。

运行指纹门控。 读取你的注册表 <workspace>/FINGERPRINTS.md（参见引导中的工作空间；运行 node <skill>/scripts/workspace.mjs 打印路径）。计划的构建必须在 每个 现有行在 6 个维度中的至少 4 个上有所不同：语法、导航处理、英雄设备、动作序列形状、收尾模式、签名动作。针对每一行单独检查四个维度。如果失败，则更改计划，而不是修改日志。

在评分表之前编写情感曲线。 每个动作一行：情感，以及导致它的原因。曲线在先，动作在后，因为在情感之前选择的设备是一个在寻找理由的设备。两个相邻动作具有相同的情感意味着其中一个是填充物，在资产存在之前在这里裁剪它比之后更便宜。在同一次传递中命名高潮点，并给它页面上最大的范围。完整方法见 references/feel.md。

然后将每个节拍分配一个设备。有意识地进行并写成一个表格：

节拍	设备	为什么选择这个
识别	scrub	摄像机在读者自己手中移动是最强的开场
紧张	pin + 动态	当画面保持静止时，文案逐行组装
转折	reveal	一个宽...