{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */}

Scrollcraft

高级滚动驱动落地页；滚动即时间轴。

Skill 元数据

参考：完整 SKILL.md

scrollcraft

滚动是每位访客已经熟悉的唯一输入。本 skill 把它当作一条时间轴：滚轮是擦洗条，页面是一部上面叠着真实文字的影片，每个段落行为差异足够大，让访客愿意继续往下。

你产出的东西： 一份访谈简报、一套页面语法、一张客户旅程地图、一条带一个精心设计峰值的感受曲线、一个滚动评分、一个招牌动作、素材、一个跑在 token 驱动设计底板上的真实 HTML 页面，以及一条证明它在每个滚动位置都站得住的截图条带。

适用于："scrollytelling"、"滚动动画站点"、"一个滚动时播放视频的站点"、"苹果风格落地页"、"3D 滚动世界"、"把我的品牌做成一段滚动体验"、"这看起来像个模板"，或任何一个应该感觉像体验而非文档的站点请求。

这不是什么

它不是"生成一段飞越镜头再把文字丢上去"。那只会产出一个套到整页上的装置，一眼就能认出。四条脊柱规则：

1. 多样即产品。 至少四种装置族，绝不连续两次用同一装置。阅读 references/devices.md。
2. 世界是摄影感的，除非品牌确实是插画风。黏土/低多边形布景被禁止作为默认。阅读 references/worlds.md。
3. 没有连续长链，除非简报字面就是"一段连续旅程"（那就见 references/worldflight.md）。
4. 一个不同的世界不等于一个不同的页面。 结构是另一条轴；刻意地决定它。阅读 references/uniqueness.md。

第 0 步：访谈

动手建任何东西之前，务必在对话里问用户。 真问题，在对话里问、在对话里答，写下来——不是从品牌名推断出的简报。一次问八个问题：

1. 三到五个词的氛围，外加最多三个来自任何媒介的参考（电影、专辑封面、店铺、杂志、游戏——不是"你喜欢的网站"）。
2. 滚动旅程，一段一段，用他们自己的话。
3. 能量曲线——哪里平静、哪里激烈。
4. 滚动时每个阶段人应该有什么感受，以及他们唯一该记住的那个瞬间是什么？ 它变成感受曲线和峰值。见 references/feel.md。
5. 这个站点该做一件他们见过的任何站点都没做的事——招牌动作的种子。
6. 离高级极简多远？ 在 references/uniqueness.md §5 里给出范围：粗野、极繁、 playful、复古、密集、编辑部风、高级极简。
7. 一个不间断的世界，还是若干不同场景？ 最大的结构分叉，由他们定。
8. 他们已有什么素材？ 影片、照片、产品图、品牌套件。"什么都没有"也行，意味着一个完全生成的世界。

在任何动作规划之前，把答案逐字写进 <workspace>/builds/<name>/BRIEF.md（用 write_file）。BRIEF.md 必须包含八个答案、感受曲线（每幕一行：情绪，然后起因）、峰值（写成访客会对朋友说的那句话）、完成的"It's the site where ___"句子，以及任何作者式留白。如果在完全自主运行中确实联系不上用户，自撰 BRIEF.md，标注 Self-authored, not interviewed，并在报告里说明。

引导

运行预检而非手工检查（它能抓到一个把缺失过滤器报成语法错误的阉割版 ffmpeg）：

node <skill>/scripts/doctor.mjs
node <skill>/scripts/workspace.mjs --ensure   # 打印 workspace，播种注册表

workspace 解析顺序：SCROLLCRAFT_HOME 环境变量；从 cwd 向上走的最近 .scrollcraft.json（{ "workspace": "..." }）；<project root>/scrollcraft。构建产物在 <workspace>/builds/<name>/，指纹注册表在 <workspace>/FINGERPRINTS.md（从 templates/FINGERPRINTS.md 播种，初始为空——这道门禁防止你重复你自己）。

把 engine/scrollcraft.js 和 engine/scrollcraft.css 复制进构建文件夹。绝不按项目编辑引擎。 用 token 做主题；写你自己的标记。定制行为就是页面里定制的 JS，由 --sc-p 和你自己的 data-sc-* 属性驱动。

第 1 步：简报，旅程优先

用平实的 prose 开放地问主体。然后只问第 0 步没覆盖的：这是什么、为谁做；页面植入的那一句话；唯一的下一步动作（一个标签，处处使用）；他们已有什么；来自 references/worlds.md 的艺术指导。然后写旅程：四到七个拍节，每个拍节都是访客所知或所感的一次转变。拍节是脊柱；不服务任何拍节的段落砍掉。生成素材之前先和用户确认旅程——素材是最贵的部分。

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

完整细节见 references/uniqueness.md。

• 选一套语法。 八套，互斥。选了电影感一镜到底就要在报告里说清其他七套为何落选。导航、hero、收尾都从语法派生。
• 发明招牌动作。 一个在页面里编码的定制交互，不是对套件装置的参数微调。访谈问题 5 是种子。
• 跑指纹门禁。 计划中的构建必须在 6 个维度里至少 4 个上与 <workspace>/FINGERPRINTS.md 里每一行都不同：语法、导航处理、hero 装置、幕序列形状、收尾模式、招牌动作。若失败，改计划，不改日志。
• 在评分表之前先写感受曲线（方法见 references/feel.md）。然后在一张书面表里给每个拍节分配装置（拍节 / 装置 / 原因）。

构建前检查：语法禁令成立；4+ 装置族；不连续两次用同一装置；最多两个 scrub 幕；相邻两幕感受不同；一个峰值且跨度最大；整页长度 8–14 个视口高。

第 3 步：素材

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

优先走 Hermes 原生通路：

• 用户提供的影片和照片——无 key、无花费，一等公民通路。调色并编码它们。
• image_generate 工具出静帧：在每个提示里逐字复用同一段风格前缀，正是这让六张图看起来像一次拍摄。用之前检查每个素材（vision_analyze）；重掷胜过发一张坏帧。

可选上游通路——kie.ai（逐字 vendored 为 scripts/kie.mjs）：照片级静帧和运镜片段。需要 KIE_AI_API_KEY 环境变量（在你的 shell 里 export；本移植版没有附带 env 文件）。用 node <skill>/scripts/kie.mjs probe 查余额；静帧几美分，5 秒片段更贵。

node <skill>/scripts/kie.mjs still "<style preamble>\n\n<scene>" out/01-hero.png --ar 16:9
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

为擦洗而非播放而编码。 encode.sh 设置密集 GOP，因为 seek 会从前一个关键帧走起；普通 web 编码擦起来像泥浆。它还会去掉音轨。

第 4 步：建页面

写真实 HTML——真实 <h1>、真实 <p>、真实阅读顺序。引擎从你的标记上读 data-sc-* 属性并驱动它；它从不生成 DOM。从 references/template.html 起步。装置模式：references/devices.md。间距、字体、纵深、色彩：references/taste.md——写标记前读它。用覆盖 token 做主题，六个值两种字体：

: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 步：通过滚动它来验证

不是可选。每个滚动位置都是一帧不同的画面；失败藏在你看过的两帧之间。完整流程：references/verify.md。

cd <build project> && npm i playwright-core     # 一次
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

harness 在六个位置逐幕走查，等擦洗视频稳定，报告死滚动、永远达不到全不透明的 cue、以及合成对比度；它写一张接触印相。然后你自己读 sheet.png（vision_analyze）——harness 证明的是片段在前进，不是页面有意义。跑感受检查（references/feel.md §6）：冷启动滚动，每幕一个词，对照 BRIEF.md 做 diff。它们不一致的地方是页面错了，不是简报错了。

一次绿灯运行并不能覆盖一台真手机（视频解码器、自动播放策略、低电量模式）。任何报告的移动端缺陷，第一轮就在站点旁部署 references/device-diag.html，让设备自己回答。

硬规则（阻断发布）

无黏土布景默认；无"scroll to explore"提示或动画鼠标图标；无 01 / 06 段落计数；每三段最多一个 eyebrow；无可见破折号；变化文案锚点；不连续两次用同一装置；绝不在访谈前构建；一个精心设计的峰值，不是零个也不是三个；收尾是收束而非淡入页脚；先曲线后装置；一个定制招牌动作；对每一行做到 6 选 4 指纹通过；绝不编辑引擎；无全幅深色遮罩做对比（只在文字所在处加 scrim）；无烤进图片的文字；无编造统计；无 transition: all 或动画 width/height/top/left（用 transform/opacity；擦除用 clip-path）；无渐变文字或霓虹光晕；擦洗片段无音频；绝不在没有第 5 步的情况下发布。

产出

构建文件夹含 BRIEF.md，然后一份简短报告：语法以及其他七套为何落选、招牌动作、逐行指纹门禁结果、旅程、感受曲线与峰值、感受检查 diff、评分表、你生成了什么、你用截图验证了什么、以及你无法验证什么。把本次构建的行追加到 <workspace>/FINGERPRINTS.md。

常见陷阱

• scripts/shoot.mjs 需要 Playwright（npm install playwright 或 playwright-core 外加一个 Chrome 安装）。Hermes 的 browser_exec 工具是滚动截图验证的更轻替代：服务构建、分步滚动、截图、自己检查。
• scripts/kie.mjs 需要 KIE_AI_API_KEY 和付费额度；预算不明时优先 image_generate 或用户素材。
• encode.sh 和 doctor.mjs 期望完整 ffmpeg 构建；发行版阉割的 ffmpeg 把缺失过滤器报成命令语法错误——先跑 scripts/doctor.mjs。
• 上面的上游脚本调用抄自上游文档，本移植版除 node --check 语法校验外未验证——若有漂移信 --help/源码。
• 上游仓库附带 worked examples 和 changelog，本移植版未 vendored；想要就去上游仓库看。