用 scroll-craft 构建有设计标准的滚动驱动网站

让编码 Agent 做一个沉浸式落地页，结果通常有两种失败：要么规规矩矩但没人记得住，要么滚动动画很炫但正文 2.1:1 的对比度让人读不下去，而且每个 AI 页面都是同样的六个区块。scroll-craft 这个 4k 星的 agent skill 就是为了两种失败都不犯——它把一个滚动引擎和成文的设计标准、一个无头浏览器验证环节打包在了一起。

为什么这个 Skill 重要

scroll-craft 把交互和工艺当作同一份工作。交互这一侧，滚动就是时间轴：视频在滚轮下逐帧擦洗、区块在论证推进时钉在原地、标题逐行组装。README 记载了三个强制结构的机制：

• 八种互斥的页面语法——filmic one-shot、chaptered editorial、live surface、continuous world、typographic poster、gallery、split stage、rhythmic cutlist。每一种都禁止其他语法必需的东西，所以两个成品不可能悄悄趋同。
• 一个必需的标志性交互——每次构建都要发明一个只存在于这个网站的定制交互。
• 一道指纹门——新构建必须在六个维度中的至少四个上与你已做过的每个页面不同：语法、导航、首屏、幕结构、收尾、标志性交互。

工艺这一侧，它在任何一幕存在之前先规划感觉曲线、每页只打造一个峰值，还带着一份拒绝清单——包括一模一样的功能卡片网格、01 / 06 计数器、滚动提示、渐变文字、破折号、编造的统计数据、假仪表盘和 AI 紫渐变——点名这些让 AI 页面一眼可辨的模式。

安装

在 Claude Code 里以插件方式安装：

/plugin marketplace add nateherkai/scroll-craft

/plugin install nateherk-design

如果安装摘要提示 Run /reload-plugins to activate.，就运行它。然后描述你想要什么，或者直接用 /nateherk-design:scroll-craft 调用。

Codex 和其他编码 Agent 则把完整的 plugins/nateherk-design/skills/scroll-craft/ 目录复制进项目的 .agents/skills/，保留其中的 references、scripts、templates 和 engine，然后让 Agent 使用 Scrollcraft skill。

实战：构建并验证一个产品落地页

第一次构建之前，先在仓库根目录运行 doctor 和 workspace 脚本：

node plugins/nateherk-design/skills/scroll-craft/scripts/doctor.mjs
node plugins/nateherk-design/skills/scroll-craft/scripts/workspace.mjs --ensure

README 明确解释了为什么 doctor 要放在第一步：被裁剪过的 ffmpeg 会把缺失的滤镜报告成你的命令里的语法错误，缺失 WebP muxer 会报告成文件名错误——这些问题到后面都会变成误导性的报错。依赖要求是 Node 18+、一份完整的 ffmpeg 构建，以及在构建目录里安装 playwright-core 和 Chrome 供验证环节使用。只有需要生成素材时才要 KIE_AI_API_KEY；用你自己的照片和视频来构建不需要 key，也是一条一等公民路线。

然后给 Agent 下达需求：

用 scroll-craft 给我的新产品做一个发布页：深色、编辑感的产品叙事，主角是一个可以直接操作的界面。开始前先告诉我你选了哪种页面语法、感觉曲线怎么走、标志性交互是什么。

skill 会从八种语法里选一种、规划感觉曲线、在共享引擎上构建页面，然后自查：无头浏览器在每一个滚动位置走完整个页面，报告死滚动（画面毫无变化的滚动）、永远达不到完全不透明的提示元素、在合成页面上逐行实测的对比度，以及静默解码失败的视频轨道。最后它会输出一张联络表——机器能证明页面能跑，但说不出来它是否有表达力。

技巧

• 用六个颜色 token 和两种字体做主题，语义 HTML 自己写——README 里最重要的一条规则就是：引擎永远不随项目修改。
• 指纹注册表一开始是空的，这是对的：这扇门防的是重复自己，所以只有第二次及以后的构建才有需要清关的东西。
• 0.3.0 版本加入了十个已批准网站（AI Automation Society、PERKFORM、Glaido、Herkules Advisory、Serein、FORME、Pelagic、NOEMA、OFFGRID 和 Afterhours）背后的流程——README 给出了实例链接。
• 有品牌规范的页面它也照样诚实检查：把品牌资料指给它，规范里的硬性规则会获胜，包括那些禁止 skill 采用其常规手段的规则。
• CHANGELOG 记录的是每次构建坏了什么、从中总结出什么规则，而不是功能清单。

何时不用这个 Skill

README 的诚实限制值得先读。到目前为止所有构建都只在 Windows 上跑过——脚本也会在 macOS 和 Linux 下查找 ffmpeg 和 Chrome，但没有人在 Mac 上做过构建（SCROLLCRAFT_FFMPEG 和 SCROLLCRAFT_CHROME 可以覆盖搜索路径）。如果要求生成 AI 素材，视频生成是实打实的花费；用你自己的素材构建页面则分文不花。而且它刻意固执己见——如果你就想要一个看起来和别处一样的页面，README 自己都说这是错误的工具。

查看 排行榜 了解更多 skill。