design-previewlisted

# 设计预览（design-preview） 一句话：**把一个 UI 形态还原成像素级 HTML，自动弹到用户 Chrome 里，让人对着真图评审，而不是看文字/ASCII。** 本 skill 是**沟通介质生产器**，不是拍板器——它只负责「出图 + 弹窗 + 迭代」；设计结论由调用方（主线程/总控子任务）落到对应文档。 --- ## 适用 / 不适用 | 适用 | 不适用 | |---|---| | 把已有页面形态 1:1 还原，供人确认「现状长这样」 | 需要可运行交互验证（长按菜单、登录链、网络请求）→ 用微信开发者工具/真机 | | 把拟改/新增形态做成效果图，对图拍板版式 | 要生成可部署的真实代码 → 那是施工（T7），不是预览 | | 多变体 A/B 并排比对 | — | **核心保真承诺**：与代码**同源**。读真值源还原，不凭记忆画、不引 v0/Figma/Lovable 等凭空生成器（它们会偏离真值 scss）。 --- ## 核心流程（四步） ### Step 1 — 定位真值源 - **小程序**：找到目标形态对应的页面 `.wxml`（结构）+ `.scss`（视觉）。已有形态→照搬；新/改形态→以**同源 scss** 为视觉基准改，确保和现状同风格。 - **Vue / React / H5**：找对应组件源 + 样式文件。 - 拿不准结构或视觉细节，**先读代码**，不要凭记忆画。涉及多形态/多 objectType 分支时，逐个 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://