UI Design Preview

独立的交互预览与多设备对照技能。页面制作、视觉批准和真实业务验收分别记录。不要把桌面截图缩小后冒充移动布局。

When to use

用于已有 UI 的交互预览、Phone / Pad / Desktop 布局比较、深浅主题对照、操作同步和可携带静态交付。

How to use · Workflow

1. 读取已有页面、批准规格、视口和输出位置，保护未提交修改。先备份当前实现，不重复创建产品需求。
2. 整体复制 完整案例 所在目录。当前实现使用 React、Ant Design 和 Ant Design Mobile；源码与构建产物都在包内。
3. 在 frontend/src/data.js 注册场景，在 store.js 管理共享状态；设备采用独立固定逻辑视口，外层只调整展示缩放。布局可不同，功能入口必须一致。
4. 执行 python3 serve.py --port 8872，打开输出地址。当前静态产物可直接运行，不依赖 Node 服务器或 CDN。修改源码时在 frontend 执行 npm ci 和 npm run build。
5. 实际操作两端：导航、弹窗、文本、枚举、开关、演示保存；关闭联动独立编辑，重新开启采用最近操作端。敏感凭据和文件内容不共享，不回放真实业务写操作。
6. 在已安装 Playwright / Chrome 的环境运行 python3 frontend/verify_antd.py --url <当前评审地址>。核验构建产物，而非只检查开发服务器。新项目更新断言后再验收，不沿用案例通过结果。
7. 验证通过后运行 frontend/publish.mjs 发布静态入口；更新 SHA256SUMS。交付入口、源码、构建产物、场景清单、截图及实际验证边界。

操作合同