scroll-craft

这是什么？适合谁？

scrollcraft（nateherkai/scroll-craft，462 Stars，MIT）是一个 Claude Code Skill，用来构建「高级滚动驱动网站」（scrollytelling）。作者对 AI 生成网页的诊断一针见血：要么「规矩但无聊」，要么「炫技但没法看」——2.1:1 的正文行高、手机上折成六行的标题、每个 AI 页面都有的那六个 section。scrollcraft 把交互和工艺当成同一件事来约束，而不是两个分开的活儿。

它的核心机制有三层：

1. 八种互斥的页面语法（page grammars）：filmic one-shot（电影式一镜到底）、chaptered editorial（章节化编辑）、live surface、continuous world（连续世界）、typographic poster、gallery、split stage、rhythmic cutlist。每种语法禁止其他语法允许的东西，所以两次构建不会悄悄趋同。
2. 强制签名动作（signature move）：每次构建必须发明一个只存在于这个网站上的定制交互——「换个颜色的聚光灯」不算数。
3. 指纹门（fingerprint gate）：新页面必须在 6 个维度（语法/导航/hero/幕结构/收尾/签名动作）中至少 4 个与历史构建不同，否则重做计划而不是硬上线。

官方展示的三个实例（Orrery 旅行页 / PERKFORM 蛋白咖啡 / Fallowbank 景观工作室）用同一个 skill 产出，页面语法、导航模型、收尾方式完全不同——差异不是「换主题」能解释的。

适合人群：

• 用 Claude Code 接网站外包/做作品集的前端开发者，受够了 AI 页面的同质化
• 品牌站/营销页设计者：需要「看过就忘不掉」的滚动叙事
• scrollytelling 爱好者：想系统学习滚动交互的设计模式

不适合：做后台管理系统、文档站等「规矩」页面的场景；以及完全不做 Web 的团队。

使用前提：Claude Code（或兼容 skills 目录的编码 Agent）+ 一个真实的 Web 项目。

准备工作

1. Claude Code：需有效订阅或 API。安装参考 claude.com/claude-code。
2. 安装 skill：git clone https://github.com/nateherkai/scroll-craft ~/.claude/skills/scrollcraft（或复制到项目级 .claude/skills/）。
3. 项目素材：真实的文案、图片/视频素材——skill 的设计标准（真实摄影、museum-label 文案）依赖真实内容，占位素材会拖低产出。
4. 时间预算：一次完整构建约 30-60 分钟（含多轮「指纹门」校验与返工）。
5. 成本：Skill 本身 MIT 免费；消耗 Claude Code tokens，一次高级构建通常比普通页面贵（多轮自检）。

快速上手（3 步）

第一步：安装 skill

git clone https://github.com/nateherkai/scroll-craft ~/.claude/skills/scrollcraft

第二步：发起构建

在项目目录里对 Claude Code 说：

用 scrollcraft skill 给我的咖啡品牌建官网。
品牌：PERKFORM，蛋白咖啡，主打清晨仪式感。
素材在 ./assets/，文案基调：直接、响亮、产品优先。

预期结果：Agent 会先选定一种页面语法（如 filmic one-shot），画出「情绪曲线」（每幕一行：情绪 + 屏幕上引发它的元素），再开始写代码。

第三步：验证产出

让 Agent 自查并汇报：

这次构建用了哪种页面语法？签名动作是什么？
按指纹门的 6 个维度对照我上次的站点，报一下差异矩阵。

预期结果：得到一份可核对的设计决策记录；不达标时 Agent 应主动提出改计划。

常见踩坑

踩坑 1：产出还是「六个 section 的普通页」

• 现象：滚动正常但没有叙事感，各 section 各自为政。
• 原因：没走「情绪曲线先行」流程，直接跳进了写代码。
• 解决：明确要求「先出情绪曲线和幕结构，我确认后再写代码」。

踩坑 2：两次构建长得越来越像

• 现象：第二个项目复用第一个的手感。
• 原因：指纹门只对「已有构建记录」生效，跨项目不会自动带上历史。
• 解决：把上一个项目的指纹摘要贴进 prompt，让 Agent 显式对照 6 维度差异。

踩坑 3：动效在手机上崩坏

• 现象：桌面丝滑，移动端滚动卡顿/标题折行。
• 原因：skill 强调工艺（行高、折行、触摸目标），但执行依赖 Agent 认真做响应式。
• 解决：验收时明确给出移动端断点要求，逐项检查行高与折行。

踩坑 4：视频 scrub 加载太重

• 现象：首屏卡死、流量爆炸。
• 原因：一镜到底语法常用逐帧视频 scrub，素材没做压缩/预加载策略。
• 解决：让 Agent 输出素材规格要求（帧数/分辨率/编码），先压素材再接管线。

踩坑 5：把签名动作做成「换色聚光灯」

• 现象：所谓定制交互只是主题色变化。
• 原因：Agent 偷懒，绕过签名动作的定义。
• 解决：直接引用 skill 里的原话「A recoloured spotlight does not count」打回去重做。

踩坑 6：skill 没被加载

• 现象：Claude Code 对请求无特殊反应，产出普通页面。
• 原因：skill 目录放错位置或名字不匹配。
• 解决：确认 ~/.claude/skills/scrollcraft/SKILL.md 存在，会话里显式点名「scrollcraft skill」。

初级用法

1. 单语法深挖：连续三个项目都指定「chaptered editorial」，吃透一种语法后再换，比每次乱选进步快。
2. 情绪曲线做设计评审：即使不用它写代码，让 Agent 只产出「情绪曲线 + 幕结构」，也是一份很好的设计文档。
3. 改造存量页：把旧官网交给 skill 做「指纹分析」，得到一份「哪里平庸」的诊断报告。
4. 参考三实例：Orrery / PERKFORM / Fallowbank 分别对应「连续世界/一镜到底/克制纪录」三种气质，选型前先看。

高级玩法

1. 八语法矩阵选型会：让 Agent 按品牌气质逐一评估 8 种语法的适配度并给出排除理由，把选型过程显式化。
2. 签名动作库：为同一品牌积累签名动作（每年官网改版一个新交互），形成品牌交互资产。
3. 与其他 skill 组合：scrollcraft 管结构与动效，配一个文案 skill 管语言，双管线产出完整品牌站。
4. A/B 双语法：同一素材各出 filmic 和 gallery 两版，做真实用户测试选方向。

小技巧

1. 给真实素材：skill 的工艺标准（真实摄影、克制的文案）依赖素材质量，占位图会直接拉低上限。
2. 首问定语法：开工第一句话让 Agent 报出选定语法和理由，能在 30 秒内判断方向对不对。
3. 验收看收尾：普通 AI 页收尾永远是 CTA 按钮；scrollcraft 的收尾应是设计过的（如 Fallowbank 用一行文字收束）。
4. 保存每次指纹：把每版构建的 6 维指纹存档，跨项目防趋同。
5. 移动端预算留给触摸：滚动驱动的页面在触屏上交互减半，让 Agent 为触摸单独设计降级方案。

常见问题 FAQ

Q1：它和普通「让 Claude 写个炫酷网页」有什么区别？

A：区别是约束。普通 prompt 没有语法互斥、签名动作、指纹查重这三道门，产出必然向「六个 section + 淡入动画」收敛；scrollcraft 把差异写进了规则。来源：README

Q2：必须用 Claude Code 吗？

A：skill 是 Markdown 指令包，理论上任何能读 skills 目录的 Agent 宿主（Codex 等）都能用，但作者的打磨以 Claude Code 为准。

Q3：做中文站可以吗？

A：可以，但注意中文排版工艺（行长、标点悬挂）需要额外叮嘱，skill 的行高标准以西文为默认。

Q4：会不会让页面很重、SEO 很差？

A：滚动驱动页面天然偏重。建议 SSR/SSG 输出 + 素材压缩，并把核心信息放静态 DOM 而非 canvas。

Q5：8 种语法之外能自创吗？

A：可以理解为「自创语法 = 第 9 种」，但必须同样满足互斥性和签名动作要求，否则就退化回普通页面。

进阶学习建议

• 把「情绪曲线」当成独立交付物：读 skill 里 feeling curve 的定义（每幕一行：情绪，然后是屏幕上引发它的元素），尝试为自己的每个项目手写一遍再交给 Agent 对照——这是最能拉开差距的设计功。
• 研究三实例的收尾差异：Orrery 回到工作台、PERKFORM 硬切倒置背景、Fallowbank 用一行跑动的文字收束；收尾方式是页面语法的浓缩样本。
• 指纹门的跨项目实践：给自己建一个「构建档案库」，每次上线记录 6 维指纹；三个月后回看，你会精确知道自己的审美有没有被 AI 同质化。

参考链接

• scroll-craft GitHub 仓库
• Claude Code 官网
• scrollytelling 概念参考

免责声明：本文基于官方仓库 README 与 GitHub 公开数据整理，AI 辅助生成，MagicNetWorld 尚未完成独立实测。三个官方实例站点效果请以仓库链接实际访问为准。