什么是 Scrollcraft？
Scrollcraft 是一项用于构建高品质滚动驱动网站的 Claude Code 技能，同时会强制执行一致的设计工艺标准。它将交互、视觉方向、排版、间距、色彩、层次和验证视为同一流程的组成部分。
Scrollcraft 不会反复生成由首屏、功能卡片、用户评价和行动号召区块组成的常见结构，而是先选择一种页面语法。该语法决定体验如何推进、用户如何导航，以及必须避开哪些常见模式。
这项技能可以让视频随着读者滚动逐帧擦动播放，在论述展开时固定场景，移动水平轨道，逐行拼合标题，切换页面底色，并响应指针移动。每次构建还必须引入一个专属于该网站的定制标志性交互。
Scrollcraft 如何让每次构建保持独特
Scrollcraft 提供八种互斥的页面语法：
- 电影式一镜到底：连续且富有电影感的呈现方式。
- 章节式编辑：由一系列结构清晰的编辑章节组成。
- 实时表面：由交互驱动的响应式界面。
- 连续世界：单一固定舞台，不显示区块接缝。
- 字体海报：主要由文字排版主导的构图。
- 画廊：围绕视觉作品组织的体验。
- 分屏舞台：由多个协调内容区域组成的分区式呈现。
- 节奏剪辑表：通过精心设计的视觉切换塑造的序列。
这些并不是可以互换的主题。每种语法都要求采用特定的结构选择，并禁止使用另一些结构，从而降低不同项目悄然趋同于同一套骨架的可能性。
PERKFORM 展示了电影化、以产品为核心的设计方向。它采用一镜到底的呈现方式，并硬切到全出血反色背景，而不是依赖传统的区块堆叠。
Fallowbank 展示了同一项技能如何实现克制的纪录片式处理：在摄影作品上叠加博物馆标签风格的文案，并以连续文本收尾，而不是使用标准按钮。
指纹门槛
完成第一个项目后，每次新构建都会与你之前的作品进行比较。它必须在六个维度中的至少四个维度上有所不同：语法、导航、首屏、段落形态、收尾方式和标志性动作。如果未能通过，就必须修改方案，而不是放宽或改写记录。
首次构建无须通过已有指纹检查，因为注册表最初为空。这是有意为之：该门槛旨在防止你重复自己的作品。
设计与交互标准
在定义各个段落之前，Scrollcraft 会先创建一条情绪曲线。每个段落都会获得一种目标情绪及其在屏幕上的触发因素。如果相邻两个段落产生相同的感受，其中一个可能并无必要。
随后，页面会围绕一个经过精心设计的高潮组织。这个时刻将获得最大的素材预算、足够的前置留白和充分的滚动距离。这种方式直接应用了峰终定律，而不是让每个区块都具有同等的戏剧张力。
设计工艺规则
- 排版：最多使用两种字体家族，控制字距，每行长度保持在 45 到 75 个字符之间，并根据行长调整行高。
- 间距：采用 4px 基础尺度，标题上方的空间多于下方，并使用可适应较小屏幕的流式区块内边距。
- 色彩：使用六种色彩角色和一种强调色，为次要文字添加色调，避免纯黑色，并支持在明暗背景之间进行有意的硬切。
- 层次：将偏移阴影、边缘光、缩放与模糊、重叠和颗粒感视为不同的设计工具。
- 品牌合规：所提供品牌套件中的规则优先于 Scrollcraft 默认设置，包括禁止使用该技能原本可能选择的技术。
这项技能还会拒绝常见的 AI 生成式设计捷径，包括完全相同的功能卡片网格、装饰性计数器、通用滚动提示、渐变文字、虚构统计数据、虚假仪表盘、典型的 AI 紫色渐变，以及默认的奶油色加黄铜色手工品牌配色。
安装 Claude Code 插件
添加插件市场，然后安装设计插件：
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design如果 Claude Code 提示 Run /reload-plugins to activate.，请先运行该命令再继续。
你可以使用以下命令直接调用 Scrollcraft：
/nateherk-design:scrollcraft你也可以在 Claude Code 中描述想要创建的滚动驱动网站，从而使用这项技能。当你希望明确启动其流程时，直接命令会很有用。
无需安装即可开发
如果要在本地检查或修改技能仓库，而不将其安装为插件，请通过插件目录启动 Claude Code：
claude --plugin-dir ./plugins/nateherk-design检查系统要求
Scrollcraft 依赖多个本地工具。开始构建前，请确认以下项目：
- Node.js 18 或更高版本：所有随附脚本都需要它。
- 完整版本的 ffmpeg：用于对视频片段进行编码，使其能够正确随滚动擦动，而不是正常播放。精简版本可能缺少
scale等关键滤镜。 - playwright-core 和 Chrome：用于基于浏览器的验证流程。
- KIE_AI_API_KEY：可选，仅在生成素材时需要。使用自有照片或视频素材的项目不需要该密钥。
请在构建文件夹中安装 playwright-core，以确保从正确位置解析模块：
npm i playwright-core如果 Scrollcraft 无法找到正确的可执行文件，可以使用 SCROLLCRAFT_FFMPEG 和 SCROLLCRAFT_CHROME 覆盖其搜索结果。
目前，Scrollcraft 仅在 Windows 上完成过完整构建。其脚本会搜索 Windows、macOS 和 Linux 上的常见位置，但 README 并未声称已在 macOS 上完成过构建。
运行预检并创建工作区
首先运行诊断脚本。它会报告缺失或不兼容的依赖项，避免这些问题在之后引发具有误导性的失败。
node scripts/doctor.mjs这项检查尤其重要，因为精简版 ffmpeg 可能会将缺少滤镜报告为语法错误，缺少 WebP muxer 可能看起来像文件名问题，而 playwright-core 也可能从错误的目录解析。
预检通过后，创建工作区及其空白指纹注册表：
node scripts/workspace.mjs --ensure如何选择工作区
Scrollcraft 按以下顺序解析工作区，并在首次匹配时停止：
SCROLLCRAFT_HOME中存储的路径。- 从当前目录向上查找时，距离最近的
.scrollcraft.json所指定的工作区。 - 项目根目录下的
scrollcraft目录。
工作区配置文件采用以下格式：
{ "workspace": "path/to/builds" }构建结果会写入 <workspace>/builds/<name>/，指纹注册表则存储在 <workspace>/FINGERPRINTS.md。
创建第一个项目
插件激活且工作区创建完成后，调用 Scrollcraft：
/nateherk-design:scrollcraft描述网站、网站主题、可用素材以及任何适用的品牌规则。配置 KIE_AI_API_KEY 后，你可以选择生成素材；也可以使用自己的照片和视频素材，从而避免生成费用。使用现有素材是一种受到完整支持的核心工作流，而非备用方案。
这项技能会执行一套涵盖需求访谈、语法选择、概念评分、页面构建和结果验证的流程。其参考资料还定义了情绪曲线、滚动装置、连续世界构建、艺术指导、素材准备和设计标准。
遵循所选语法
不要把所选语法视为视觉预设。例如，连续世界项目应当像一个没有区块接缝的固定舞台一样运作。章节式编辑项目则采用不同的结构和导航模型。混合这些语法各自要求的模式，会破坏用于确保项目差异化的机制。
规划一个标志性动作
每个网站都必须包含一个仅存在于该项目中的定制交互。仅仅为聚光效果换一种颜色并不符合要求。这个动作应当源自网站主题和整体体验，而不是作为通用装饰额外添加。
正确使用引擎
最重要的实现规则是：绝不能针对单个项目修改引擎。它提供的是所有构建共享的机制，而不是一个可配置的页面生成器。
对于每个项目：
- 使用六个颜色 token 和最多两种字体为引擎设定主题。
- 专门为该网站编写语义化 HTML。
- 使用引擎公开的
--sc-p自定义属性驱动定制行为。 - 将项目专属的布局和交互保留在共享引擎之外。
不要在运行时通过配置对象构建整个页面。根据 Scrollcraft 的设计理念，这种抽象方式正是同一系统制作的网站趋于相似的根本原因。
了解验证流程
Scrollcraft 使用无头浏览器检查完成后的页面，并覆盖每一个滚动位置。对于视频驱动的体验，它会等待播放头稳定后再评估画面帧。
验证流程会报告：
- 无效滚动：屏幕上没有任何可见变化的滚动距离。
- 未完成的提示：始终未达到完全不透明状态的文字或其他提示。
- 合成对比度故障：系统会逐行检查对比度，以经过文字下方的最亮画面帧为参照，并根据浅色文字配深色背景或深色文字配浅色背景选择检测方向。
- 未解码的视频片段：视频一直停留在海报帧上，否则可能会被误认为是有意暂停的影片。
该流程还会创建一张接触表供人工审查。自动化检查可以确认页面功能是否正常，但无法判断体验是否有意义，或能否产生情感效果。
高级工作流技巧
如实维护指纹注册表
不要使用随附示例预填充注册表。仓库中的 EXAMPLES.md 展示了填充后的注册表是什么样子，以及哪些结构容易发生冲突，但它并不是一组约束条件。请记录你自己的项目，并重新设计任何未通过六项中四项唯一性要求的新概念。
将资源集中在一个高潮
不要试图让每个场景都同样强烈。将最出色的素材、最长的滚动区间和最清晰的铺垫留给一个高潮。多个相互竞争的高潮会削弱整体曲线。
有意识地设计响应式节奏
使用 4px 间距基础，但不要把桌面尺寸的间隙原样搬到手机上。保持清晰的标题层级关系和易读的行长，并通过不止一种颜色调整来改善深色背景上的浅色文字。
优先使用诊断覆盖，而不是猜测
如果检测到了错误的 ffmpeg 或 Chrome 安装，请明确设置 SCROLLCRAFT_FFMPEG 或 SCROLLCRAFT_CHROME。然后重新运行 doctor.mjs，不要等到之后再孤立地调试编码或浏览器错误。
阅读项目历史
仓库中的 CHANGELOG.md 记录了构建期间出现的问题，以及针对这些问题制定的设计或工程规则。它不仅是功能历史，也可以作为实际操作经验的来源。
需要考虑的限制
- 尽管脚本会搜索其他平台上的常见位置，但完整构建目前仅在 Windows 上运行过。
- 生成视频可能产生可观的费用，尤其是包含许多航段的连续世界飞行体验。
- 这项技能有意采用明确而强势的设计主张，因此可能拒绝常见布局、配色方案或定义不充分的高潮。
- 自动化验证无法判断完成后的页面是否具有意义，因此接触表仍需人工审查。
总结
Scrollcraft 将滚动交互引擎与严格的设计流程结合在一起。首先安装 Claude Code 插件、运行预检并创建工作区。然后选择一种语法，定义情绪曲线和单一高潮，创建独特的标志性动作，并通过验证流程发现机制层面的问题。不要修改共享引擎，这样每个项目的语义结构和艺术方向才能真正保持独特。