scroll-craft

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

scroll-craft

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.

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

产出内容： 访谈简报、页面语法、用户旅程图、带有设计峰值的情绪曲线、滚动分镜表、一个标志性动效、生成的资产、基于令牌驱动设计系统的真实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个环节、两段视频的页面花费很低，并非高额支出。
品牌套件（如果存在）：颜色、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。

选择一种语法：共八种，且互斥，因为每种语法都会禁止其他语法要求的内容。前四个构建版本都使用了电影式单镜头语法，因此如果再次选择该语法，需在报告中说明其他七种语法不适合本次访谈的原因。导航页、首页和结尾页都由语法决定，无需单独选择。

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

运行指纹查重：读取

<workspace>/FINGERPRINTS.md

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

node <skill>/scripts/workspace.mjs

可打印路径）。计划中的构建必须与每一条已有记录在6个维度中的至少4个维度不同：语法、导航处理、首页设备、环节顺序结构、结尾模式、标志性动效。需单独与每条记录对比，满足4个维度不同。如果不满足，修改计划，而非修改日志。

先撰写情绪曲线，再撰写分镜表：每个环节一行内容，先写情绪，再写触发该情绪的内容。先确定曲线，再规划环节，因为先选设备再匹配情绪会导致设备缺乏合理依据。相邻环节情绪相同意味着其中一个是冗余内容，此时删除比生成资产后再删除成本更低。同时确定峰值环节，并给予最大的滚动跨度。完整方法见references/feel.md。

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

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

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

构建前检查：

遵守语法的禁止规则：如果语法禁止
```
pin
```
，即使效果再好也不能使用。
使用四种或更多不同的设备类型：少于四种意味着页面只有一种核心思路。
不连续使用同一种设备类型。
最多使用两个
```
scrub
```
环节：视频是页面中最重的资源，第三个
```
scrub
```
环节会失去惊喜感。
相邻环节的情绪不同：如果相同，其中一个是冗余内容。
有一个峰值环节，且其滚动跨度明显大于其他环节。峰值环节前的环节要更低调。
每个环节的滚动跨度都有合理依据。页面总长度为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

Four 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.
Layer the hero. Cut the scene into planes that scroll at slightly different rates, with the product parked between the mid and foreground planes. Depth from differential movement is the cheapest premium signal on the page. The recipe and its traps are under
```
parallax
```
in references/devices.md.

完整流程、提示模板和模型说明见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图片。生成成本低，重新生成比上线后再修改成本更低。
为滚动交互优化编码，而非播放：
```
encode.sh
```
设置了密集的GOP，因为滚动定位需要从最近的关键帧开始。普通的网页编码播放流畅，但滚动时会卡顿。
分层首页场景：将场景分割为滚动速度略有不同的图层，产品放置在中层和前景层之间。通过差异化移动营造深度感，这是页面中成本最低的高端效果。方法和注意事项见references/devices.md中的
```
parallax
```
部分。

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.

And say what a green run does not cover: a real phone. Headless Chrome cannot reproduce an iPhone's video decoder, autoplay policy, Low Power Mode, or touch scrolling; a build once shipped four green rounds while the hero clip sat frozen on the actual device. Mobile is a first-class target throughout, not a pass at the end: portrait phone clips, touch-tuned lerp, grown tap targets are all authored (see assets.md and verify.md). When any mobile defect is reported, deploy

references/device-diag.html

beside the site on the first round and let the device answer, rather than theorising from a machine that cannot reproduce the failure. The full iOS clip-lifecycle notes live in verify.md, "The phone is a different machine".

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，对比预期的情绪曲线。如果不一致，问题出在页面，而非简报。在联系表中确认峰值环节是视觉变化最大的部分，且拥有最多的滚动空间，最后一屏是收尾而非淡出。

还要说明工具未覆盖的内容：真实设备。无头Chrome无法复现iPhone的视频解码器、自动播放策略、低电量模式或触摸滚动；曾有一个构建在四次验证都通过的情况下，首页视频在真实设备上完全冻结。移动设备是全程的一等目标，而非最后一步的优化：竖屏手机视频、触摸优化的缓动、放大的点击目标都需提前设计（见assets.md和verify.md）。当报告任何移动设备缺陷时，首次就将

references/device-diag.html

部署在网站旁边，让设备自行诊断，而非基于无法复现故障的机器进行推测。完整的iOS视频生命周期说明见verify.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-*` 属性驱动
因为上一个构建使用了电影式单镜头语法而再次选择它	从八种语法中选择，并说明其他七种不适合的原因
使用全屏深色覆盖层修复对比度	仅在文本所在位置添加半透明遮罩
将文本嵌入生成的图片中	始终使用真实标记。文本可选择、可翻译且清晰
在计数器中使用虚构数据	仅使用真实数据。没有真实数据就不要添加计数器
使用 `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

，然后是一份简短报告：所选语法及其他七种未被选中的原因、标志性动效、与每条已有记录的指纹查重结果、旅程、情绪曲线和峰值、情绪检查差异（预期曲线与实际感受的对比，以及修改内容）、分镜表（每个节点对应的设备）、生成的资产、通过截图验证的内容、未验证的内容。说明简报是自行撰写还是来自用户访谈。提供本地URL。报告要简洁：页面是最终交付物。

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

<workspace>/FINGERPRINTS.md

中。

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