# Design Preview > 把已有或拟改 UI 形态按组件结构与样式真值还原为像素级自包含 HTML，在 Chrome 打开并截图自检。触发：预览设计稿、出效果图、还原页面、对图评审、design preview。移动端用 750 舞台 scale(0.5) 保持 rpx 映射。 - Skill: `backtocimacoppi/design-preview` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add backtocimacoppi/design-preview` - Raw SKILL.md: https://api.skillmd.com/api/skills/backtocimacoppi/design-preview/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: BackToCimaCoppi (https://skillmd.com/u/backtocimacoppi) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/backtocimacoppi/design-preview --- # 设计预览（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`。 1. **起本地服务**（指向 HTML 所在目录，后台运行，用 `--directory` 避免 `cd`）： ``` python3 -m http.server <端口> --directory "" ``` 端口取不常用值（如 8923）；同一会话可复用同一服务，不必每张图重起。 2. 浏览器工具若是 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" ``` 3. `tabs_context_mcp`（会话首次必做，拿 tab 上下文）→ `tabs_create_mcp` 新建或复用空 tab → `navigate` 到 `http://localhost:<端口>/<文件名>`。**文件名含中文必须 URL 编码**（如 `形态1a.html` → `%E5%BD%A2%E6%80%811a.html`）。 4. **截图自检**：`computer`(action:screenshot, save_to_disk:true) 抓一张，确认渲染正常 + **人机看同一张图**；异常（错位/空白/样式没生效）就改 HTML 重开，不把坏图丢给用户。 5. 告诉用户「已在 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:<端口>/ → 截图自检，异常自己修到正常再返回（**不要用 file://**，扩展打不开） - 返回：HTML 绝对路径 + 截图 + 一句话渲染自检结论 - 授权：只准写 {存放目录}，禁止改任何源码 ``` ### 浏览器兜底 子线程那侧若连不上浏览器扩展（权限 / headless），退化为：**子线程只出 HTML 并返回绝对路径，由主线程载入 chrome 工具弹窗 + 截图**。功能不变，只是弹窗动作改由主线程做。 ### 模型档位（质量优先，screenshot 自检是硬闸） > 出图是「照搬 wxml 结构 + 抄 scss 数值 + rpx 当 px」的**受约束转写**，不是写代码那种开放推理——低档模型的「推理弱」在这里影响小。但低档仍可能**转写错**（抄错数值/漏元素/布局译歪），靠 **screenshot 自检 + 人过目**当场抓（代码 bug 会藏，转写错肉眼可见）。质量的真正来源是这道验收闸，不是模型档位；档位只调速度。**拿不准就往高一档走。** | 出图类型 | 默认档 | 说明 | |---|---|---| | 极简结构纯还原（加载态/错误态/2 字段卡） | Haiku 可选 | 几乎没东西能错，截图一看便知；不放心就上 Sonnet | | 有真实布局的还原（数据卡/整页/名片） | **Sonnet** | 结构多、易译歪，求稳 | | 新 / 改形态、A/B 变体 | **Sonnet** | 含设计判断，绝不用 Haiku | | 极讲究的从零版式 | Opus | 临时出那一张 | --- ## 保真红线（违反即失真） 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 一致、可互相接力。 --- ## 触发后第一件事 确认「要预览哪个形态/页面」： - 上下文已明确（正在聊某形态）→ 直接对该形态走四步。 - 不明确 → 一句话问清是哪个形态/页面，再开工，不要默认。