design-preview

设计预览（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 写清，别让人把提案误认成现状。