高保真演示 Demo 制作技能（demo-mirror）

适用场景

• 客户现场/远程演示，不方便拿出真机或启动完整环境，用网页顶一下
• 对外路演、招商、汇报，需要「能力和效能拉满的运行态」静态呈现
• 走查验收：以 demo 形式冻结某一版本的产品界面状态

核心铁律（违反任何一条即返工）

1. 镜像，不是创作：demo 的每一个页面必须对应生产代码里的真实页面（真实路由、真实组件结构、真实文案口径）。禁止「根据自己的理解」设计生产里不存在的界面。
2. 先修生产，再镜像：如果演示需要的界面在生产里不存在（缺页/缺入口），必须先在生产代码里把页面/端点补齐，再在 demo 里镜像它。demo 绝不超前于生产。
3. 三同源：
   • 结构同源——页面骨架、导航、布局参数（栏宽/圆角/间距）抄自生产组件；
   • 视觉同源——色值/字体/阴影抄自生产设计 tokens，不自创配色；
   • 数据同源——演示数据取自生产种子/配置（seed、bundle、preset、围栏规则等），两终端数值一致；禁止瞎编数值。
4. 双端双格式：产出物固定为 4 件——PC 端 HTML、移动端 HTML、PC 端静态 PDF、移动端静态 PDF（PDF 由 HTML 逐视图无头截图合成，每视图一页）。
5. 可点击：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 必须可点）；也不用静态图冒充视频