企业级双端高保真交互 Demo 生成器

解决什么问题

做客户演示时，线框图和中保真原型常常撑不住信任：页面能看，但像没做完；数据像占位符；移动端、管理端、高管端各写一套，交互和权限状态也不稳定。这个技能把高保真 H5 原型生成约束成一套可复用的工程规范，适合需要快速给出企业级双端 Demo 的场景。

技能如何工作

核心不是堆页面，而是先定义设计令牌和状态层：

• variables.css 放颜色、间距、字体、圆角等 token，后续 base.css、h5.css、admin.css、exec.css 依赖它。
• store.js 负责 seed、reset、角色权限和页面数据，utils.js 承载 AI 模拟、意图匹配等工具。
• h5.html 先跑移动端主流程，包含 TabBar、路由守卫、弹窗、预警横幅和 AI 结果卡片；admin.html 作为可选 PC 管理端。
• 桌面预览时自动套手机模拟器边框，用 safe-area-inset 处理刘海和底部遮挡。

它强调高保真三件事：视觉一致、交互完整、数据可信。动画优先用 CSS transition，状态尽量落到 localStorage，避免临时假页面。

适用边界

适合售前演示、内部评审、方案汇报和快速验证业务流程；不适合直接当成生产前端交付。若客户现场网络受限，需要先准备本地 vendor 资源或离线镜像。若业务强依赖后端、SSO、复杂图表或实时协作，这个技能只能给出高保真外壳，不能替代真实服务与权限体系。