scroll-craft Skill：让 Claude Code 做出真正不撞车的顶级滚动网站

Claude Code 做顶级滚动网站？这款 Skill 把”交互”和”工艺”当成同一件事来做——而不是两个独立环节。大多数 AI 生成的网站要么无聊到让人遗忘，要么花哨但充满设计缺陷：2.1:1 正文字重、标题在手机上折成六行、六段式布局跟其他 AI 页面完全撞车。scroll-craft 从根本上重构了 Claude Code 生成网页的方式：滚动即时间轴，八种互斥页面语法强制差异化，screenshot 自验确保输出真的能看。8 月 22 日才创建，两天破 794 star，不是运气——是方法论。

功能与设计原则

scroll-craft 是专为 Claude Code 打造的顶级滚动驱动网站构建 Skill。它的核心逻辑是：交互（interaction）和工艺（craft）是同一件事，而不是两件可以分开外包的事。

核心能力：
– 滚动即时间轴——视频随滚轮逐帧播放，标题逐行组装，页面基色随浏览深度渐变，指针可以移动非滚动元素
– 八种互斥页面语法——每种语法明令禁止其他语法所要求的东西，从结构上保证两个页面不可能悄悄趋同
– 每个页面必须有一个独有签名动作——重新着色的聚光灯不算
– 指纹门禁（fingerprint gate）——新页面必须在 6 个维度的至少 4 个上与历史页面不同（语法、导航、英雄区、幕形、收尾、签名动作）

设计工艺底线：
– 情感曲线先于任何内容存在——每幕一行情绪 + 对应屏幕元素，相邻两幕情绪相同则其中一幕是填充物
– 一个工程化峰值——应用峰终定律，峰值获得资源预算、前方留白、最多滚动空间，三峰值等于无峰值
– 排版地板——最多两种字体族，跟踪随字号增大而收紧，45–75ch 测量值，行高与测量值成反比
– 六角色配色 + 一个强调色，二级文字调色而非纯灰，无纯黑
– 深度五种工具：偏移阴影、边缘光、规模模糊作距离、叠加、纹理

认可度

• GitHub Star：794（截至 2026-08-25，两天内从 0 涨至近 800）
• Forks：133
• 创建时间：2026-08-22（极新，仍处于高速增长期）
• 许可证：MIT
• 8 月 GitHub Trending + trending-claude-skills 实时追踪榜双线上榜

链接

GitHub：https://github.com/nateherkai/scroll-craft

原作者

nateherkai（GitHub 独立开发者）——专注 AI 前端工作流与设计系统，已知作品包括 Orrery 连续世界滚动体验等高端 demo。

介绍

scroll-craft 的出发点很直接：大多数 AI 网站在两个方向上失败——要么中规中矩毫无记忆点，要么是花哨的滚动动画加上 2.1:1 正文字重和六行标题。传统 AI 辅助设计工具把”交互”和”工艺”分开处理——交给你一个拖拽式页面构建器，再配一个文字输入框。scroll-craft 认为这两者必须同时在场，互相约束。

它的解法是把页面语法变成硬约束。filmic one-shot（电影级单镜）、chaptered editorial（章节编辑）、live surface（活表面）、continuous world（连续世界）、typographic poster（字体海报）、gallery（画廊）、split stage（分割舞台）、rhythmic cutlist（节奏切割清单）——八种语法，每种明确禁止其他语法所要求的设计手法。这种互斥强制差异化，确保 AI 不会在每次生成时都默认回到同一套六段式布局。

更关键的是自验证机制。skill 驱动一个无头浏览器，对自己的输出截图验证——不是靠人工检查截图，而是把截图结果重新喂给生成流程，让 AI 根据视觉反馈修正。这个闭环把”看起来对”变成了可工程化的步骤。

特点

• 八种互斥页面语法：从结构层强制差异化，AI 无法默认滑回通用模板
• 滚动即时间轴：视频帧级控制、标题逐行动画、页面基色随浏览深度渐变
• 指纹门禁（fingerprint gate）：6 维度检查表，新页面必须在 4 个维度上与历史作品不同
• screenshot 自验证：无头浏览器截图 → 结果反馈 → 自动修正，无需人工介入
• 峰值工程化：峰终定律 literal 落地，峰值获得最多视觉资源和滚动空间
• 拒绝清单：identical feature-card grids、01 / 06 计数器、渐变文字、AI 紫调、品牌通用奶油黄铜色板等——明确告诉 AI 什么不要做
• 品牌工具包作为硬输入：传入品牌规范后，Skill 的硬规则优先于默认设计偏好

使用方法

安装：

# 通过 Claude Code marketplace 安装
/plugin marketplace add nateherkai/scroll-craft

# 或手动克隆到 skills 目录
git clone https://github.com/nateherkai/scroll-craft ~/.claude/skills/scroll-craft

基本调用：

在 Claude Code 中触发时，直接描述想要的网站类型和核心内容：

Build me a premium scroll-driven site for a landscape architecture studio in Tokyo.
The tone is quiet and documentary. No feature cards.

Skill 会自动选择匹配的页面语法（gallery 或 continuous world），按feeling curve 生成内容，植入签名动作，并通过 screenshot 验证输出。

支持的页面语法（8 种）：

使用场景与人群

适用场景：
– 需要高质量品牌展示页面的设计师/独立开发者
– 希望 Claude Code 输出超越”六段式模板”的前端工程师
– 追求独特视觉语言而非通用 AI 布局的作品集网站
– 数字产品发布页、活动页、募资页

目标用户：
– 有一定审美要求、愿意精细调整 AI 输出的前端开发者
– 品牌设计师想把设计系统”教给”AI 的人
– 对 AI 生成网站”总是看起来一样”感到沮丧的用户

输入与输出案例

案例 1：东京景观建筑工作室

输入：Build me a premium scroll-driven site for a landscape architecture studio in Tokyo.
      The tone is quiet and documentary. No feature cards.

输出（页面结构）：
- 语法：gallery 或 continuous world（按指纹门禁检查后选定）
- 情感曲线：好奇（现场摄影）→ 沉静（项目描述）→ 期待（联系区）
- 签名动作：每张项目照片 hover 时有土壤纹理渐变叠加
- 拒绝：feature card grids、`01 / 06` 计数器、渐变文字
- 自验证：screenshot 对比，修正了首屏标题字号在 1440p 下超出视口的问题

案例 2：蛋白咖啡品牌

输入：PERKFORM product page — filmic, loud, product-forward, one-shot.

输出（页面结构）：
- 语法：filmic one-shot
- 情感曲线：冲击（全出血产品图）→ 展开（双列说明）→ 行动（CTA）
- 签名动作：页面中部有且仅有一次基色从暗到亮的反向过渡
- 峰值位于第二幕末尾（产品核心利益点展示），获得最大滚动空间
- 自验证：screenshot 检测到移动端字体族叠加问题，触发重排版

scroll-craft 解决的不是”能不能生成网页”的问题，而是”生成的网页凭什么不无聊”的问题。MIT 许可证，GitHub 直接 clone 使用。如果你对 AI 生成网站”总是六段式”深恶痛绝，这款 Skill 值得装上跑一次。

GitHub: https://github.com/nateherkai/scroll-craft