高保真演示 Demo 制作技能（demo-mirror）
适用场景
- 客户现场/远程演示，不方便拿出真机或启动完整环境，用网页顶一下
- 对外路演、招商、汇报，需要「能力和效能拉满的运行态」静态呈现
- 走查验收：以 demo 形式冻结某一版本的产品界面状态
核心铁律（违反任何一条即返工）
- 镜像，不是创作：demo 的每一个页面必须对应生产代码里的真实页面（真实路由、真实组件结构、真实文案口径）。禁止「根据自己的理解」设计生产里不存在的界面。
- 先修生产，再镜像：如果演示需要的界面在生产里不存在（缺页/缺入口），必须先在生产代码里把页面/端点补齐，再在 demo 里镜像它。demo 绝不超前于生产。
- 三同源：
- 结构同源——页面骨架、导航、布局参数（栏宽/圆角/间距）抄自生产组件；
- 视觉同源——色值/字体/阴影抄自生产设计 tokens，不自创配色；
- 数据同源——演示数据取自生产种子/配置（seed、bundle、preset、围栏规则等），两终端数值一致；禁止瞎编数值。
- 双端双格式：产出物固定为 4 件——PC 端 HTML、移动端 HTML、PC 端静态 PDF、移动端静态 PDF（PDF 由 HTML 逐视图无头截图合成，每视图一页）。
- 可点击：HTML demo 的导航、Tab、审批手势、按钮必须可点并有状态反馈（toast/状态翻转），不做死图。
方法（固定六步）
Step 1 · 盘点真实渲染面（不写一行 demo 代码前必须完成）
- 列出生产前端全部路由与页面（如 App.tsx 的 Route 表）
- 读外壳组件（布局/顶栏/导航/品牌位）与主题 tokens（色值、语义色、字号阶梯）
- 读每个页面的区域构成与关键组件（消息族、卡片、表格、手势）
- 读数据源：seed 脚本、bundle 配置、preset/围栏/技能清单，提取演示人设与工作区数据
Step 2 · 补齐生产缺口
- demo 需要的界面若生产没有 → 先开发生产页面并接入真实端点，注册路由与入口
- 生产改动必须通过生产自身的 typecheck / test 门禁后才进入下一步
Step 3 · 逐页镜像（PC）
- 纯 HTML+CSS+JS 单文件（无外部依赖、无 CDN），手写与生产 tokens 等价的 CSS
- 页面切换对应真实路由；每个视图标注其生产路由出处（如
P2 · /p2/:threadId） - 支持 hash 直达（
#p1…#pN），供逐页截图与走查
Step 4 · 逐屏镜像（移动端）
- 以生产的移动端面孔页面为基准（而非把 PC 页缩小）
- 手机壳 + 底部 Tab；同样支持 hash 直达（
#xxx） - 数据与 PC 端完全同源、数值一致
Step 5 · 验收（机器可证，不凭感觉）
- 无头浏览器逐视图截图，逐张人工自查观感（布局/对比度/穿帮文案）
--dump-dom验证每个视图内容真实渲染（非空、关键文案在场）- 多视图截图做哈希去重校验，确认切换真实生效
- 检查 Console 无脚本错误；emoji 方框等截图机字体问题需甄别（非 bug 不返工）
Step 6 · 产出与归档
- 4 件产出物命名：
{项目}-demo-pc.html、{项目}-demo-mobile.html、{项目}演示-PC端.pdf、{项目}演示-移动端.pdf - HTML 归入仓库
docs/demo/随版本演进；PDF 作为一次性交付物 - 维护纪律：生产加新页 → demo 跟着加镜像；生产改设计 tokens → demo 同步换色值。demo 永不独自演化
输出契约
- 每次交付必须附：视图↔路由对照表、数据来源说明（哪个种子/配置）、验收证据（截图清单）
- 禁止交付「生产里不存在的能力」；若客户要求演示未实现能力，必须显式标注「规划中」而非伪装成已有
- PDF 每页 = 一个视图的完整静态截图，顺序按用户真实操作动线排列
边界（什么不做）
- 不做与生产无关的「更炫」的视觉发挥
- 不在 demo 里编造生产数据以外的业务数字
- 不用截图冒充可交互界面（HTML 必须可点）；也不用静态图冒充视频