scroll-craft 是一个面向 Claude Code 的前端设计/生成技能插件，用于构建高品质、强交互、以滚动为时间轴的营销页、品牌页和叙事型网页。它不只是生成页面骨架，而是把页面语法、情绪曲线、滚动交互、视觉设计规范、资产处理和自动化截图验证整合到一个工作流中，目标是避免常见 AI 生成网页的同质化、可读性差和动画炫技但体验不佳等问题。
适用领域
前端开发 / Web 交互设计 / 滚动动画 / 创意编码 / 品牌官网与落地页 / AI 辅助设计 / Claude Code 插件 / 视觉设计系统 / 无障碍与可读性检查 / 视频/图像资产处理
配置难度
中高。对普通前端开发者来说，基础安装不难，但要充分发挥价值，需要理解 Claude Code 插件、Node 脚本、ffmpeg、Playwright、滚动交互设计、视觉设计规范和素材处理。若只是调用生成页面，难度中等；若要定制、排查视频编码或验证问题，难度较高。
商业价值
较高。对于需要差异化品牌表达的产品发布页、营销页、创意官网和高端服务展示页，它可以显著提升页面质感和互动体验，减少 AI 生成网页的模板感，并通过自动验证降低可读性和滚动体验风险。它尤其适合设计工程团队、独立工作室和重视视觉叙事的初创公司。不过，如果业务只需要普通信息展示页或低成本批量模板站，该项目的复杂度和强设计主张可能会超过实际需求。
01
技术亮点
- 强调“滚动即时间轴”，支持视频逐帧 scrub、固定区块推进、横向轨道、逐行标题组装、背景色随滚动变化等效果
- 内置八种互斥页面语法：电影一镜到底、章节编辑、实时表面、连续世界、字体海报、画廊、分屏舞台、节奏切片，降低生成页面同质化
- 要求每个项目必须有独特的 signature move，即只属于该站点的定制交互
- 通过 fingerprint gate 检查新页面是否与已生成页面在语法、导航、hero、叙事结构、结尾、标志性交互等维度足够不同
- 将情绪曲线、峰终定律、排版底线、间距节奏、颜色角色、深度层次等设计规则显式纳入生成流程
- 提供自动化验证能力，可检测死滚动、文本透明度问题、合成页面上的对比度、视频未解码等问题
- 通过 contact sheet 截图让开发者快速审查不同滚动位置的页面状态
- MIT 许可证，便于商业项目使用和二次开发
- README 对能力边界和局限较诚实，明确说明工具高度主观、生成视频会产生额外成本、跨平台验证有限
02
目标用户
- 使用 Claude Code 的前端开发者
- 需要快速制作高质感品牌落地页的独立开发者或工作室
- 负责营销页面、产品发布页、活动页的设计工程师
- 希望用 AI 生成但又不想页面同质化的设计师
- 创意技术开发者、互动叙事网页开发者
- 有品牌规范、照片或视频素材并希望转化成滚动叙事网页的团队
03
配置要求
- Node.js 18 或更高版本
- Claude Code 环境
- 完整 ffmpeg 构建，用于编码可按滚动 scrub 的视频片段；如自动查找失败，可设置 SCROLLCRAFT_FFMPEG
- playwright-core 与 Chrome，用于页面验证；README 建议在构建目录中执行 npm i playwright-core
- 如需 AI 生成资产，需要 KIE_AI_API_KEY；如果使用自有图片和视频素材，则不需要该 Key
- 可选设置 SCROLLCRAFT_HOME 指定工作区目录
- 也可通过最近的 .scrollcraft.json 配置工作区，例如 { "workspace": "path/to/builds" }
- 如 Chrome 自动发现失败，可设置 SCROLLCRAFT_CHROME
- 默认工作区为项目根目录下的 scrollcraft，构建输出位于 <workspace>/builds/<name>/，指纹注册表位于 <workspace>/FINGERPRINTS.md
04
适用场景
- 生成带有电影感滚动叙事的产品介绍页
- 制作品牌官网首页、发布页、营销活动页
- 构建基于滚动驱动的视频 scrub、固定舞台、横向轨道、分章节编辑式页面
- 根据品牌色、字体和素材生成符合品牌规范的互动页面
- 用 Playwright 和截图方式验证页面在不同滚动位置的视觉状态
- 检测死滚动、对比度不足、元素未完全显现、视频解码异常等体验问题
- 为设计团队建立一套避免重复页面结构的创意生成流程
05
部署与配置
- 在 Claude Code 中添加插件市场来源：/plugin marketplace add nateherkai/scroll-craft
- 安装插件：/plugin install nateherk-design
- 如果安装摘要提示需要激活，运行：/reload-plugins
- 通过自然语言描述需求使用，或直接调用：/nateherk-design:scrollcraft
- 首次运行前执行预检：node scripts/doctor.mjs
- 创建工作区和空指纹注册表：node scripts/workspace.mjs --ensure
- 如果本地开发或修改插件，可使用：claude --plugin-dir ./plugins/nateherk-design
06
风险与注意事项
- 该项目高度依赖 Claude Code 插件体系，不适合非 Claude Code 工作流直接使用
- README 明确说明作者只在 Windows 上运行过，macOS 和 Linux 虽有路径搜索逻辑但缺少实际构建验证，国内团队跨平台使用前需要测试
- 依赖完整 ffmpeg、Chrome、playwright-core，环境配置可能比普通前端模板复杂
- 如果需要 AI 生成视频或资产，可能产生明显 API 成本，尤其是连续世界类长视频页面
- 工具非常 opinionated，会拒绝常见布局和配色，对希望快速生成常规企业官网模板的用户可能不友好
- 生成结果质量仍取决于输入的品牌资料、素材质量、提示描述和人工审美判断
- 自动化验证可以发现技术性问题，但不能替代人工判断页面是否真正有品牌表达和商业说服力
- 作为 400 星级别的小众工具，生态、案例数量和长期维护稳定性仍需观察
2026-08-24
第22名
新收录 · github_search
