scrollcraft：让 Claude Code 做出高级滚动网站的免费技能

scrollcraft 是 nateherkai 开源的 Claude Code 技能：把「滚动」本身变成设计——视频随滚轮逐帧擦洗、区块钉住推进、标题逐行拼装，一屏一屏讲完整个故事。内置八套互斥的页面语法、强制签名交互与指纹去重，还会用无头浏览器自己检查每一处滚动位置；拒绝那些一眼就能认出的'AI 味'排版。MIT 免费，附三个真实成品。

AI 生成的网站往往栽在两个方向：要么规规矩矩但过目即忘，要么炫技式滚动动画、正文却挤成一团。scrollcraft 的开发者在 GitHub 上把一款免费的 Claude Code 技能开源出来，专门解决这个问题——它把「交互」与「工艺」当成一件事来做。

这篇是中文原创介绍，帮你判断它是什么、能做出什么、值不值得装。

这是什么

scrollcraft（仓库名 scroll-craft）是一个 Claude Code 技能（skill），用来构建高级、滚动驱动的网站，并把它约束到一个真正的设计标准上。它的核心思路是：把滚动本身变成时间线。 视频随你的滚轮逐帧擦洗、区块在滚动中钉住推进、横向轨道平移、标题逐行拼出来、页面底色随旅途变化，甚至连鼠标指针都能推动非滚动元素。

作者特意强调，这不是换了个「主题」——三个成品之间没有共享的骨架，是三种完全不同页面语法、导航模型与结尾。MIT 协议免费，2026-08 下旬发布几天就拿到 1000+ star。

三个真实成品（官方示例）

同一个技能、同一套引擎，却能产出三种完全不同气质的页面——这正是它的差异化所在。

核心机制

滚动即时间线

• 视频逐帧擦洗、区块钉住、轨道横移、标题逐行拼装、底色随旅程渐变、指针推动非滚动元素。
• 八套互斥的页面语法：电影式一镜到底 / 章节式编辑 / 现场表面 / 连续世界 / 字体海报 / 画廊 / 分舞台 / 节奏剪辑表。每种语法禁止其他语法要求的东西，所以两版构建不可能悄悄趋同。
• 必需签名动作：每个构建都要发明一个专属的、只在这站存在过一次的交互（变个色的聚光灯不算）。
• 指纹去重闸门：新构建必须在「语法 / 导航 / 首屏 / 幕形 / 结尾 / 签名动作」六个维度中，至少四项与你做过的页面不同；不合格就改方案，不改记录。

工艺与手感

• 先有感受曲线再有幕：每幕一行——先写情绪，再写屏幕上是什么触发了它；相邻两幕同一种情绪，说明有一幕是凑数。
• 单一工程化峰值：字面执行「峰值—结尾」法则，峰值拿到资源预算、前面的留白、最多的滚动空间；三个峰等于没有峰。
• 字体地板：最多两套字体，字号越大字距越紧，行长 45–75ch，行高与行长成反比。
• 间距节奏：4px 基准、标题上方留白大于下方、流式区块内边距让手机端不继承桌面端的空隙。
• 色彩六角色 + 单一强调色，次级文字用色调而非纯灰，不用纯黑。
• 拒绝清单：一模一样的功能卡片栅格、01 / 06 计数器、滚动提示、渐变文字、破折号、杜撰统计、假仪表盘、AI 紫渐变、以及每个手工品牌都默认的米色+黄铜调色板。
• 品牌规范是输入而非装饰：把品牌套件丢给它，它的硬规则会赢，包括那些禁止技能本可以随手去用的规则。

自己检查自己

一个无头浏览器会走遍成品的每一处滚动位置，等视频播放头稳定下来，然后报告：

• 死滚动：滚动但屏幕上没有任何变化
• 永远到不了全透明的提示：读者永远只能看到一片淡
• 合成页面上的实测对比度：逐行、在它下方经过的最亮帧上测量，明暗双向都正确评分
• 卡在海报上的腿：一段静悄悄没解码的片段，看起来就像暂停的电影

它还会生成一张 contact sheet，因为机器能证明页面「能用」，却没法告诉你它「有没有意义」。

怎么安装与使用

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

用的时候描述你想要什么，或直接调用：

/nateherk-design:scrollcraft

若安装摘要提示 Run /reload-plugins to activate.，执行它即可。首次使用先跑两个脚本做预检和建工作区：

node scripts/doctor.mjs              # 预检：告诉你缺什么
node scripts/workspace.mjs --ensure  # 创建你的工作区与空指纹注册表

注意事项与现实局限

• 只在 Windows 上跑过：脚本会去 Windows / macOS / Linux 位置找 ffmpeg 和 Chrome，但作者声明尚未在 Mac 上做过构建（可用 SCROLLCRAFT_FFMPEG / SCROLLCRAFT_CHROME 覆盖查找路径）。
• 生成的视频不是免费的：一条十段连续世界飞行是真金白银的 Ki.e.ai 花费；用你自己的照片 / 素材搭页则是零成本。
• 它是有意固执的：会拒绝让 AI 页面变得可辨识的布局与调色板，还会跟你争论「你的峰值」。如果你想要一版「跟别人一样」的网站，这不是对的工具。
• 资产生成是可选的（需要 KIE_AI_API_KEY）；用你自己的素材构建是无需 key、无需花钱的一等路径。

适合谁

适合想用 AI 助手快速做出有品牌感、有互动、不重样的落地页 / 品牌站、又不想雇佣动效工作室的个人与团队；也适合手里已经有素材、只想让滚动叙事变得高级的创作者。它对「AI 味排版」的拒绝清单，恰好是很多人拿到 AI 网站后最想改掉的部分。唯一要留意的是 Mac 用户目前仍需自己验证 ffmpeg / Chrome 路径，以及生成式视频的用量成本。