高保真 UI 构建

问题从哪来

移动端 H5 常见两种翻车：一是把海报、活动页这类已确认的固定构图硬套成通用响应式卡片流，视觉关系全变；二是在修一个小交互时顺手全局改 CSS、重排 DOM，把别处已验收的界面一起带崩。本技能针对的是：既要真机上的高保真呈现，又要在局部改动时守住「已确认 UI」这条契约。

技能如何组织工作

核心是六步工作流，并在动手前强制读项目规则、前端结构与 Git 脏状态。

1. 建立视觉契约：记录参考视口、设计画布尺寸、首屏构图、元素固定关系、必须像素级一致的素材，以及动态字段的最长预期值；已有项目先抓当前布局，必要时用 scripts/check-change-scope.js 做快照。
2. 选定适配架构：按页面/大区分为三类——固定构图展示（固定画布 + 比例缩放）、运营 H5（原生响应式）、混合（仅缩放展示区，其余响应式）。不整页缩小密集表单，也不把确认过的海报式构图随意 reflow 成通用移动栈。
3. 高保真结构实现：用语义化 HTML/CSS/组件还原，禁止整页截图当实现；先 desktop 参考构图对齐源稿，再加移动适配；固定构图用页面根选择器（如 #homePage .event-card）隔离通用移动规则。
4. 保护局部改动：改前写清一句话需求、允许文件/选择器、受保护契约，并快照；若 diff 超出声明边界则 STOP 并征得确认。改后核对 diff 范围与受保护布局检查。
5. 移动端细节兜底：把问题当具体布局/交互缺陷处理，而非重设计许可；引用已验证模式（安全区、tap 区扩展、动态跑马灯时长、min-width: 0 等）。
6. 交付前验收：多宽度（如 430/390/375/360/320）、长文案/空数据/极值、触控与固定头、横向溢出；有条件用浏览器或 Playwright 截图比对结构与交互，不只看页面能否打开。

捆绑脚本 check-change-scope.js 与 audit-layout-risks 分别用于变更范围约束与布局风险清单；references/ 下有多份决策与模式文档供选型与复盘。

适用边界

• 未经用户明确确认，不得重设计、重排已确认 UI；改固定构图前必须经过检查点。
• 固定画布在目标宽度上若持续溢出/留白，应评估高度补偿或对该区域改用响应式，而非强行缩放。
• 局部修复若牵出无关模块，应收窄选择器、保持 DOM 形状；仍无法满足则停止并报告耦合，不要静默扩大改动面。