scroll-craft

scroll-craft

滚动是每位访客都已经会用的唯一输入方式。这项技能将滚动视为一条时间线：滚轮是剪辑器，页面是一部叠加了真实文本的影片，每个区段的表现都各不相同，让访客为了看看下一个区段会如何呈现而继续滚动。

**产出内容：**访谈简报、页面语法、客户旅程图、一条经过设计且有一个峰值的情绪曲线、滚动节奏、一项标志性设计手法、生成的素材、一张基于令牌驱动设计底板构建的真实 HTML 页面，以及一组截图，证明页面在每个滚动位置都表现良好。

这不是什么

这不是“生成一段飞越动画，再把文字放上去”。这种做法会把同一种手法套用到整个页面上，而用这种方式构建的网站一眼就能认出来：一样的黏土动画立体布景、一样的居中文字、一样的 01 / 06 计数器、一样的“滚动探索”提示。五个表现完全相同的区段，只不过是同一个区段展示了五次。

由此得出四条规则，它们也是这项技能的核心：

1. **多样性就是产品。**页面至少使用四类手法，且不能连续两次使用相同手法。请阅读 references/devices.md。
2. **除非品牌本身确实采用插画风格，否则场景应以摄影为主。**柔和哑光的低多边形黏土立体布景不得作为默认方案。请阅读 references/worlds.md。
3. **不要使用连续镜头链。**一段不间断的镜头飞行，是最昂贵、也最脆弱的构建方式，它的存在只是为了掩盖场景间的切换。改用不同的手法，就能轻松消除切换感，因为访客并非在观看同一部影片。只有当简报明确要求“完整的连续旅程”时，才使用连续镜头链。
4. **场景不同，不代表页面就不同。**手法工具包决定页面的视觉呈现方式。结构是另一个独立维度，必须经过审慎决策，否则每个构建都会沿用相同的骨架。最初的四个构建就犯了这个问题。请阅读 references/uniqueness.md。

固定的首屏偏好

**对于高端营销页面的首屏，立体分层是基本要求。**在索取素材之前，就应规划独立移动的背景、主体、前景和氛围层。单张精美背景配上淡入淡出的文字，并不符合这一偏好。景深必须来自清晰可见的分离、遮挡和可控的运动差异，同时确保主标题易于阅读，场景传达一个明确的故事。

在规划首屏或生成素材之前，请阅读 references/hero-depth.md。其中介绍了干净底图、真实透明抠图、共享接触锚点、层间排版、克制的滚动编排、移动端美术指导和视觉验收，并提供了获准使用的 Sonder 示例。应根据选定的页面语法使用合适的构图；不要照搬 Sonder 的场景，也不要在禁止固定定位的页面语法中强行使用固定定位。尊重明确要求静态或更简单的设计方向，并在减少动效时通过静态构图保留景深。

获准的精选集标准

在规划高端营销网站之前，请阅读 references/approved-collection.md。其中总结了获准的十个网站重建项目：真实的品牌研究、图层规范、有意义的指针和滚动景深、恰当的摄影或 3D 渲染、各具特色的导航与结尾、实用的交互、移动端美术指导，以及最终交付包中的佐证。这些是执行原则和实践示例，并非可重复使用的页面骨架。

步骤 0：简报与创意主导权

在生成任何内容前先确立创作简报。 复用用户已提供的答案和素材。当用户明确授权你主导创作方向（例如“按你的判断来”或“我不想干预”）时，撰写一份 Self-authored under explicit creative delegation 创作简报，然后继续。涵盖以下八个主题，区分证据与假设，不要编造用户说过的话，也不要强行增加另一轮访谈或审批环节。

否则，就针对尚未确定的决策进行访谈。提出实际问题，记录答案，避免仅凭名称推断出完整的品牌形象。

这项技能是一种表现范围工具，而非固定风格。人类提供意图和自己拥有的素材；访谈则将这些转化为合适的页面类型：一个完整连贯的世界、不同场景、印刷章节，或一个实时呈现的界面。这项技能都能实现。具体采用哪种，由访谈决定。

保持简短。一次性提出八个问题：

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：用品牌的语气回答全部八个问题，在文件顶部标注 Self-authored, not interviewed，并在最终报告中说明。未经委托而自行编写简报只是备用方案。 上文的明确委托是正常支持的工作流，无需以无法联系到用户为前提。

初始化

这是环境准备，不是工作阶段。在访谈得到答复后、步骤 1 开始前完成一次。

运行预检，不要手动检查。 它了解那些稍后会以误导性错误呈现的问题，尤其是精简版 ffmpeg 会把缺少滤镜的问题报告为命令语法错误：

node <skill>/scripts/doctor.mjs

它会检查 node、完整构建版 ffmpeg、playwright 和 Chrome、API 密钥，以及解析出的工作区。必要项检查失败时会以非零状态退出。请明确说明哪些项缺失，不要默默绕过。

工作区

构建产物和指纹注册表都存放在同一个目录中，而且该目录会被解析，不会靠假设确定：

node <skill>/scripts/workspace.mjs --ensure     # prints it, creates it, seeds the registry

解析顺序如下，以首先命中的为准：

1. SCROLLCRAFT_HOME
2. 从当前工作目录逐级向上查找最近的 .scrollcraft.json，内容为 { "workspace": "..." }
3. <project root>/scrollcraft，其中项目根目录是最近一个包含 .git 的祖先目录

因此，构建目录为 <workspace>/builds/<name>/，注册表为 <workspace>/FINGERPRINTS.md。注册表初始为空：设置此关卡是为了避免重复，因此首次构建无需清除任何内容。

如果你已经把构建产物存放在其他位置，只需在项目根目录放置一个 .scrollcraft.json 指向该位置，不会移动任何内容。

其他事项

1. KIE_AI_API_KEY，仅在生成素材时需要。使用用户自己的照片和视频素材构建无需密钥，也无需花费；这是首选路径，并非备用方案。使用 node <skill>/scripts/kie.mjs probe 确认余额。生成一张静图只需几分钱，生成 5s 短片则费用更高；包含六幕和两个短片的页面花费不多，不算大笔支出。
2. 如果有品牌素材包，请准备好（颜色、Logo、字体、现有产品图片）。如果此仓库中有品牌文件夹，生成任何内容之前先阅读，并遵守其中的硬性规则。品牌规定不得编造数字，就不能添加统计数字计数器，无论它们看起来多么出色。

将 engine/scrollcraft.js 和 engine/scrollcraft.css 复制到构建目录。不要针对每个项目修改引擎；它是实现机制。请使用设计令牌为其设置主题，并编写自己的标记。

步骤 1：先确定简报和用户旅程

主题由用户确定。请用普通文字开放式询问，不要编造行业选择题列表：虚构的菜单会带偏用户，也会让人觉得你在替他们决定做什么业务。

步骤 0 已经涵盖了氛围、顺序、节奏和范围。不要再次询问。只询问那些无法合理默认的信息：

1. 这是什么，面向谁？ 用他们自己的话写一两句话。
2. 到最后，访客必须相信什么？ 用一句话说明页面要传达的核心观点，而不是功能列表。如果他们给出三条，就让他们选一条。
3. 访客接下来要做什么？ 一个行动。为此确定一个标签，并在整页统一使用。
4. 你已经有哪些素材？ Logo、配色、摄影素材、产品图片、视频素材、品牌文档。真实素材始终优于生成素材。
5. 艺术指导：将 references/worlds.md 中的风格作为真实选项提供，并说明他们也可以自行选择其他方向。

然后先写用户旅程：四到七个节拍，每个节拍都要改变访客的认知或感受。

1  Recognition   they see their own morning
2  Tension       the cost of it, named plainly
3  Turn          the thing that changes
4  Substance     why it holds up
5  Range         what they can choose
6  Commitment    the one action

节拍是主干。各个区块服务于节拍；不服务于任何节拍的区块都应删掉，不论画面多么好看。先确定用户旅程，再生成素材。需要用户做决定时，向他们展示旅程；如果用户明确委托创意工作，则记录选定的旅程，并在授权范围内继续执行。

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

依次做三件事，而且前两件要在规划任何章节之前完成。详见 references/uniqueness.md。

选择一种语法。 从已定义的八种语法及其约束开始。只有当一种新语法的导航、顺序、结尾和明确禁令描述了不同的结构时，才允许新增；仅仅换个标签不算。前四个构建都使用了电影式一镜到底，因此若再次选择它，就要在报告中说明其他七种为何不适用于这次访谈。导航、主视觉和结尾都由语法决定，不能分开决定。

设计标志性动作。 设计一个只属于这个网站的定制交互，在页面中编码实现，而不是修改套件装置的参数。访谈中的问题 5 是灵感来源。引擎保持不变。

执行指纹门槛检查。 阅读你的注册表 <workspace>/FINGERPRINTS.md（参见 Bootstrap 中的工作区；运行 node <skill>/scripts/workspace.mjs 以打印路径）。计划中的构建与每一条已有记录相比，都必须在六个维度中至少有四项不同：语法、导航处理、主视觉装置、章节序列形态、结尾模式、标志性动作。要逐条记录分别满足四项不同。如果未通过，就修改计划，而不是修改日志。

先写情绪曲线，再做评分表。 每个章节写一行：先写情绪，再写引发情绪的原因。先定曲线，再定章节，因为先选装置再找感觉，就像是装置在寻找理由。相邻两个章节若情绪相同，其中一个就是填充内容；趁素材还没制作，删掉它比之后再删更省事。在同一轮中标出高潮，并给它页面上最大的篇幅。完整方法见 references/feel.md。

然后为每个节拍分配一种装置。认真决定，并用表格记录：

节拍	装置	选择理由
认知	scrub	摄像机随读者自己的手移动，是最有力的开场方式
紧张	pin + 动态文字	画面固定时，文案逐行组合呈现
转折	reveal	擦拭揭示意味着状态变化，这正是这个节拍的作用
质感	scrub（微距）	呈现肉眼无法以其他方式看到的尺度下的纹理
选择范围	pan	横向移动读起来像“选项”，纵向移动读起来像“论证”
承诺	pin + 指针	页面停止移动，开始响应

这张表是一份电影式评分表。它适用于一种语法，对其他七种语法则不合适，因此填写各行之前，请先阅读该语法的侧重和禁用列表。

构建前检查：

• 遵守语法的禁令。如果一种语法禁止 pin，这里也禁止使用，不管它原本多么合适。
• 使用四种或更多不同的装置类别。少于四种，意味着页面只有一个想法。
• 不要连续两次使用同一装置类别。
• scrub 章节最多两个。视频是页面上最占资源的内容，第三次出现就不再令人惊喜。
• 相邻章节的情绪不能相同。如果相同，其中一个就是填充内容。
• 有一个章节是高潮，而且它的篇幅要明显长于其他章节。高潮前的章节要比它平静。
• 每个章节都要有足够理由占用相应的滚动篇幅。对于较长的电影式页面，8 到 14 个视口高度可作为节奏参考，而不是硬性指标。较短的编辑、画廊或工作界面语法，在旅程完整时就应该保持简短。切勿为了达到长度目标而添加填充内容或空的固定滚动效果。
• 章节数和总长度不能落入前四个构建都使用过的 6 到 7 个章节、每个章节 13.6 到 13.8vh 的区间。这个区间现在也是指纹维度之一。

第 3 步：生成素材

完整流程、提示词脚手架和模型说明：references/assets.md。

简版：

node <skill>/scripts/kie.mjs still "<style preamble>\n\n<scene>" out/01-hero.png --ar 16:9 [--ref brand-can.png]
node <skill>/scripts/kie.mjs shot  "<camera move>" out/01-hero.png out/01.mp4 --dur 5
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01.mp4
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01-m.mp4 mobile

以下四点决定成品看起来是高品质还是像生成的：

• 在每条提示词中原样复用同一段风格前言。 这能让六张独立图片看起来像同一次拍摄。写一次，之后绝不改述。
• 使用素材前，先逐一检查。 仔细查看 PNG。生成成本很低，重新生成的成本更低，总比交付糟糕的画面好。
• 针对拖动浏览进行编码，而非针对播放。 encode.sh 使用密集的 GOP，因为跳转时会从前一个关键帧开始读取。普通的网页编码播放效果完美，但拖动浏览时却会卡得像泥浆一样。
• 让主视觉分层。 将场景拆分成不同平面，让它们以略有差异的速度滚动，并将产品置于中景和前景平面之间。通过差速移动营造纵深，是页面上成本最低的高品质信号。制作方法及其陷阱见 references/devices.md 中的 parallax。

第 4 步：构建页面

编写真正的 HTML。真正的 <h1>、真正的 <p>、真正的链接，以及真正的阅读顺序。引擎会读取标记上的 data-sc-* 属性并驱动页面；它绝不会生成 DOM。正是因为运行时会通过配置对象构建页面，所有基于这种方式构建的网站才会看起来一模一样。

从 references/template.html 开始。设备模式见 references/devices.md；间距、字体、纵深和颜色规则见 references/taste.md。在编写标记前阅读 taste.md，而不是事后才读，并在不宣读检查清单的情况下完成构建。

通过覆盖令牌来设定主题，包括六个值和两种字体：

:root {
  --sc-canvas: #0A0806;  --sc-surface: #16110E;
  --sc-ink:    #F5EBDD;  --sc-ink-soft: #A2968A;
  --sc-accent: #FF5A3D;  --sc-accent-ink: #15110F;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
}

步骤 5：滚动浏览并验证

按照 approved-collection.md §7 中的最终源码与部署检查进行验证。 在所有上下文中禁用原生指针锁定／捕获，并使用安全的无头自动化。检查实际像素、手机端构图和中间状态； 在最终交付包中测试实用控件、下载和表单结果。

这不是可选项，也不能只说“应该能用”。滚动页面没有单一状态： 每个位置都是不同的画面，而问题就藏在你碰巧查看的两个位置之间。完整流程见：references/verify.md。

cd <build project> && npm i playwright-core     # once
node <skill>/scripts/serve.mjs --root . --port 4500 &
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/mobile --width 390 --height 844
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/reduced --reduced-motion

测试工具会在每个幕次中遍历六个位置，等待滚动控制的视频真正稳定下来，并报告滚动无响应、提示始终未达到完全不透明，以及在每行文字下方最亮的画面中，对合成后页面测得的对比度。它还会生成一张联系表。

然后完成测试工具做不到的部分：阅读 sheet.png。 它能证明视频片段会推进，但无法判断构图是否出色、动画是否流畅，或页面是否传达了任何含义。另外，还要通过 Tab 键检查焦点顺序。

然后进行感受检查（references/feel.md §6）。在不了解内容的情况下滚动页面，为每个幕次写下一个词来描述你的感受，然后再打开 BRIEF.md，将其与预期的曲线进行对比。如果两者不一致，问题出在页面，而不是说明。检查联系表，确认高潮是视觉变化最大的部分，且占据最长的滚动距离；同时确认最后一屏能自然收束，而不是淡出至空无一物。

还要说明绿色测试结果未涵盖的内容：真实手机。 无头 Chrome 无法复现 iPhone 的视频解码器、自动播放策略、低电量模式或触控滚动；曾有一次构建连续通过四轮绿色测试，但主视觉片段在实际设备上却冻结了。移动端从始至终都是首要目标，而不是最后才检查的项目：竖屏手机视频片段、针对触控调校的 lerp、加大的点击目标都会一并编写（见 assets.md 和 verify.md）。如果收到任何移动端缺陷报告，请在第一轮就在网站旁部署 references/device-diag.html，让设备给出答案，而不要对无法复现故障的机器进行理论推测。完整的 iOS 视频片段生命周期说明见 verify.md 中的“The phone is a different machine”。若要通过 Wi-Fi 在手机上打开页面，请使用 --lan 启动服务器（默认情况下，服务器仅绑定到本机），并在完成后将其停止：--lan 会让该网络上的任何人都能读取 --root 下的所有内容。

修复发现的问题，再重新拍摄。报告你实际验证了哪些内容，以及哪些尚未验证。

硬性规则

这些是阻止交付的问题，不是偏好。每一项都会让页面显得像机器制作的。

绝不	应改为
默认使用黏土微缩景观、低多边形或黏土动画风格的世界	摄影风格。参见 worlds.md
使用“向下滚动”提示、箭头或动画鼠标图标	什么都不放。他们正在看主视觉，知道该怎么做
使用 01 / 06 章节计数器	删除。这里的顺序不传递信息
每个章节标题上方都放眉题	每三个章节最多放一个。标题本身就足够
在任何可见内容中使用长破折号	改用句号、逗号、冒号或括号
每个段落都将文案居中	变换锚点：靠前、靠后、居中、分栏
连续两次使用相同的手法	在第 2 步妥善规划体验旅程
尚未明确简报和创作决策权就开始生成	执行第 0 步。在 BRIEF.md 中记录实际答案，或明确记录已授权的创作决策
页面没有精心设计的高潮，或有三个相互竞争的高潮	只设一个高潮。将素材预算、高潮前的静默和最多的滚动空间留给它。参见 feel.md §2
结尾逐渐淡出、渐隐，或只是变成页脚	结尾要圆满收束并留有余韵。最后的感受就是他们会记住的感受
在感受曲线形成前规划段落	先定曲线，再定手法。参见 feel.md §1
未设计一个专属标志性手法就交付	设计一个。仅仅重绘聚光灯颜色或调整倾斜角度不算
与任何现有条目相比，指纹维度中通过少于 4 项（共 6 项）仍交付	修改方案，不要修改 FINGERPRINTS.md
为实现专属行为而修改引擎	在页面中编写专属 JS，由 --sc-p 和你自己的 data-sc-* 驱动
因为上一次构建用了电影式一镜到底，就再次采用	从全部八种叙事语法中选择，并说明为何舍弃其余七种
使用全屏暗色遮罩来解决对比度问题	只在文字所在处添加遮罩
将文字烘焙进生成的图像	始终使用真实标记。文字可选中、可翻译且清晰锐利
在计数器中编造统计数据	只用真实数字。没有数字就不要放计数器
使用 transition: all，或对宽度、高度、顶部或左侧位置进行动画	使用 transform 和 opacity；擦除效果使用 clip-path
使用渐变文字、霓虹光晕或偏移量为零的彩色光晕阴影	用字重和字号强调；阴影应有偏移和模糊
自动播放音频，或在任何可擦洗片段中加入音频	移除音轨。encode.sh 已经会处理
未运行第 5 步就交付	运行第 5 步

输出

构建文件夹，包含 BRIEF.md，然后附上简短报告：所用的叙事语法及舍弃其余七种的原因、标志性手法、与每个现有条目对比后的指纹门槛结果、体验旅程、感受曲线和高潮、感受检查差异（预期曲线与实际感受曲线的对比，以及你做出的修改）、评分表（每个节拍对应的手法）、生成的内容、通过截图验证的内容，以及无法验证的内容。说明简报是自行撰写的，还是通过访谈获得的。提供本地 URL。保持简短；页面才是交付物。

然后将本次构建的条目追加到 <workspace>/FINGERPRINTS.md。

对技能本身的修改，以及促成这些修改的构建发现，都记录在 CHANGELOG.md 中。