绝大多数由 AI 编码助手生成的落地页都有一个共同特征，让人一眼就能看破：六个规整雷同的卡片网格、泛滥的紫色渐变、手机端折成六行的超长标题，以及毫无情绪起伏的滚动动效。表面看是 AI 缺乏现代网页审美，本质是智能体在生成页面时缺少系统级的设计决策约束与工艺校验规则。
开源项目 scroll-craft 近期在 GitHub 上线并持续迭代 [1]，作者 Nate Herk 将重构 10 个沉浸式滚动网站的完整设计工作流，打包成一条可被 Claude Code 和 Codex 直接加载的开源 Agent Skill（智能体技能）[1]。它不提供千篇一律的固定页面模板，而是为大模型植入一套包含页面文法、情感曲线、动态排版及无头浏览器自检在内的严密工艺规范。
一键载入：在四类智能体环境中配置开发技能
scroll-craft 的核心是一套完整的开发协议，只要智能体具备文件读取或插件扩展能力即可无缝运行 [1]。
针对 Claude Code 终端，开发者可以直接使用官方插件系统快速安装： ``bash /plugin marketplace add nateherkai/scroll-craft /plugin install nateherk-design /nateherk-design:scroll-craft ``
针对 Codex，开发者只需将仓库克隆到本地，把完整的 scroll-craft 文件夹移入项目的 .agents/skills/ 目录下，随后提示 Codex use the Scrollcraft skill 即可。
针对原生支持 Agent Skill 标准的智能体平台，直接将项目放入其 skill 文档目录。对于仅具备常规文件系统访问权限的代码智能体，在工作区保留仓库并发送指令：“请阅读 plugins/nateherk-design/skills/scroll-craft/SKILL.md 并使用它构建网站，严格遵循其中的设计与验证工作流。”
完成环境挂载后，首次运行必须在项目根目录执行体检脚本： ``bash node ./scripts/doctor.mjs node ./scripts/workspace.mjs --ensure ``
这一步能提前拦截三类最隐蔽的运行时报错：缺少滤镜的被阉割版本 FFmpeg 会把参数报错伪装为命令语法错误；缺少 WebP muxer 封装器会导致资源导出报出文件名损坏；playwright-core 若在根目录未找到 Chrome 实例，则无法执行渲染审计。开发者须在生成目录下执行 npm i playwright-core 确保无头环境完备。
| 构建阶段 | 核心问题 | 留下的硬伤 |
|---|---|---|
| 结构规划阶段 | 模型直接套用通用栅格系统 | 页面各 Section 节奏单调，全站沦为雷同的卡片堆叠 |
| 视觉生成阶段 | 缺乏类型学约束与禁忌清单 | 充斥 AI 紫渐变、毛玻璃粘土风与毫无意义的虚假图表 |
| 上线校验阶段 | 缺乏滚动链路逐帧回溯 | 产生无视觉变化的无效滚动（Dead Scroll）与文字对比度失效 |
八套互斥文法与四条脊椎规则：打破 AI 生成的模板感
为了杜绝生成出来的网站千站一面，scroll-craft 在系统提示词层面锁死了四条设计“脊椎规则”：
- 变化即产品：单个页面必须至少使用 4 种 device 系列（视觉载体组合），且同一种表现手法严禁连续在相邻幕次中使用。
- 拒绝廉价 3D：除非品牌方明确要求插画风，否则场景必须保持真实照片级质感，默认禁用柔光磨砂与低多边形粘土风格。
- 禁止无目的的长镜头：整段不中断的 3D 运镜与相机飞行极为消耗性能且体验脆弱，仅在需求明确定义为“连续单向旅程”时才被允许唤起。
- 视觉风格不等于页面架构：视觉载体只负责表象修饰，页面结构必须独立定义，防止后续构建反复继承同一套骨架。
在此基础上，技能内置了 8 种在代码与结构层面严格互斥的页面文法（Page Grammar），包括电影单镜头（Filmic one-shot）、章节叙事（Chaptered editorial）、活体表面（Live surface）、连续世界（Continuous world）、字排海报（Typographic poster）、展厅画廊（Gallery）、分裂舞台（Split stage）以及节奏剪接（Rhythmic cutlist）。每种文法都显式禁止其他文法的核心必选项，彻底斩断大模型在生成过程中悄然滑向折中中庸样式的倾向。
同时，技能引入了“指纹闸门”校验，新生成的构建必须在文法、导航形态、首屏（Hero）、幕次走向、收尾及专属签名交互（Signature move）这 6 个维度中，至少有 4 个维度与知识库既有案例完全不同，否则智能体会直接重写方案而非强行交卷。
工艺层落地：排版、色彩与空间层级的像素级约束
在进入编码前，智能体会首先生成一条情感曲线（Emotional curve）。每个幕次（Act）严格分配一行定义：该幕触发的具体情绪，以及屏幕中哪个视觉实体引发了该情绪。若相邻两个幕次的情感标签重合，其中一个就会被判定为冗余内容并被重构；全站只允许设置一个最强视觉峰值，坚决执行峰终定律。
在排版细节方面，scroll-craft 建立了严苛的“字体地板”：
- 全站至多引入两个字体家族；
- 字体字号越大，字距（Letter-spacing）必须越紧缩；
- 文本行宽强制卡位在 45 至 75 个字符（ch）之间，行高与行宽严格成反比计算；
- 浅底深字模式下，必须针对字重、字距与行高进行三轴反向补偿。
在空间与色彩体系上，间距强制基于 4px 栅格倍数递增，标题上方留白必须多于下方，全站采用流式区块内边距。色彩系统分配 6 个语义角色并严格限制为 1 个强调色；次级文本必须通过色相微调（Tint）实现，禁止使用死板的扁平灰，且严禁使用 #000000 纯黑。界面的空间深度则完全交由 5 种物理工具实现：偏移阴影、边缘轮廓光、基于模糊与缩放的景深变化、几何重叠以及细微杂色颗粒（Grain）。
技能还内置了清晰的拒绝清单：严禁输出完全一致的特性卡片阵列、类似 01/06 的装饰性计数器、渐变文字、毫无来源的破折号、编造的伪统计数字、假仪表盘，以及 AI 生成站点泛滥的紫粉渐变和奶油金工匠色调。
无头浏览器巡检：让 AI 用测试用例验证自身产物
传统代码生成工具在输出 HTML 与 CSS 后便宣告流程结束，而 scroll-craft 会启动一个基于无头 Chrome 的验证回路（Verification harness）。
该机制会在真实视口中逐像素模拟用户的滚动操作，在每一幕停止并等待视频或动画帧稳定后进行机器审计：
- 无效滚动检测（Dead scroll）：抓取用户发生物理滚动但屏幕像素未产生任何有效状态转移的停滞区间；
- 透明度异常（Cue lock）：排查未完全达到 100% 不透明度的过渡文案，防止访客因视觉渐变截断而被迫阅读残缺副本；
- 全链路动态对比度测算：在混合动效图层上按行检测前景文字与背景经过的最亮/最暗帧，确保在任何滚动阶段均符合可访问性标准；
- 海报帧死锁（Poster stall）：识别因编解码异常导致首帧静止、看似暂停录像的异常媒体节点。
完成巡检后，脚本会输出一份网页全局联系表（Contact sheet）。正如作者在规范中所强调的，机器能够通过测试证明页面“技术上可用”，但只有人类才能最终判断它的叙事节奏是否“有意义”。
此外，架构层面的铁律是：项目的核心运行引擎（scrollcraft.js 与 scrollcraft.css）属于基础设施，开发者与智能体在任何具体项目中均不得改动。所有的个性化外观全部通过注入 6 个颜色 Token、2 个字体变量及引擎暴露的 --sc-p 滚动进度自定义属性来驱动，坚决摒弃依赖庞大运行时配置对象的劣质架构。
综合判断与局限说明
scroll-craft 的核心价值在于：它不是一个用来让普通人“零思考批量建站”的傻瓜工具箱，而是一套把资深创意总监的设计原则与前端极客的校验流程进行代码化封装的智能体技能。它不迎合“想要一个标准现代 SaaS 落地页”的平庸需求，而是通过主动对抗大模型的生成惰性，逼迫 AI 在既定轨道内交出具备电影级运镜与扎实排版工艺的专业网页。
当前该方案仍存在明确的实践局限：
- 跨平台兼容测试尚不充分：开发与测试基准目前主要在 Windows 环境下验证，尽管内置探测脚本覆盖了 macOS 与 Linux 的路径检索，但在类 Unix 生产环境直接跑通全量 build 仍需开发者配置
SCROLLCRAFT_FFMPEG与SCROLLCRAFT_CHROME环境变量进行适配。 - 多媒体生成成本并非完全归零：如果选择调用外部云端生图/生视频模型生成十几个视角的连续穿梭镜头，会消耗对应的 API 资源；如果创作者自备高质量三维渲染或实拍切片素材，则整套流水线可完全实现本地零成本运作。
一个目前仍未解决的问题是：当落地页需要承载极其复杂的表单收集、动态购物车结算以及多级复杂用户状态管理等重型交互功能时，这种完全以滚动进程为核心驱动的轻量运行时，该如何与 React、Vue 等重量级前端框架的状态机实现优雅解耦与深度协同。
引用来源
[1] Nate Herk. "nateherkai/scroll-craft: Turn AI coding agents into senior creative developers." GitHub Repository, 2026-09-04. https://github.com/nateherkai/scroll-craft [2] AI Automation Society. "The AI Automation Society Official Portal." AI Automation Society Showcase, 2026-09-01. https://aiautomationsociety.ai [3] Nate Herk. "Nate Herk Portfolio & Creative Direction." Personal Showcase, 2026-08-28. https://nateherk.com [4] PERKFORM. "PERKFORM High-Protein Coffee Interactive Experience." Product Landing Page, 2026-08-25. https://perkform.co [5] Anthropic. "Claude Code: Plugins and Skills Architecture Reference." Claude Developer Documentation, 2026-08-30. https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/plugins
