BackToCimaCoppi 设计预览（design-preview）
一句话：把一个 UI 形态还原成像素级 HTML，自动弹到用户 Chrome 里，让人对着真图评审，而不是看文字/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）。它属于该子任务的过程资产，随任务一起提交、归档，兼作跨会话可重开的视觉档案。 - 不在总控任务内 / 计划模式 → 放
/tmp/design-preview/<描述名>.html。临时、不入库、用完即弃——这类场景的预览本就无需版本化或归档；计划模式尤其不应往仓库写文件。
- 在
Step 3 — 自动弹 Chrome（经本地 HTTP 服务，不要用 file://）
⚠️ 关键（实测）：claude-in-chrome 扩展受 Chrome 沙盒限制打不开
file://（会被拼成https://file///...失败）。必须起一个本地静态服务，让扩展访问http://localhost。
- 起本地服务（指向 HTML 所在目录，后台运行，用
--directory避免cd）：
端口取不常用值（如 8923）；同一会话可复用同一服务，不必每张图重起。python3 -m http.server <端口> --directory "<HTML 所在目录绝对路径>" - 浏览器工具若是 deferred，一次性批量加载核心集：
ToolSearch query: "select:mcp__claude-in-chrome__tabs_context_mcp,mcp__claude-in-chrome__navigate,mcp__claude-in-chrome__tabs_create_mcp,mcp__claude-in-chrome__computer,mcp__claude-in-chrome__read_page" tabs_context_mcp（会话首次必做，拿 tab 上下文）→tabs_create_mcp新建或复用空 tab →navigate到http://localhost:<端口>/<文件名>。文件名含中文必须 URL 编码（如形态1a.html→%E5%BD%A2%E6%80%811a.html）。- 截图自检：
computer(action:screenshot, save_to_disk:true) 抓一张，确认渲染正常 + 人机看同一张图；异常（错位/空白/样式没生效）就改 HTML 重开，不把坏图丢给用户。 - 告诉用户「已在 Chrome 弹出」+ 一句话说明这是哪个形态/变体。
不要触发 alert/confirm/prompt 等模态框（会卡死扩展）。纯展示页一般无此风险。
Step 4 — 对图迭代
- 用户对图提意见 → 改 HTML →
navigate（或刷新该 tab）→ 再看 → 截图自检。 - 反复到用户满意。
- 拍板落点：用户对某形态拍板后，设计结论由调用方写回对应文档（如所属总控子任务的定案文档）。本 skill 不负责记录拍板，只负责出图。
执行架构：默认派 Sonnet 子线程出图
设计聊天和拍板留主线程（常是 Opus），出图是体力活，默认派给 Sonnet 子线程——让主线程上下文专注设计推理，把读 wxml/scss + 敲 HTML 的 token 消耗放进子线程干净上下文。按常规子线程派活方式打包即可，但本 skill 流程已钉死，是填槽工单，省掉范围探索那步。
分工：
- 主线程：把「要还原哪个形态 + 真值源路径 + 数据口径 + 设计意图 + 存放位置」打成工单（见下模板），用 Agent 工具派子线程。
- 子线程：按本 skill 四步出图 + 弹 Chrome + 截图自检，返回「HTML 绝对路径 + 截图 + 自检结论」。
- 迭代：用户对图提意见 → 主线程把「上一版路径 + 意见」打进新工单再派（每轮新调用，不在一次调用里反复追问）。
何时主线程自己出（不派）：一次性极简单张、或没有可用子线程时，主线程内联跑四步也行。
弹窗归谁（速度优化）：默认 子线程只「读真值 + 写 HTML + 返回绝对路径」，弹窗+截图由主线程做——主线程工具已热、本地服务常驻，弹窗就两三个调用；子线程不必加载 chrome 工具/导航/截图，关键路径更短。子线程那侧本就常连不上扩展，这样也更稳。
串行默认，批量按需并行
- 默认串行（一个一个出）：聊天中只针对单个页面/形态时，一次只出一张，出完对图、聊完再下一个——匹配「过一个记一个」的推敲节奏。
- 显式批量才并行：用户明确说「把这些页面全部预览给我看」「批量/并行出」时，才并行派多个子线程各出一张，拼成画廊页（一个汇总 HTML 里多个
.device-wrap横排）一次性给用户扫。 - 判据：用户没明说批量 → 串行。不要自作主张并行。
派模式工单模板
[出图任务] 还原形态 {编号·名称}（现状还原 | 新设计提案 | A/B 变体）
真值源（必读）：
- 结构：{xxx.wxml（行/分支范围）}
- 视觉：{xxx.scss（行/类名范围）}
- 手机框模板：本 skill 目录内 `design-preview/references/preview-template.html`
数据口径：{真实昵称风格 + 具体数值 + 真实文案}
设计意图（仅新/改形态填）：{要长成什么样 / A、B 各自差异点}
存放：{按本 skill「存放位置」规则拼出的绝对目录}
交付契约：
- 按 design-preview SKILL 四步，保真红线：scss 值照抄、rpx 数值 1:1 当 px
- 写完后按 SKILL Step 3 起本地 HTTP 服务 → 载入 chrome 工具 → navigate 到 http://localhost:<端口>/<URL编码文件名> → 截图自检，异常自己修到正常再返回（**不要用 file://**，扩展打不开）
- 返回：HTML 绝对路径 + 截图 + 一句话渲染自检结论
- 授权：只准写 {存放目录}，禁止改任何源码
浏览器兜底
子线程那侧若连不上浏览器扩展（权限 / headless），退化为：子线程只出 HTML 并返回绝对路径，由主线程载入 chrome 工具弹窗 + 截图。功能不变，只是弹窗动作改由主线程做。
模型档位（质量优先，screenshot 自检是硬闸）
出图是「照搬 wxml 结构 + 抄 scss 数值 + rpx 当 px」的受约束转写，不是写代码那种开放推理——低档模型的「推理弱」在这里影响小。但低档仍可能转写错（抄错数值/漏元素/布局译歪），靠 screenshot 自检 + 人过目当场抓（代码 bug 会藏，转写错肉眼可见）。质量的真正来源是这道验收闸，不是模型档位；档位只调速度。拿不准就往高一档走。
| 出图类型 | 默认档 | 说明 |
|---|---|---|
| 极简结构纯还原（加载态/错误态/2 字段卡） | Haiku 可选 | 几乎没东西能错，截图一看便知；不放心就上 Sonnet |
| 有真实布局的还原（数据卡/整页/名片） | Sonnet | 结构多、易译歪，求稳 |
| 新 / 改形态、A/B 变体 | Sonnet | 含设计判断，绝不用 Haiku |
| 极讲究的从零版式 | Opus | 临时出那一张 |
保真红线（违反即失真）
- rpx→px 只走模板的 750 舞台 scale(0.5)，禁止手动猜 px。
- 视觉值照抄 scss，颜色/字号/圆角不许「估个差不多」。
- 视觉等价 ≠ 运行等价：HTML 只还原「长什么样」，交互（长按菜单、登录链路、下拉刷新、网络请求）只能静态示意；出图时主动标注「交互最终以微信工具/真机为准」。
- 不引第三方生成器：v0 / Figma Make / Lovable 从 prompt 凭空生成，会偏离真值 scss，禁用。
- 新/改形态要标注：哪些是现状、哪些是本次提案，
device-label写清，别让人把提案误认成现状。
并发 agent 共用
任何子 agent 收到「出预览/出效果图」类指令，都读本 skill 走同一流程 + 同一模板，产物命名与存放位置遵循 Step 2，保证跨 agent 一致、可互相接力。
触发后第一件事
确认「要预览哪个形态/页面」：
- 上下文已明确（正在聊某形态）→ 直接对该形态走四步。
- 不明确 → 一句话问清是哪个形态/页面，再开工，不要默认。