# 风格对比页

把几个候选放在同一页里并排比较，由用户挑选。用户可以并排或单张查看、按实际尺寸看、选定并复制方向。对比页的外壳只负责比较和挑选，不带风格倾向，也不作为候选的参考。

几个候选的核心内容、主要动作和目标用户保持一致，变的是构图、信息怎么组织、字体的气质、色彩关系、疏密和用图的方式。放几个候选，看用户要几个、真正有差别的有几个；不复制整个产品来凑数。

## 准备输入

一轮只生成一个对比页。候选能跑就用真实页面：单独写的 HTML 小样直接嵌入，项目里的方案用本机地址，拿不到可运行的页面时才用截图。每个方案一个画面：存量项目选入口或差别最大的那一步，整站方案只放代表页。

在一个目录里放 `manifest.json` 和候选文件。候选引用的图片、字体、视频也放在这个目录或它的子目录里，用相对路径引用，生成器会把它们内嵌进对比页。manifest 最少这样写，尖括号里换成本轮候选的实际内容，方向用方向卡里写的：

```json
{
  "schemaVersion": 1,
  "project": "<项目名称>",
  "brief": "<所有候选共同表达的内容与主要任务>",
  "round": "<轮次，例如 01>",
  "candidates": [
    {
      "id": "<小写唯一标识>",
      "name": "<方向名称>",
      "concept": "<北极星：一句能指导取舍的体验意图>",
      "typography": "<实际使用的字族、字重与尺度关系>",
      "palette": ["<十六进制色值>", "<十六进制色值>", "<十六进制色值>"],
      "traits": ["<可观察特征>", "<可观察特征>"],
      "source": "<候选文件的相对路径>"
    }
  ]
}
```

| 情况 | 在 manifest 里加 |
| --- | --- |
| 固定画布的界面，不随宽度重排 | 顶层或候选里写 `"nativeViewport": "<宽>x<高>"`。对比页按这个视口渲染，再整体等比缩放，候选不用自己写缩放 |
| 自己写的可操作小样 | 候选加 `"interactive": true` |
| 项目里要运行起来才能看的页面 | 候选的 `kind` 设为 `"url"`，用 `url` 指向本机开发服务器；顶层用 `serve` 写下启动命令 |
| 改动已有页面 | 把现状也放进来，加 `"baseline": true` |
| 只有截图 | 候选的 `kind` 设为 `"image"` |

每个字段的写法和限制见生成器的 `--help`。

## 生成和打开

```text
<python> <skill>/scripts/build_explorer.py <manifest 所在目录>/manifest.json
```

对比页生成在 manifest 旁边，文件名是 `style-explorer.html`。写错时生成器会把所有要改的地方一次列出来，照着改完再运行；同名文件已经存在时加 `--force`。运行不了生成器时，把 manifest 和候选留给用户直接看，说明对比页还没有组装，不临时另写一套工具。

有本机地址候选时，交付时让开发服务器开着。用户之后说“打开对比页”：读 manifest 里的 `serve`，在 `cwd` 里后台运行 `command`，等 `url` 能访问了再打开对比页。

## 记录选择

用户点“选择”会复制一句话，例如“<轮次>：选 03 <方向名>”。用户粘贴它或直接说出选择后，按轮次和编号对照当前 manifest，确认是这一轮的，把选择和备注更新到设计说明，再回到生成这个对比页的流程接着做。对比页不会写回任何文件，也不会自动给 Agent 发消息。

交付前核对候选：每张画面和 manifest 里写的页面、状态、视口一致，中文字体真实渲染出来了。判断文字大小和细节时用单张查看的“实际尺寸 100%”，适应窗口的缩小图不能当作可读性通过。对比页本身的功能由 Skill 自带的测试保证，任务里不验证、不读模板源码。