HTML页面标准化 是做什么的？
用于静态HTML的规范化流水线。此技能是路由器。不应仅凭此文件实现整个页面。
在写入文件之前声明：
HTML-PAGE-STANDARD: 1.0
PASS: A-clone | B-tokenize | C-repair | layout-pack
仅加载当前阶段的负责人。绝不允许 screenshot-to-html 和 studio-web 共同撰写初稿。
阶段负责人
| 阶段 | 负责人 | 输出 |
|---|---|---|
| A-clone | 仅 screenshot-to-html | source.png + clone.html |
| B-tokenize | 此技能 + references/tokenize-contract.md | core.css + theme-default.css |
| C-repair | studio-web 1.1 web.repair | 基于 clone 的 index.html，含语义、a11y、动效 |
| layout-pack | 此技能 + references/layout-packs.md | 可选 layout-*.css |
如果用户提供了实时 URL 或现有 HTML（没有要克隆的截图），则跳过 A。如果 Token 缺失则进行 Tokenize，然后执行 C。
如果截图仅用于参考情绪而非精确复制，则跳过 A，改用 studio-web 的 web.build。在开始操作前说明这一点。
硬性规则
- 除非用户明确要求链式执行，否则每轮只执行一个阶段。
- 每个新页面都必须附带 TUNE 和一个主题文件，即使只有一种风格。
- TUNE 拥有节奏。主题拥有外观。布局包拥有排列。HTML 拥有内容。
- 在阶段 B 之后，如果存在 Token，则不得使用原始的
font-size、padding、margin或gap。 - 组件布局不得使用视口宽度断点。区域应使用
@container+cqi。 - 主题不得更改 DOM。布局包不得更改调色板。
- 除非用户要求，否则不要在第一个页面上添加第二个主题或布局包。
- Wix Velo 相关工作不在范畴内。
文件夹协定
<page>/
source.png
clone.html
core.css
theme-default.css
index.html
后续可选：theme-<name>.css、layout-<name>.css。根属性：data-theme="default" 和 data-layout="default"。
层级：@layer reset, core, theme, layout, page;
加载映射
- 阶段 A — 加载 screenshot-to-html。当
clone.html与图片匹配时停止。 - 阶段 B — 加载
references/tokenize-contract.md。复制assets/core.template.css和assets/theme-default.template.css，然后根据克隆结果填充数值。不要重新设计。 - 阶段 C — 加载 studio-web 1.1，车道
web.repair，以及该技能的references/page-anatomy.md。冻结：视觉协定、TUNE 数值、主题调色板（除非命名）。可更改：区域 ID、语义、真实控件、对比度、不改变图片效果的动效。 - 布局包 — 仅在用户要求时加载
references/layout-packs.md。 - 脚手架提醒 —
references/project-scaffold.md。 - 提示模式 —
references/prompts.md。
精细化映射
| 需求 | 修改文件 |
|---|---|
| 更紧凑、更大的字号、更多留白、度量、圆角、动效 | core.css 中的 TUNE 块 |
| 夜间模式、金色、叠加、细线 | theme-*.css |
| 堆叠 vs 分割的英雄区域 | data-layout + 布局包 |
| 错误的句子 | index.html |
禁止行为
- 在阶段 A 的视觉克隆中混入 studio-web 的构建方式。
- 在 TUNE 中放置网格列或
order。 - 在主题文件中放置
--space-*或字号比例。 - 分叉出
index-dark.html/index-camp.html。 - 运行完整的主题 × 布局视觉矩阵，仅限英雄区域和主要 CTA。