📌 项目地址：github.com/nateherkai/scroll-craft | 星数：2,400+ | 协议：MIT | 形态：Agent Skill / Claude Code 插件
AI 生成网站有两种死法：一种是规矩但平庸，看过即忘；另一种是炫技翻车——滚动动画很炸，但正文 2.1:1 行距、标题在手机上折成六行、六个区块和别家 AI 页面一模一样。scroll-craft 的定位就是「带真实设计标准的滚动网站 agent skill」：它把交互和工艺当作一份工作来管，0.3.0 版直接内置了十个过审网站（AI Automation Society、PERKFORM、Glaido、HerKules Advisory、Serein、FORME、Pelagic、NOEMA、OFFGRID、Afterhours）的完整生产流程。想要 3D 组件的话可以搭配 ThreeUI教程：Design+Code开源3D交互组件库；想先画草图再生成，看 m3e-canvas教程：浏览器草图变vibe coding提示词。
| 模块 | 说明 |
|---|---|
| 设计工作流 | 从深度平面规划到收尾验证的完整流程 |
| 十站标准 | 十个过审沉浸式网站的过程文档全公开 |
| hero-depth 指南 | 首屏深度平面：分层视差+指针响应 |
| 引擎 | 内置滚动引擎（含视频兼容性修复） |
| 验证工具 | 检查真实滚动帧、回退方案与打包产物 |
| 双形态 | 通用 agent skill + Claude Code 插件 |
# Claude Code 插件方式（推荐）
# Claude Code 内：
/plugin marketplace add nateherkai/scroll-craft
/plugin install scroll-craft
# 通用 skill 方式（Cursor/Codex 等支持 skills 格式的 agent）
npx skills add nateherkai/scroll-craftnateherkai 开源的 agent skill（GitHub 2.4k 星，MIT 协议），用于让 Codex、Claude Code 等能读说明、改文件、跑命令、查浏览器的编码 agent 构建高级滚动驱动网站。0.3.0 版内置十个已过审沉浸式网站（AI Automation Society、PERKFORM、Glaido 等）背后的完整流程：设计工作流、参考文档、引擎和验证工具，并可作为 Claude Code 插件一键安装。
AI 生成网站的两大通病：要么规矩但平庸，要么炫技翻车——2.1:1 行距正文、手机上折成六行的标题、千篇一律的六个区块。scroll-craft 把交互（interaction）和工艺（craft）当成一份工作而不是两份：先规划独立深度平面、接触锚点和开场/中段/退出状态，再基于真实品牌资产和已核验产品细节生成，手机端单独艺术指导并验证真实滚动帧、回退和打包产物。
作为 Claude Code 插件安装最方便（项目同时提供通用 agent skill 形式）。装好后 skill 内置引擎和验证工具直接可用，配套 references/approved-collection.md 讲十个过审案例的生产流程，references/hero-depth.md 讲 hero 深度平面指南。同引擎同 skill 造出的三个示例站（社区暗色编辑风、高亮玻璃创作者作品集、蛋白咖啡电影感一镜到底）共用零骨架，页面语法、导航模型和收尾方式完全不同。