绝大多数 Skill 的 SKILL.md 在回答“怎么做成事”，scroll-craft 的 SKILL.md 花了一半篇幅回答“不许做成什么样”。作者在 README 里给的理由很直接：AI 生成的页面失败在两个方向——要么乖巧但过目即忘，要么 flashy 但 2.1:1 的正文行宽、手机上换行六行的大标题。这个 Skill 把“互动”和“工艺”当成同一件事来管。
最有说服力的证据是作者自己放出的三个样例构建：Orrery（旅行社，整页是一个不切断的连续世界）、PERKFORM（蛋白咖啡，电影式一镜到底+两次硬切反转底色）、Fallowbank（景观设计工作室，纪录片式克制排版）。同一个 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/，用相对链接按需加载——这是官方推荐的渐进式披露写法，这个仓库执行得很标准。
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 不是什么”开场。负面空间比正面描述更能校准模型行为，成本只有三行字。
"Always interview the human before generating anything." 加粗、独立成段。八个问题每个都有防御性设计：
还有一个罕见的诚实条款：全自动跑、人联系不上时，允许模型自答八问写 BRIEF.md，但必须在文件头标注 Self-authored, not interviewed 并在最终报告里说明——“自撰简报是兜底，永不是计划”。
面试答案逐字写入 builds/<name>/BRIEF.md，最少包含：八答原文、情绪曲线（幕存在之前就写）、peak（写成“访客会跟朋友说的那句话”）、完形句 "It's the site where ___"、以及“刻意留白”清单（供验证阶段区分留白与死滚动）。
这是 Skill 设计里的状态外置模式：跨步骤的约定不留在对话记忆里，落成文件，下游所有步骤从文件读。会话被压缩、上下文被截断，契约还在盘上。
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 只补五个问题（这是什么/访客必须相信什么/下一步动作/已有什么/美术方向），然后先写旅程：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”区间——连自己的历史区间都被做成了指纹维度。
构建完成后，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 自定义属性——“用配置对象生成页面的运行时，正是所有基于它的网站长得一样的原因”。
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 + 登记指纹注册表]
| # | 模式 | 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 都该留一张累积表 |
推荐排行榜（六个模式的抄走优先级）
# 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 等场景全覆盖。