scroll-craft

一个编码 agent 在动手设计页面前先读的技能，由一个人做出来，并且自带一整套写下来的标准：八种互斥的页面语法、一次必须原创的标志性交互、一条必须在任何段落存在之前就先写出来的情绪曲线、一个被工程化的最高点，以及排版、间距、色彩、纵深四条底线；还有一份指纹台账，新建的页面若不能在六个维度里至少四个上与已做过的页面拉开距离，就会被挡回来。规则旁边是一个从不按项目改写的滚动引擎，以及七个脚本——体检、编码、本地服务、工作区管理与一趟无头验证都在里面——它们会走遍成品页面的每一个滚动位置。它以 Claude Code 插件的形式发布，同时也是一个任何有文件权限的 agent 都能直接读的目录。

谁做的Nate Herk，GitHub 账号是 nateherkai。材料里没有他的任何生平——没有雇主、地点，也没有别的项目——所以这条记录只能由仓库本身构成：四十天里 16 次提交，每一次都是他署名的，贡献者列表上只有一个名字。16 次里有 12 次带着一条共同作者尾注，写的不是人而是模型——Opus 5 七次、Opus 4.8 两次，Opus 5.5、Fable 5 与 Fable 5.1 各一次。仓库有 2,877 个星、418 个 fork、23 个 watcher，而 README 展示的三个成品里，有一个是以他自己的名字命名的作品集页面。

1. 01

   四十天十六次提交，版本史写在 changelog 里

   仓库建于 2026-08-22T15:25:08Z，第一次提交在九分钟之后落地，信息是 Initial commit: scrollcraft as a Claude Code plugin；最后一次是 2026-09-30T13:31:41Z，信息是 Security and Windows fixes, engine teardown (0.3.1)。这就是全部历史：四十天里 16 次提交，八月八次、九月八次，全部由同一个人、同一个关联账号署名，贡献者列表上只有他一个。16 次里有 12 次带着共同作者尾注，写的是模型而不是人——Claude Opus 5 七次、Opus 4.8 两次，Opus 5.5、Fable 5、Fable 5.1 各一次。周围是 2,877 个星、418 个 fork、23 个 watcher 和五个未关闭的报告，仓库 10,220 KB，语言一栏写着 JavaScript，许可证 MIT。缺的那部分同样说明问题：一个 GitHub release 都没有，标签只有一个，叫 nateherk-design--v0.2.0。版本线不在那儿。README 把 0.3.0 当成一个里程碑来讲，但想知道历史的人会被指去 CHANGELOG.md——35,142 字节，比技能文件本身还大——并被告知它记的是「what broke on each build and the rule that came out of it, rather than a feature list」。

2. 02

   标准是从十个已经上线的站点里读出来的

   0.3.0 被称作「the approved ten-site standard」，内容是先做出来的十个站点背后的流程：AI Automation Society、PERKFORM、Glaido、Herkules Advisory、Serein、FORME、Pelagic、NOEMA、OFFGRID 与 Afterhours。README 里链了一段五十秒的走查视频，另有三张截图存在仓库里——AI Automation Society 是一个 45 万人社区的深色社论式首页，一个亮调的、给作者本人做的作品集页面，以及 PERKFORM 这个蛋白咖啡品牌的一次性电影感长页。README 对它们的说法是：这不是三套主题，而是「different page grammars, different navigation models, different endings」，三者背后是同一个技能、同一个引擎。这一版加进去的不是外观，而是一张清单：各自独立的纵深平面与接触锚点，开场、中点、退场三种状态分开设计；先用真实品牌资产与核实过的产品细节，再决定要不要生成图像；在照片合成与真 3D 渲染之间明确选一种；导航、信息顺序、有用的控件和结尾逐站单独写；手机端单独做美术指导，并核验真实的滚动帧、回退与打包；遇到明确的创意授权就不再多问一轮。承载它的参考文档是 references/approved-collection.md（11,650 字节），旁边是 references/hero-depth.md（6,260 字节）。两条边界被明确写出来：客户素材与私有表单数据不打进仓库，而这次十站重建用的是 Codex，不是 Claude Code 插件。

3. 03

   用数字代替形容词，还有一道对着自己上一版作品的闸门

   README 开篇先点名 AI 网站通常的两种失败——规矩但记不住，或者动效花哨却配着 2.1:1 的正文对比度、标题在手机上折成六行——然后把这套标准写成可量化的约束，而不是品味。排版：最多两个字族，字号越大字距越紧，行宽 45 到 75 字符，行高与行宽成反比，浅字压深底要在三个轴上做补偿。间距：4px 基准，标题上方的留白多于下方，区块内边距用流体值，免得手机继承桌面端的空旷。色彩：六个角色加一个强调色，次级文字用带色偏的灰而不是平灰，不用纯黑，并且为那些在明暗底之间硬切的页面留了一条写明了的例外。纵深：五种各管一段的工具——偏移投影、边缘光、以缩放加模糊表达距离、叠压、颗粒。结构：八种刻意互不相容的页面语法——电影感一次性长页、分章社论、活界面、连续世界、字体海报、画廊、分屏舞台、节奏化剪辑单——README 说它们「each one forbids what the others require, so two builds cannot quietly converge」。每次构建还欠一次原创的标志性交互，而「a recoloured spotlight does not count」。执行靠一道指纹闸门：新页面必须在语法、导航、首屏、幕形、收尾、标志性交互这六个维度里至少四个上，和已经做过的每一页都不一样，而且「fail it and you change the plan, not the record」。一份拒绝清单则承担了反向基准：一模一样的特性卡片网格、01 / 06 计数、滚动提示、渐变文字、破折号、编造的统计数字、假仪表盘、AI 紫渐变，以及每个手作品牌都会用的奶油色配电镀黄铜。

4. 04

   一个不许改的引擎、一趟无头巡检，和一张接触印相

   散文之下只有一条硬规则：引擎是机制，从不按项目改写。它用六个色彩 token 和两个字族做主题化，页面由使用者自己写语义化 HTML，任何定制都走引擎发布的 --sc-p 自定义属性——README 给的理由是：一个从配置对象生成页面的运行时，「exactly why every site built on one looks the same」。引擎本身是两个文件，scrollcraft.js 62,176 字节、scrollcraft.css 19,769 字节。负责检查的另一半是 scripts/，七个文件、71,783 字节，其中 shoot.mjs 33,472 字节，是整个仓库里仅次于技能文件的第二大文件，worldflight-assert.mjs 13,115 字节排第三。一个无头浏览器会走遍成品的每一个滚动位置，等视频播放头稳定下来之后再报出四类有名字的毛病：空滚（滚了但屏幕上什么都没变）、永远到不了全不透明的提示文字、按行在合成后的页面上量出的对比度（取那一行上方经过的最亮一帧，逐行决定方向，明底深字与深底浅字都能正确评级），以及「腿卡在海报上」——一段静默地从未解码的片子，看起来和暂停的电影一模一样。之后它写一张接触印相，因为「a machine can prove a page works and cannot tell you it means anything」。开工前先体检：doctor.mjs（7,281 字节）存在的原因，是三种常见毛病否则都会在更晚的时候伪装成别的错误——被裁剪过的 ffmpeg 会把缺失的滤镜报成你自己命令里的语法错误，缺 WebP 封装器会报成一个坏文件名，playwright-core 会从错误的目录被解析到。构建产物与台账放在同一个被解析出来的工作区里：SCROLLCRAFT_HOME，否则向上找最近的 .scrollcraft.json，再否则 <项目根>/scrollcraft。

5. 05

   九个陌生人报的问题，和进了 0.3.1 的那三个

   仓库上有九个 issue 与 pull request，由九个不同账号提交，而这九个名字没有一个出现在贡献者列表里——那张表只有一个条目。最早的一条是文档与运行时的漂移：引擎只从同时带 data-sc-cue 的那个元素上读 data-sc-kinetic（engine/scrollcraft.js:373 与 :869），而 references/template.html:58-59 与 references/devices.md:30-31 里的 scrub 示例都把属性放在子元素上，于是那个模式被静默忽略。另外四条是打包与平台：通过 skills 命令行安装、支持 Codex 与 Claude Code 之外的 agent、把技能描述从 1,175 字符砍到 414 字符以躲开某个加载器超过 1,024 就报警的门槛，以及在 Linux 上以 root 跑 shoot.mjs 时 Chromium 直接崩溃。最后一次提交的信息写着 Security and Windows fixes, engine teardown (0.3.1)，点的正是剩下的那三件。拆解泄漏那一条来自一个把引擎搬进 Phoenix LiveView 应用的人：mount() 在 window 上注册了 touchstart、touchend、pointerdown、click 与 scroll，另有 pointermove、一个滚动读取循环和 focusin，全部是匿名处理函数、没有任何地方注销，于是在一个会换掉 DOM 却不重新加载页面的宿主里，监听器和两个动画帧循环只增不减；同一位报告者补充说，即便拆解之后 documentElement 上仍留着 --sc-seg、--sc-segp 与 --sc-canvas。一条 Windows 报告发现 Edge 回退路径找的是 Program Files\Microsoft\Edge，而 x64 上稳定版从不装在那里，而且是三个脚本同时写错。最后一条针对 scripts/serve.mjs，带复现命令列了三个毛病：服务监听所有网卡，于是同一个 Wi-Fi 上的人都能读构建目录；路径检查少了一个分隔符，服务一个构建目录时把隔壁那个也一起服务了；一个畸形 URL 会在 decodeURIComponent 里把进程打死。修法提示和验收标准都是这位报告者自己写好的。