scrollcraft

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

scrollcraft

Scroll is the only input every visitor already knows how to use. This skill treats it as a timeline: the wheel is a scrubber, the page is a film with real text on top, and each section behaves differently enough that the visitor keeps going to find out what the next one does.

What you produce: an interview brief, a page grammar, a customer-journey map, a feeling curve with one engineered peak, a scroll score, one signature move, generated assets, one real HTML page on a token-driven design floor, and a strip of screenshots proving it holds up at every scroll position.

滚动是每位访客都已掌握的唯一交互方式。本技能将其视为时间轴：滚轮是scrub控制器，页面是叠加真实文本的影片，每个章节的表现都足够独特，能吸引访客继续探索下一个章节的效果。

**交付成果：**一份访谈简报、一套页面语法、一张用户旅程图、一条带有设计峰值的情绪曲线、一份滚动分镜表、一个标志性交互、生成的素材、基于令牌驱动设计系统的真实HTML页面，以及一组验证页面在每个滚动位置效果的截图。

What this is not

本技能不包含的内容

It is not "generate a flythrough and drop text on it." That approach produces one device applied to a whole page, and every site built that way is recognisable at a glance: same claymation diorama, same centred copy, same

01 / 06

counter, same "scroll to explore" nudge. Five sections that behave identically are one section shown five times.

Four rules follow from that, and they are the spine of this skill:

Variety is the product. A page uses at least four device families and never the same device twice in a row. Read references/devices.md.
The world is photographic unless the brand is genuinely illustrated. Soft matte low-poly clay diorama is banned as a default. Read references/worlds.md.
No continuous chain. A single unbroken camera flight is the most expensive and most fragile thing you can build, and it exists only to hide cuts between scenes. Vary the device instead and the cut disappears for free, because the visitor is not watching one film. Chain only when the brief is literally "one continuous journey."
A different world is not a different page. The device kit varies how a page looks. Structure is a separate axis, and it has to be decided deliberately or every build inherits the same skeleton. The first four builds did exactly that. Read references/uniqueness.md.

它不是「生成飞行浏览动画并叠加文本」。这种方式会将单一效果应用于整个页面，用该方式构建的网站一眼就能识别：相同的黏土动画场景、相同的居中文案、相同的

01 / 06

章节计数器、相同的「滚动探索」提示。五个表现完全一致的章节，本质上是同一个章节重复五次。

基于此衍生出四条核心规则，构成本技能的基础：

多样性是核心产出。页面至少使用四种不同的交互组件，且不会连续使用同一种组件。详见references/devices.md。
场景风格默认采用写实摄影风，除非品牌明确使用插画风格。默认禁止使用柔和哑光低多边形黏土场景。详见references/worlds.md。
避免连续镜头。单一不间断的镜头飞行是最昂贵且最脆弱的构建方式，其存在仅为隐藏场景间的切换。改用不同的交互组件即可免费消除切换痕迹，因为访客观看的并非单一影片。仅当简报明确要求「单一连续旅程」时才使用连续镜头。
不同场景不等于不同页面。交互组件库会改变页面外观，但结构是独立维度，需刻意决定，否则所有构建都会沿用相同框架。前四次构建就犯了这个错误。详见references/uniqueness.md。

Step 0: The interview

步骤0：用户访谈

Always interview the human before generating anything. Not a brief you inferred from the brand name, not a plan you present for approval. Actual questions, asked, answered, written down. A page built from assumptions comes back looking like the last page built from assumptions.

The skill is a range instrument, not a house style. The human brings intent and whatever assets they own; the interview is where that turns into the right kind of page: one unbroken world, distinct scenes, printed chapters, a live surface. The skill can do any of them. The interview decides which.

Keep it short. Eight questions, asked in one pass:

Vibe in three to five words, plus up to three references from any medium. A film, an album cover, a shop, a magazine, a game. Not "sites you like": naming sites is how a page ends up looking like an existing site.
The scroll journey, section by section, in their words. What the visitor should hit first, what comes next, what the last thing is. Their sequence, not a menu you offered.
The energy curve. Where it should feel calm, where it should feel intense. A page that is loud the whole way is as flat as one that is quiet the whole way.
How should someone feel while scrolling, stage by stage, and what is the ONE moment they should remember? Energy is loudness. This is emotion, and the two do not line up: on a loud page the quiet act can be the most intense. The stage-by-stage answer becomes the feeling curve, the one moment becomes the peak. Both are required in BRIEF.md. See references/feel.md.
One thing this site should do that no site they have seen does. This is the seed of the signature move. Push for a real answer; "be memorable" is not one.
How far from premium-minimal they want to go. Offer the range in uniqueness.md §5: brutalist, maximalist, playful, retro, dense, editorial, premium-minimal. Their answer governs the aesthetic family, not your taste.
One unbroken world, or distinct scenes? Should the whole page feel like one continuous place the scroll flies through (worldflight, see references/worldflight.md), or like separate scenes, chapters, or cuts? This is the single biggest structural fork, and it is their call, not a device you pick later. Offer both plainly; neither is the default.
What assets do they already have? Footage, photos, product shots, a brand kit, clips of themselves. Real assets anchor the world and cut generation cost; the answer decides what gets graded and encoded versus generated. "Nothing" is a fine answer and means a fully generated world.

Write the answers into

<workspace>/builds/<name>/BRIEF.md

before any act planning, in their words, not paraphrased into marketing prose. Everything downstream reads from that file.

BRIEF.md must contain, at minimum:

The eight interview answers, verbatim.
The feeling curve. One line per act: the emotion, then what on screen causes it. Written before the acts exist, added to as the score fills in.
The peak. The one moment, written as the sentence a visitor would say to a friend, plus which act it lives in.
The completed tell-someone sentence. "It's the site where ___", filled with an experience, not a device name.
Any authored silence, so the verification pass can tell it from dead scroll.

references/feel.md is the spec for all four.

If the human is genuinely unreachable and the run is fully autonomous, write BRIEF.md yourself: answer all eight questions in the brand's voice, mark the file

Self-authored, not interviewed

at the top, and say so in the final report. A self-authored brief is a fallback, never the plan.

在生成任何内容前，务必先与用户进行访谈。不是从品牌名推断的简报，也不是供审批的预设方案，而是提出实际问题、获取回答并记录下来。基于假设构建的页面，最终会和上一个基于假设的页面雷同。

本技能是灵活工具，而非固定风格。用户提供目标和已有素材，访谈是将这些转化为合适页面类型的环节：连贯场景、独立场景、印刷章节式、动态表层式。本技能支持所有类型，访谈将决定最终采用哪一种。

访谈要简洁，一次性提出8个问题：

用3-5个词描述风格调性，并提供最多3个跨媒介参考案例（电影、专辑封面、店铺、杂志、游戏均可）。不要提供「喜欢的网站」：指定网站会导致最终页面与现有网站雷同。
用用户自己的话，逐章节描述滚动旅程。访客首先看到什么、接下来是什么、最后看到什么。遵循用户的顺序，而非你提供的选项。
能量曲线。哪些部分要营造平静感，哪些部分要营造紧张感全程高调的页面和全程低调的页面一样平淡。
访客滚动时的逐阶段情绪感受，以及他们必须记住的唯一时刻。能量指的是视觉冲击力，情绪则不同：在高调页面中，安静的动作可能最具张力。逐阶段回答将转化为情绪曲线，唯一时刻则成为情绪峰值。两者都需写入BRIEF.md。详见references/feel.md。
该网站应具备的、从未在其他网站见过的功能。这是标志性交互的灵感来源。要引导用户给出具体答案，「令人难忘」不算有效答案。
偏离高端极简风格的程度。提供uniqueness.md §5中的选项：野兽派、极繁派、趣味风、复古风、密集风、编辑风、高端极简。用户的回答将主导美学风格，而非你的个人品味。
**采用连贯场景还是独立场景？**整个页面应像一个可滚动穿梭的连续空间（worldflight，详见references/worldflight.md），还是像独立的场景、章节或镜头切换？这是最大的结构分支，由用户决定，而非后续选择的交互组件。需明确提供两种选项，无默认值。
**已拥有哪些素材？**视频、照片、产品图、品牌套件、个人剪辑等。真实素材能锚定场景并降低生成成本，回答将决定哪些素材需要调色编码、哪些需要生成。「无素材」是有效答案，意味着将完全生成场景。

在开始任何规划前，将用户的原话写入

<workspace>/builds/<name>/BRIEF.md

，不要改写为营销话术。所有后续环节都将读取该文件。

BRIEF.md至少需包含：

8个访谈问题的原话回答。
情绪曲线：每个章节一行，先写情绪，再写触发该情绪的屏幕内容。在章节规划前撰写，并随分镜表完善补充。
情绪峰值：访客会向朋友描述的那个时刻，以及该时刻所在的章节。
完整的推广话术：「这是一个___的网站」，空白处填写体验描述，而非组件名称。
所有预设的静默环节，以便验证阶段区分无交互滚动和故障滚动。

references/feel.md是上述四项内容的规范。

若确实无法联系到用户且需完全自主运行，自行撰写BRIEF.md：以品牌视角回答所有8个问题，在文件顶部标记

Self-authored, not interviewed

，并在最终报告中说明。自主撰写简报是 fallback 方案，绝非首选。

Bootstrap

环境准备

Environment, not a stage of the work. Do it once the interview is answered and before Step 1.

Run the preflight rather than checking by hand. It knows the failure modes that otherwise surface later as misleading errors, chiefly a stripped ffmpeg that reports a missing filter as a syntax error in your command:

bash

node <skill>/scripts/doctor.mjs

It reports node, a full ffmpeg build, playwright and Chrome, the API key, and the resolved workspace. Required failures exit non-zero. Say plainly which items are missing rather than working around them silently.

这是环境配置环节，而非工作阶段。在访谈完成后、步骤1前执行。

运行预检脚本而非手动检查。它能识别后续可能导致误导性错误的故障模式，主要是精简版ffmpeg会将缺失滤镜报错为命令语法错误：

bash

node <skill>/scripts/doctor.mjs

该脚本会检查node、完整ffmpeg构建包、playwright和Chrome、API密钥，以及解析后的工作区路径。必要项缺失时会返回非零退出码，并明确说明缺失项，而非静默处理。

The workspace

工作区

Builds and the fingerprint registry live in one directory, and it is resolved, never assumed:

bash

node <skill>/scripts/workspace.mjs --ensure     # prints it, creates it, seeds the registry

Resolution order, first hit wins:

```
SCROLLCRAFT_HOME
```
the nearest
```
.scrollcraft.json
```
walking up from the cwd,
```
{ "workspace": "..." }
```
```
<project root>/scrollcraft
```
, where the project root is the nearest ancestor holding a
```
.git
```

So a build folder is

<workspace>/builds/<name>/

and the registry is

<workspace>/FINGERPRINTS.md

. The registry starts empty: the gate exists to stop you repeating yourself, so your first build has nothing to clear.

If you already keep builds somewhere else, drop a

.scrollcraft.json

at your project root pointing at it and nothing moves.

构建文件和指纹注册表存储在一个目录中，路径需解析确定，而非假设：

bash

node <skill>/scripts/workspace.mjs --ensure     # 打印路径、创建目录、初始化注册表

路径解析优先级（按顺序匹配）：

```
SCROLLCRAFT_HOME
```
环境变量
从当前目录向上查找最近的
```
.scrollcraft.json
```
文件，读取其中的
```
{ "workspace": "..." }
```
配置
```
<project root>/scrollcraft
```
，其中项目根目录是最近的包含
```
.git
```
的父目录

因此，构建文件夹路径为

<workspace>/builds/<name>/

，注册表路径为

<workspace>/FINGERPRINTS.md

。注册表初始状态为空：该机制用于避免重复构建，因此首次构建无需检查任何内容。

若你已在其他位置存储构建文件，在项目根目录放置

.scrollcraft.json

并指向该路径即可，无需移动现有文件。

The rest

其他准备

```
KIE_AI_API_KEY
```
, only if you are generating assets. A build from the user's own photos and footage needs no key and no spend, and that is a first-class route, not a fallback. Confirm balance with
```
node <skill>/scripts/kie.mjs probe
```
. A still costs cents and a 5s clip costs more; a six-act page with two clips is a small spend, not a large one.
A brand kit if one exists (colours, logo, type, existing product shots). If the brand has a folder in this repo, read it before generating anything, and obey its hard rules. A brand that forbids invented numbers means no stat counters, however good they look.

Copy

engine/scrollcraft.js

and

engine/scrollcraft.css

into the build folder. Never edit the engine per-project; it is the mechanism. Theme it with tokens and write your own markup.

```
KIE_AI_API_KEY
```
，仅当需要生成素材时才需配置。使用用户自有照片和视频的构建无需密钥和费用，这是一等方案，而非 fallback。可通过
```
node <skill>/scripts/kie.mjs probe
```
确认余额。一张静态图仅需几分钱，5秒视频费用稍高；一个包含6个章节、2段视频的页面花费极低，而非高额支出。
品牌套件（若存在）：颜色、logo、字体、现有产品图。若本仓库中有该品牌的文件夹，生成任何内容前先读取并遵守其中的硬性规则。例如，禁止使用虚构数字的品牌，即使计数器效果再好也不能添加。

将

engine/scrollcraft.js

和

engine/scrollcraft.css

复制到构建文件夹中。切勿为单个项目修改引擎代码，它是核心机制。通过令牌进行主题定制，并编写自定义标记。

Step 1: The brief, journey first

步骤1：先确定旅程，再完善简报

The subject is the user's to state. Ask it open, in plain prose, never as a fabricated multiple-choice list of industries: a made-up menu biases them and reads as you deciding their business for them.

Step 0 already covered vibe, sequence, energy and range. Do not ask any of it again. Ask only what you cannot sensibly default:

What is this, and who is it for? One or two sentences in their words.
What must the visitor believe by the end? The single sentence the page exists to install. Not a feature list. If they give three, make them pick.
What does the visitor do next? One action. One label for it, used everywhere on the page.
What do you already have? Logo, palette, photography, product shots, footage, a brand doc. Real assets beat generated ones every time.
Art direction: offer the worlds in references/worlds.md as a real choice, and say they can go their own way.

Then write the journey before anything else: four to seven beats, each one a shift in what the visitor knows or feels.

1  Recognition   they see their own morning
2  Tension       the cost of it, named plainly
3  Turn          the thing that changes
4  Substance     why it holds up
5  Range         what they can choose
6  Commitment    the one action

Beats are the spine. Sections serve beats; a section that serves no beat is cut, however nice the shot is. Show the journey to the user and get it right before generating a single asset, because assets are the expensive part and the journey determines every one of them.

项目主题由用户决定。用开放式的平实语言询问，切勿提供虚构的行业选择题：虚构选项会引导用户，显得你在替他们决定业务方向。

步骤0已覆盖风格调性、顺序、能量和风格范围，无需再次询问。仅询问无法合理预设的内容：

**这是什么，面向谁？**用用户自己的话回答1-2句话。
**访客浏览结束后必须相信什么？**页面存在的核心目标，用一句话表述，而非功能列表。若用户给出三个答案，让他们选择最核心的一个。
**访客接下来要做什么？**一个明确的行动，使用统一的标签，并在页面各处保持一致。
**你已拥有哪些素材？**Logo、调色板、照片、产品图、视频、品牌文档。真实素材永远优于生成素材。
艺术指导：将references/worlds.md中的场景风格作为真实选项提供给用户，并说明他们也可以自定义风格。

然后，先撰写旅程：4-7个节点，每个节点对应访客认知或感受的转变。

1  共鸣阶段   访客看到自己熟悉的日常场景
2  张力阶段   直白点明问题的代价
3  转折阶段   引入改变现状的解决方案
4  价值阶段   说明方案为何可靠
5  选择阶段   展示可选的范围
6  行动阶段   引导访客完成核心行动

节点是页面的核心骨架，章节为节点服务；任何不服务于节点的章节都应删除，无论视觉效果多么出色。在生成任何素材前向用户展示旅程并确认无误，因为素材是成本最高的部分，旅程将决定所有素材的方向。

Step 2: Grammar, gate, then score

步骤2：先确定语法、验证唯一性，再制作分镜表

Three things in order, and the first two come before any act planning. Full detail in references/uniqueness.md.

Pick a grammar. Eight of them, and they are mutually exclusive because each one forbids things the others require. Filmic one-shot is the one the first four builds all used, so choosing it again means saying in the report why the other seven did not fit the interview. Nav, hero and close all follow from the grammar; they are not decided separately.

Invent the signature move. One bespoke interaction that lives on this site alone, coded in the page, not a parameter change to a kit device. Question 5 of the interview is the seed. The engine stays untouched.

Run the fingerprint gate. Read your registry at

<workspace>/FINGERPRINTS.md

(see The workspace in Bootstrap; run

node <skill>/scripts/workspace.mjs

to print the path). The planned build must differ from every existing row on at least 4 of 6 dimensions: grammar, nav treatment, hero device, act-sequence shape, close pattern, signature move. Four against each row individually. If it fails, change the plan, not the log.

Write the feeling curve before the score table. One line per act: the emotion, then what causes it. Curve first, acts second, because a device chosen before the feeling is a device looking for a reason. Two adjacent acts with the same feeling means one is filler, and it is cheaper to cut it here than after the assets exist. Name the peak in the same pass and give it the largest span on the page. Full method in references/feel.md.

Then assign each beat a device. Do it deliberately and write it down as a table:

Beat	Device	Why this one
Recognition	`scrub`	The camera moving under the reader's own hand is the strongest possible open
Tension	`pin` + kinetic	Copy assembles line by line while the frame holds still
Turn	`reveal`	A wipe is a change of state, which is what this beat is
Substance	`scrub` (macro)	Texture at a scale the eye cannot get otherwise
Range	`pan`	Lateral travel reads as "options", vertical reads as "argument"
Commitment	`pin` + pointer	The page stops moving and starts responding

That table is a filmic score. It is the right shape for one grammar and the wrong shape for the other seven, so read your grammar's leans-on and bans list before filling in a row.

Checks before you build:

The grammar's bans hold. A grammar that forbids
```
pin
```
forbids it here too, however well it would have worked.
Four or more distinct device families. Fewer means the page has one idea.
No device family twice in a row.
At most two
```
scrub
```
acts. Video is the heaviest thing on the page, and the third one stops being a surprise.
No two adjacent acts carry the same feeling. If they do, one is filler.
One act is the peak and it has the largest span by a visible margin. The act before it is quieter than it is.
Every act earns its scroll span. Total page length 8 to 14 viewport-heights. Longer is not more immersive, it is slower.
The act count and total length do not land in the 6-to-7 acts at 13.6-13.8vh band that all four prior builds hit. That band is a fingerprint dimension now.

按顺序完成三件事，前两件需在章节规划前完成。详细说明见references/uniqueness.md。

选定页面语法。共有8种语法，且互斥，因为每种语法都禁止其他语法要求的内容。前四次构建都使用了电影式单镜头语法，因此若再次选择该语法，需在报告中说明其他7种语法为何不符合访谈需求。导航栏、首屏和结尾都由语法决定，无需单独设置。

设计标志性交互。一个仅属于该网站的定制交互，需在页面中编码实现，而非修改组件参数。访谈的第5个问题是灵感来源。引擎代码保持不变。

运行唯一性验证。读取

<workspace>/FINGERPRINTS.md

中的注册表（见环境准备中的「工作区」部分；运行

node <skill>/scripts/workspace.mjs

可打印路径）。规划的构建必须与每一条现有记录在6个维度中的至少4个维度存在差异：语法、导航栏处理方式、首屏组件、章节顺序结构、结尾模式、标志性交互。需单独与每条记录对比，满足4项差异要求。若不满足，修改规划，而非修改注册表。

先撰写情绪曲线，再制作分镜表。每个章节一行，先写情绪，再写触发该情绪的内容。先确定曲线，再规划章节，因为先选组件再匹配情绪会导致组件缺乏合理性。相邻章节情绪相同意味着其中一个是冗余内容，在此阶段删除比生成素材后再删除成本更低。同时确定情绪峰值，并为其分配最大的滚动空间。详细方法见references/feel.md。

然后为每个节点分配组件。需刻意选择并记录为表格：

节点	组件	选择理由
共鸣阶段	`scrub`	访客亲手控制镜头移动是最强的开场方式
张力阶段	`pin` + 动态效果	文案逐行呈现，同时画面保持静止
转折阶段	`reveal`	擦除效果代表状态变化，与该节点的核心一致
价值阶段	`scrub` （微距）	呈现肉眼无法捕捉的纹理细节
选择阶段	`pan`	横向移动代表「选项」，纵向移动代表「论证」
行动阶段	`pin` + 指针交互	页面停止滚动，开始响应用户操作

该表格是电影式分镜表，仅适用于一种语法，不适用于其他7种，因此填写前需阅读所选语法的允许和禁止列表。

构建前检查：

遵守语法的禁止规则。例如，禁止使用
```
pin
```
的语法，即使该组件效果再好也不能使用。
使用4种或更多不同的组件类型。少于4种意味着页面只有一个核心创意。
不连续使用同一种组件类型。
```
scrub
```
组件最多使用2次。视频是页面中最重的资源，第三次使用就不再有惊喜感。
相邻章节的情绪不同。若相同，其中一个是冗余内容。
有一个明确的情绪峰值章节，且其滚动空间明显大于其他章节。峰值章节前的章节需更低调。
每个章节的滚动空间都有合理理由。页面总长度为8-14个视口高度。更长的页面不会更具沉浸感，只会更慢。
章节数量和总长度不要落入前四次构建的区间：6-7个章节，13.6-13.8vh总长度。该区间已成为指纹维度之一。

Step 3: Generate the assets

步骤3：生成素材

Full pipeline, prompt scaffolds and model notes: references/assets.md.

Short version:

bash

node <skill>/scripts/kie.mjs still "<style preamble>\n\n<scene>" out/01-hero.png --ar 16:9 [--ref brand-can.png]
node <skill>/scripts/kie.mjs shot  "<camera move>" out/01-hero.png out/01.mp4 --dur 5
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01.mp4
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01-m.mp4 mobile

Three things that decide whether this looks premium or generated:

One style preamble, reused verbatim in every prompt. This is what makes six separate images look like one shoot. Write it once, never paraphrase it.
Look at every asset before you use it. Read the PNG. Generation is cheap and rerolling is cheaper than shipping a bad frame.
Encode for scrubbing, not playback.
```
encode.sh
```
sets a dense GOP because seeking walks from the previous keyframe. A normal web encode plays perfectly and scrubs like mud.

完整流程、提示模板和模型说明见references/assets.md。

简化版流程：

bash

node <skill>/scripts/kie.mjs still "<风格前置说明>\n\n<场景描述>" out/01-hero.png --ar 16:9 [--ref brand-can.png]
node <skill>/scripts/kie.mjs shot  "<镜头移动描述>" out/01-hero.png out/01.mp4 --dur 5
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01.mp4
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01-m.mp4 mobile

决定素材是否高端的三个要点：

统一的风格前置说明，在所有提示中重复使用。这能让六张独立图片看起来像同一次拍摄的成果。撰写一次后，切勿改写。
使用前检查每一个素材。查看PNG图。生成成本低，重新生成比上线有瑕疵的素材成本更低。
为滚动 scrub 优化编码，而非播放。
```
encode.sh
```
设置了密集的GOP，因为跳转播放会从最近的关键帧开始。普通网页编码播放流畅，但 scrub 体验极差。

Step 4: Build the page

步骤4：构建页面

Write real HTML. Real

<h1>

, real

<p>

, real links, real reading order. The engine reads

data-sc-*

attributes off your markup and drives it; it never generates DOM. A runtime that builds the page from a config object is exactly why every site built on one looks the same.

Start from

references/template.html

. The device patterns are in references/devices.md; the spacing, type, depth and colour rules are in references/taste.md. Read taste.md before writing markup, not after, and build without announcing the checklist.

Theme by overriding tokens, six values and two fonts:

css

:root {
  --sc-canvas: #0A0806;  --sc-surface: #16110E;
  --sc-ink:    #F5EBDD;  --sc-ink-soft: #A2968A;
  --sc-accent: #FF5A3D;  --sc-accent-ink: #15110F;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
}

编写真实的HTML。使用真实的

<h1>

、

<p>

、链接和正确的阅读顺序。引擎通过标记上的

data-sc-*

属性驱动页面，从不生成DOM。从配置对象生成页面的运行时，正是导致所有基于该方式构建的网站雷同的原因。

从

references/template.html

开始。组件模式见references/devices.md；间距、字体、层次和颜色规则见references/taste.md。编写标记前先阅读taste.md，而非事后检查，且构建时无需刻意提及规则。

通过覆盖令牌进行主题定制，只需六个颜色值和两种字体：

css

:root {
  --sc-canvas: #0A0806;  --sc-surface: #16110E;
  --sc-ink:    #F5EBDD;  --sc-ink-soft: #A2968A;
  --sc-accent: #FF5A3D;  --sc-accent-ink: #15110F;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
}

Step 5: Verify by scrolling it

步骤5：通过滚动验证页面

Not optional, and not "it should work." A scroll page has no single state: every position is a different frame, and the failures live between the two you happened to look at. Full procedure: references/verify.md.

bash

cd <build project> && npm i playwright-core     # once
node <skill>/scripts/serve.mjs --root . --port 4500 &
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/mobile --width 390 --height 844
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/reduced --reduced-motion

The harness walks each act at six positions, waits for the scrub video to actually settle, and reports dead scroll, cues that never reach full opacity, and contrast measured on the composited page at the brightest frame under each line. It writes a contact sheet.

Then do the part the harness cannot: read
sheet.png
. It proves a clip advances; it cannot tell you the composition is good, the motion is smooth, or the page means anything. Also tab through for focus order.

Then run the feel check (references/feel.md §6). Scroll the page cold, write one word per act for what you felt, and only then open BRIEF.md and diff it against the intended curve. Where they disagree the page is wrong, not the brief. Confirm on the sheet that the peak is the largest visual change and holds the most scroll room, and that the last screen resolves instead of fading to nothing.

Fix what you found and shoot it again. Report what you actually verified and what you did not.

此步骤为必选项，而非「应该可行」。滚动页面没有单一状态：每个滚动位置都是不同的帧，故障往往出现在你未查看的位置之间。完整流程见references/verify.md。

bash

cd <build project> && npm i playwright-core     # 仅需执行一次
node <skill>/scripts/serve.mjs --root . --port 4500 &
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/mobile --width 390 --height 844
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/reduced --reduced-motion

该工具会在每个章节的六个位置滚动页面，等待scrub视频完全稳定，并报告无交互滚动、提示元素从未完全显示、每个文本行最亮帧处的合成页面对比度。它会生成一张联系表。

然后完成工具无法处理的部分：查看
sheet.png
。工具能验证视频是否推进，但无法判断构图是否合理、动画是否流畅、页面是否有意义。同时需通过Tab键检查焦点顺序。

然后执行情绪检查（references/feel.md §6）。首次滚动页面，为每个章节写下一个描述感受的词，然后打开BRIEF.md，将实际感受与预设情绪曲线对比。若存在差异，问题出在页面，而非简报。在联系表中确认情绪峰值是视觉变化最大的部分，且拥有最多滚动空间，最后一屏是收尾而非淡出。

修复发现的问题后重新截图。报告实际验证的内容和未验证的内容。

Hard rules

硬性规则

Ship-blockers, not preferences. Each one is a thing that makes a page read as machine-made.

Never	Instead
Clay diorama / low-poly / claymation as the default world	Photographic. See worlds.md
A "scroll" cue, arrow, or animated mouse icon	Nothing. They are looking at the hero; they know
`01 / 06` section counters	Delete them. Sequence is not information here
An eyebrow above every section heading	At most one per three sections. The heading carries itself
Em dash anywhere visible	Period, comma, colon, or parentheses
Centred copy in every act	Vary the anchor: lead, trail, centre, split
The same device twice in a row	Score the journey properly in Step 2
Generating anything before the human has been interviewed	Run Step 0. Write `BRIEF.md` , or mark it self-authored
A page with no engineered peak, or with three competing ones	One peak. It gets the asset budget, the silence before it, and the most scroll room. See feel.md §2
An ending that trails off, fades out, or just becomes a footer	The close resolves and holds. The last feeling is the one they carry
Planning acts before the feeling curve exists	Curve first, devices second. See feel.md §1
Shipping without one bespoke signature move	Invent one. A recoloured spotlight or a retuned tilt is not one. See uniqueness.md §3
A build that clears fewer than 4 of 6 fingerprint dimensions against any existing row	Change the plan, not `FINGERPRINTS.md`
Editing the engine to get a bespoke behaviour	Bespoke JS in the page, driven off `--sc-p` and your own `data-sc-*`
Reaching for filmic one-shot because it is what the last build did	Pick from all eight grammars, and say why the other seven lost
A full-frame dark overlay to fix contrast	A scrim only where the text sits
Text baked into a generated image	Real markup, always. It is selectable, translatable and sharp
Invented statistics in a counter	Only real numbers. No number, no counter
`transition: all` , or animating width/height/top/left	`transform` and `opacity` ; `clip-path` for wipes
Gradient text, neon glow, zero-offset coloured halo shadows	Weight and size for emphasis; shadows with offset and blur
Autoplaying audio, or any audio at all on a scrub clip	Strip the track. `encode.sh` already does
Shipping without running Step 5	Run Step 5

这些是上线的必要条件，而非偏好。每条规则都针对会让页面看起来像机器生成的问题。

禁止行为	替代方案
默认使用黏土场景/低多边形/黏土动画	采用写实摄影风。详见worlds.md
添加「滚动」提示、箭头或动画鼠标图标	不添加任何提示。访客正在查看首屏，他们知道如何滚动
使用 `01 / 06` 章节计数器	删除计数器。此处无需展示顺序信息
每个章节标题上方都添加小标题	最多每三个章节添加一个。标题本身足够醒目
在可见位置使用破折号	使用句号、逗号、冒号或括号
每个章节都使用居中文案	改变对齐方式：左对齐、右对齐、居中、分栏
连续使用同一种组件	在步骤2中合理规划旅程分镜
在用户访谈前生成任何内容	执行步骤0。撰写 `BRIEF.md` ，或标记为自主撰写
页面无设计情绪峰值，或存在三个竞争峰值	设置一个情绪峰值。为其分配素材预算、前置静默环节和最多滚动空间。详见feel.md §2
结尾逐渐淡出或直接变为页脚	结尾需明确收尾并保持稳定。访客最后感受到的情绪将是他们记住的内容
在情绪曲线确定前规划章节	先确定曲线，再选择组件。详见feel.md §1
上线时无定制标志性交互	设计一个定制交互。重新着色的聚光灯或调整角度不算定制交互。详见uniqueness.md §3
构建与任何现有记录在6个维度中的差异少于4项	修改规划，而非修改 `FINGERPRINTS.md`
修改引擎代码以实现定制行为	在页面中编写定制JS，通过 `--sc-p` 和自定义 `data-sc-*` 属性驱动
因上次使用过电影式单镜头语法而再次选择	从8种语法中选择，并说明其他7种为何不适用
使用全屏深色遮罩解决对比度问题	仅在文本区域添加半透明遮罩
将文本嵌入生成的图片中	始终使用真实标记。真实标记可选中、可翻译且清晰锐利
在计数器中使用虚构数据	仅使用真实数据。若无真实数据，不添加计数器
使用 `transition: all` ，或动画width/height/top/left属性	使用 `transform` 和 `opacity` ；使用 `clip-path` 实现擦除效果
使用渐变文字、霓虹发光、零偏移彩色光晕阴影	通过字重和字号强调；使用带偏移和模糊的阴影
在scrub视频中自动播放音频或包含任何音频	移除音轨。 `encode.sh` 已默认处理
未执行步骤5就上线	执行步骤5

Output

输出

The build folder, including

BRIEF.md

, then a short report: the grammar and why the other seven lost, the signature move, the fingerprint gate result against each existing row, the journey, the feeling curve and the peak, the feel-check diff (intended curve against felt curve, and what you changed), the score table (device per beat), what you generated, what you verified with screenshots, and anything you could not verify. Say if the brief was self-authored rather than interviewed. Give the local URL. Keep it brief; the page is the deliverable.

Then append the build's row to

<workspace>/FINGERPRINTS.md

Changes to the skill itself, and the build findings that drove them, are logged in CHANGELOG.md.

构建文件夹（包含

BRIEF.md

），以及一份简短报告：说明选定的语法及其他7种语法未被选中的原因、标志性交互、与每条现有记录的唯一性验证结果、旅程、情绪曲线和峰值、情绪检查差异（预设曲线与实际感受的对比，以及修改内容）、分镜表（每个节点对应的组件）、生成的素材、通过截图验证的内容、未验证的内容。说明简报是自主撰写还是访谈所得。提供本地访问URL。报告要简洁，页面才是核心交付物。

然后将本次构建的记录追加到

<workspace>/FINGERPRINTS.md

中。

技能本身的变更，以及驱动变更的构建发现，记录在CHANGELOG.md中。