<!-- title: 防AI撞衫：scroll-craft逐段拆解 -->

# 防AI撞衫：scroll-craft逐段拆解

## 概述

## 为什么拆它：一个把“约束”当产品的样本

绝大多数 Skill 的 SKILL.md 在回答“怎么做成事”，scroll-craft 的 SKILL.md 花了一半篇幅回答“**不许做成什么样**”。作者在 README 里给的理由很直接：AI 生成的页面失败在两个方向——要么乖巧但过目即忘，要么 flashy 但 2.1:1 的正文行宽、手机上换行六行的大标题。这个 Skill 把“互动”和“工艺”当成同一件事来管。

最有说服力的证据是作者自己放出的三个样例构建：Orrery（旅行社，整页是一个不切断的连续世界）、PERKFORM（蛋白咖啡，电影式一镜到底+两次硬切反转底色）、Fallowbank（景观设计工作室，纪录片式克制排版）。同一个 Skill、同一个引擎、零共享骨架——这正是它想卖的东西。（以上为作者自述与展示，未经第三方实测。）

## 先看骨架：plugin 型 Skill 的标准布局

scroll-craft 不是裸 Skill，而是以 Claude Code plugin（marketplace 名 `nateherk-design`）分发，目录结构本身就是一份“复杂 Skill 该怎么组织文件”的参考：

```
plugins/nateherk-design/
└── skills/scrollcraft/
    ├── SKILL.md            流程：面试→文法→打分→构建→验证
    ├── references/
    │   ├── uniqueness.md   八种文法、招牌动作、指纹门
    │   ├── feel.md         情绪曲线、工程化高潮点
    │   ├── devices.md      九种滚动装置与 cue 契约
    │   ├── worldflight.md  连续世界模式
    │   ├── worlds.md       美术方向
    │   ├── taste.md        设计底线：间距/字体/颜色/景深/动效
    │   ├── assets.md       资产生成与编码
    │   └── verify.md       验证装置及其边界
    ├── engine/             scrollcraft.js + .css（机制，永不逐项目修改）
    ├── templates/          空白指纹注册表
    └── scripts/            doctor · workspace · kie · encode · serve · shoot
```

注意分层：SKILL.md 只放**流程主干**，重参考资料全部外置到 `references/`，用相对链接按需加载——这是官方推荐的渐进式披露写法，这个仓库执行得很标准。

## frontmatter 逐行：description 里埋的是用户的抱怨

```yaml
name: scrollcraft
description: >
  Build a premium, scroll-driven interactive landing page ... Use for
  "scrollytelling", "scroll animation site", "a site where scrolling plays a
  video", "Apple-style landing page", "3D scroll world", ...
  "this looks like a template", "make it feel different", ...
allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion
```

三个值得逐行看的设计决策：

**1. 触发词一半是技术词，一半是用户的原话。**"scrollytelling""Apple-style landing page"是需求描述；而 `"this looks like a template"`（这看起来像个模板）、`"make it feel different"`（让它感觉不一样点）是**用户的不满**。用户不会说“我要一个 scroll-driven interactive landing page”，他们只会抱怨现在的版本像模板。把抱怨原话写进 description，是这个 Skill 触发率设计上最聪明的一手。

**2. `AskUserQuestion` 出现在 allowed-tools 里。**这不是随手列的：整个 Skill 的第一步是强制面试人类，没有这个工具授权，Step 0 就跑不起来。工具白名单和流程是咬合的。

**3. description 用 YAML 的 `>` 折叠语法写了整整一大段。**功能概述、面试行为、资产策略、验证方式全部压进触发匹配区。对这种重流程 Skill，description 不是摘要，是“什么时候该叫我”的完整判据。

## 正文五段拆解

### 开场三件事：先给交付物，再划负面空间

正文第一段是意识形态宣言：“滚动是每个访客已经会用的唯一输入”。紧跟着一个 **"What you produce"** 清单：面试纪要、页面文法、旅程图、带一个工程化高潮的情绪曲线、滚动分谱、招牌动作、资产、一页真 HTML、一串证明各滚动位不塌的截图——**先立输出契约**，让模型知道终点长什么样。

然后立刻是 **"What this is not"**：不是“生成一段 flythrough 再把字扔上去”。由这个反面定义推出四条脊柱规则：多样性即产品（至少四种装置族，相邻不重样）；世界默认摄影感（软哑光黏土微缩景观被列为禁用默认）；不许连续长镜头链（最贵最脆，且只为藏切换）；不同的世界不等于不同的页面（结构是独立轴）。

**抄作业点：用“本 Skill 不是什么”开场。**负面空间比正面描述更能校准模型行为，成本只有三行字。

### Step 0 面试：八个问题，各怀鬼胎

**"Always interview the human before generating anything."** 加粗、独立成段。八个问题每个都有防御性设计：

1. 氛围 3-5 个词 + 至多 3 个**非网站**参考（电影、专辑封面、店）——明确禁止“说你喜欢的网站”，因为“naming sites is how a page ends up looking like an existing site”，报网站名就是抄网站的起点；
2. 用用户自己的话写滚动旅程——不许给菜单让他们选，“fabricated multiple-choice list”会把偏置塞给用户；
3. 能量曲线（哪里吵哪里静）；
4. 情绪曲线 + 唯一该被记住的一刻——文档特意区分“能量是大声，情绪是另一回事：吵闹页面上最安静的幕可能最强烈”，这题的答案直接变成后面的 feeling curve 和 peak；
5. 这个网站该做一件见过的网站都没做过的事——招牌动作的种子，且明确“be memorable 不算答案”；
6. 离 premium-minimal 多远（brutalist 到 editorial 一整档）——“他们的答案管美学家族，不是你的品味”；
7. 连续世界还是分幕——最大的结构分叉，交给用户而不是模型默认；
8. 手上已有什么资产——“Nothing 也是合格答案”，决定哪些要生成（花钱）哪些只要编码（免费）。

还有一个罕见的诚实条款：全自动跑、人联系不上时，允许模型自答八问写 BRIEF.md，但**必须在文件头标注 `Self-authored, not interviewed` 并在最终报告里说明**——“自撰简报是兜底，永不是计划”。

### BRIEF.md：把记忆写进文件

面试答案逐字写入 `builds/<name>/BRIEF.md`，最少包含：八答原文、情绪曲线（幕存在之前就写）、peak（写成“访客会跟朋友说的那句话”）、完形句 "It's the site where ___"、以及“刻意留白”清单（供验证阶段区分留白与死滚动）。

这是 Skill 设计里的**状态外置**模式：跨步骤的约定不留在对话记忆里，落成文件，下游所有步骤从文件读。会话被压缩、上下文被截断，契约还在盘上。

### Bootstrap：doctor.mjs 在翻译什么

```bash
node scripts/doctor.mjs              # 预检
node scripts/workspace.mjs --ensure  # 建工作区
```

README 里这段值得全行业抄：三个最常见的环境故障都会在后期表现为**误导性错误**——被裁剪的 ffmpeg 把缺滤镜报成“你命令里的语法错误”、缺 WebP muxer 报成“文件名不对”、playwright-core 从错误目录解析。所以预检不是可选的礼貌，是防模型的错误归因跑偏。工作区解析顺序写死：`SCROLLCRAFT_HOME` → 向上找 `.scrollcraft.json` → `<项目根>/scrollcraft`——**resolved, never assumed**。

### Step 1-2：beats 先于资产，文法互斥，指纹门

Step 1 只补五个问题（这是什么/访客必须相信什么/下一步动作/已有什么/美术方向），然后先写**旅程**：4-7 拍，每拍是访客认知或情绪的一次转变。顺序即经济学：“assets are the expensive part and the journey determines every one of them”——先定分镜再烧钱生成。

Step 2 是全文档的心脏，三件事按序做：

**选文法。**八种互斥页面文法：filmic one-shot、chaptered editorial、live surface、continuous world、typographic poster、gallery、split stage、rhythmic cutlist。互斥的实现方式很硬：**每种文法禁止其他文法的必需品**，所以两个构建不可能悄悄收敛。

**发明招牌动作。**一个只存在于这个网站的定制交互，写进页面代码，而不是给套件装置改参数；引擎一行不动。

**过指纹门。**读 `FINGERPRINTS.md` 注册表，新构建必须对**每一行**已有记录在 6 个维度（文法、导航处理、主角装置、幕序列形状、收尾模式、招牌动作）中至少 4 个不同。过不了，“改计划，不是改记录”。注册表起始为空，README 特意解释：“门是防你重复**你自己**的，所以第一次构建无事可清”，作者自己的十二行表格放进 EXAMPLES.md 仅为示意。

然后 feeling curve 先于分镜表（“装置先于情绪选出来，就是一个在找借口的装置”），再过一串**可判定的硬检查**：≥4 个装置族、相邻不重族、scrub 幕 ≤2（“第三个就不惊喜了”）、相邻幕不同情绪、唯一 peak 占最大滚动跨度、总长 8-14 个视口高、且**不得落进前四个构建都命中的“6-7 幕 @ 13.6-13.8vh”区间**——连自己的历史区间都被做成了指纹维度。

### 自验证：机器证明能用，contact sheet 承认不懂意义

构建完成后，headless browser 逐滚动位走完整页、等视频播放头稳定，报告四类问题：dead scroll（滚了但屏幕没变）、永远到不了全不透明度的 cue、**合成页面上逐行实测的对比度**（按每行最亮帧、逐行选方向）、“腿卡在海报上”（某段视频其实从没解码，看起来却像暂停的电影）。最后产出 contact sheet——README 那句话是全文最好的自我定位："a machine can prove a page works and cannot tell you it means anything."

配套的还有拒用清单：一模一样的功能卡片网格、`01 / 06` 计数器、scroll cue、渐变文字、em dash、编造的统计数字、假仪表盘、AI 紫渐变、以及手工品牌最爱的奶油+黄铜配色。以及最重要的那条规则：**引擎永不逐项目修改**，主题化只用六个颜色 token 和两套字体，定制交互挂引擎发布的 `--sc-p` 自定义属性——“用配置对象生成页面的运行时，正是所有基于它的网站长得一样的原因”。

## 工作流全景

```mermaid
flowchart TD
    A[Step 0 强制面试 8问] -->|逐字写入 BRIEF.md| B[Bootstrap<br/>doctor.mjs 预检 + workspace 解析]
    B --> C[Step 1 旅程 beats 4-7拍<br/>先定分镜再花钱]
    C --> D[Step 2 八种文法选一]
    D --> E[发明招牌动作]
    E --> F{指纹门<br/>对每行记录 6维中≥4 不同}
    F -->|不过 改计划| D
    F -->|通过| G[feeling curve 先行<br/>再过分镜表 8项硬检查]
    G --> H[Step 3 资产<br/>自有素材免费 kie.ai 生成花钱]
    H --> I[写语义 HTML<br/>引擎永不改 只动 token]
    I --> J[自验证 headless browser<br/>逐滚动位截图查死滚动与对比度]
    J --> K{发现问题}
    K -->|是| I
    K -->|否| L[contact sheet + 登记指纹注册表]
```

## 六个可以直接抄走的 SKILL.md 写法模式

| # | 模式 | scroll-craft 里的实现 | 怎么抄到你的 Skill |
|---|------|----------------------|-------------------|
| 1 | 触发词埋用户抱怨 | description 里放 "this looks like a template" | 列 3-5 句用户真实会说的话，混进技术触发词 |
| 2 | 负面空间开场 | "What this is not" + 四条脊柱规则 | 用三行写清本 Skill 拒绝的三个常见误解 |
| 3 | 面试先行 + 工具咬合 | Step 0 八问；AskUserQuestion 进 allowed-tools | 流程依赖交互就把交互工具显式授权 |
| 4 | 状态外置成文件契约 | BRIEF.md / FINGERPRINTS.md | 跨步骤约定落盘，写明文件最少字段 |
| 5 | 品味翻译成可判定数字 | 4/6 维门、scrub≤2、8-14vh | 把“要好看”改写成能跑 yes/no 的检查清单 |
| 6 | 防自己重复的注册表 | 空注册表起步，历史区间也计入指纹 | 输出需要多样性的 Skill 都该留一张累积表 |

## 评测评分

**推荐排行榜（六个模式的抄走优先级）**

1. **模式5（数字门槛）**——所有写 Skill 的人都该先抄，成本最低收益最大；
2. **模式4（文件契约）**——多步骤 Skill 必抄，专治长会话失忆；
3. **模式1（抱怨触发词）**——做面向终端用户 Skill 的必抄；
4. **模式2（负面开场）**——容易被模仿领域的 Skill 必抄；
5. **模式6（注册表）**——只有输出需要多样性的 Skill 才需要；
6. **模式3（面试咬合）**——交互型 Skill 专属。

## 安装与使用

```bash
# Claude Code 内安装（plugin 形式）
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design
# 若提示需激活
/reload-plugins

# 直接调用
/nateherk-design:scrollcraft

# 本地调试不改安装
claude --plugin-dir ./plugins/nateherk-design

# 首跑预检（官方强烈建议先跑）
node scripts/doctor.mjs
node scripts/workspace.mjs --ensure
```

环境要求：Node 18+；完整版 ffmpeg（被裁剪的构建会报假语法错误，`SCROLLCRAFT_FFMPEG` 可指定路径）；构建目录内 `npm i playwright-core` + Chrome；`KIE_AI_API_KEY` 仅生成资产时需要。适合：要交付“不像模板”的品牌站/产品页、且愿意被 Skill 反驳高潮点选择的人。不适合：想要快速套模板出页、用 Mac（官方自述从未在 Mac 上跑过构建）、或预算严格为零又要全 AI 生成视频的人——十段连续世界飞行是真实开销。

## 参考来源

> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)