Design Preview

---
name: design-preview
description: 把已有或拟改 UI 形态按组件结构与样式真值还原为像素级自包含 HTML，在浏览器打开并截图自检。触发：预览设计稿、出效果图、还原页面、对图评审、design preview。移动端用 750 舞台 scale(0.5) 保持 rpx 映射。
---

# 设计预览（design-preview）

一句话：**把一个 UI 形态还原成像素级 HTML，在浏览器打开，并按需送到手机审阅站，让人对着真图评审，而不是看文字/ASCII。**

本 skill 是**沟通介质生产器**，不是拍板器——它只负责「出图 + 浏览器自检 + 按需发布 + 迭代」；设计结论由调用方（主线程/总控子任务）落到对应文档。

---

## 适用 / 不适用

| 适用 | 不适用 |
|---|---|
| 把已有页面形态 1:1 还原，供人确认「现状长这样」 | 需要可运行交互验证（长按菜单、登录链、网络请求）→ 用微信开发者工具/真机 |
| 把拟改/新增形态做成效果图，对图拍板版式 | 要生成可部署的真实代码 → 那是施工，不是预览 |
| 多变体 A/B 并排比对 | — |

**核心保真承诺**：与代码**同源**。读真值源还原，不凭记忆画、不引 v0/Figma/Lovable 等凭空生成器（它们会偏离真值 scss）。

---

## 核心流程（四步）

### Step 1 — 定位真值源

- **小程序**：找到目标形态对应的页面 `.wxml`（结构）+ `.scss`（视觉）。已有形态→照搬；新/改形态→以**同源 scss** 为视觉基准改，确保和现状同风格。
- **Vue / React / H5**：找对应组件源 + 样式文件。
- 拿不准结构或视觉细节，**先读代码**，不要凭记忆画。涉及多形态/多类型分支时，逐个 grep 确认分支真值。

### Step 2 — 写自包含 HTML

- 复制模板 `references/preview-template.html` 作骨架（手机框 + 750 舞台 scale(0.5)）。
- **单位**：scss 里的 rpx 数值**直接当 px** 填进 `.stage`（模板已 scale 0.5 还原 375 宽），禁止手算换算。
- **视觉**：颜色 / 圆角 / 字号 / 间距 / 投影 / 动画一律照抄 scss 真值，禁止「差不多」。
- **数据**：填真实感 mock 数据（真实昵称风格、合理数值、真实文案），不要 lorem。
- **多变体**：A/B 或「当前 vs 改后」复制多个 `.device-wrap` 横排，每个 `.device-label` 标清是哪个变体。
- **存放位置（按触发场景决定，禁止把具体任务路径写进本 skill——运行时按当时所属子任务拼）**：
  - **在 `$control` 总控任务内触发** → 放进该任务的过程资产目录（总控约定 = 任务目录下的 `_shared/`），子目录/文件名带**当前所属子任务**的 `T{n}-` 前缀（形如 `_shared/T{n}-形态预览/<形态名>.html`）。它属于该子任务的过程资产，**随任务一起提交、归档**，兼作跨会话可重开的视觉档案。
  - **计划任务内** → 放计划文件相邻的 `_shared/形态预览/`；若计划要求不写仓库，改用临时目录。
  - **无任务资产目录** → 放系统临时目录下的 `design-preview/`；交付时提供路径。

### Step 3 — 浏览器截图自检

1. 用当前运行环境可用的浏览器工具打开本地预览。浏览器无法访问 `file://` 时，运行 `python3 -m http.server <端口> --directory <HTML目录>`，访问 `http://localhost:<端口>/<URL编码文件名>`。
2. 截图检查空白、错位、字体、滚动和样式加载；异常先修复再交付。浏览器工具不可用时，可用项目已有的截图工具；仍无法截图须明确说明未完成视觉自检。
3. 用户要求手机审阅，或任务明确以手机端验收时，调用 `$site-preview` 整理材料。只有站点配置、访问策略及发布授权齐备才发布；否则交付本地预览并注明未发布。发布后的直链须再次在手机视口检查。

### Step 4 — 对图迭代

用户反馈后修改 HTML、刷新并重新截图。用户拍板的设计结论由调用方写回对应正式文档；审阅站本身不取得裁决权。

## 执行分工

单页默认由当前 Agent 完成。有界批量页面可按当前环境支持的方式分派独立制作任务；各制作方只读真值源、只写获准预览目录。浏览器自检与发布由当前主线程汇总执行。模型和子任务工具由运行环境决定，不写死供应商或档位。批量时每个页面独立核对后再组成画廊。

## 保真红线（违反即失真）

1. **rpx→px 只走模板的 750 舞台 scale(0.5)**，禁止手动猜 px。
2. **视觉值照抄 scss**，颜色/字号/圆角不许「估个差不多」。
3. **视觉等价 ≠ 运行等价**：HTML 只还原「长什么样」，交互（长按菜单、登录链路、下拉刷新、网络请求）只能静态示意；**出图时主动标注**「交互最终以微信工具/真机为准」。
4. **不引第三方生成器**：v0 / Figma Make / Lovable 从 prompt 凭空生成，会偏离真值 scss，禁用。
5. **新/改形态要标注**：哪些是现状、哪些是本次提案，`device-label` 写清，别让人把提案误认成现状。

---

## 并发 agent 共用

任何子 agent 收到「出预览/出效果图」类指令，都读本 skill 走**同一流程 + 同一模板**，产物命名与存放位置遵循 Step 2，保证跨 agent 一致、可互相接力。

---

## 触发后第一件事

确认「要预览哪个形态/页面」：
- 上下文已明确（正在聊某形态）→ 直接对该形态走四步。
- 不明确 → 一句话问清是哪个形态/页面，再开工，不要默认。