布局与视口

精准还原

先记下参考图对应的视口尺寸或已知的像素尺寸、画面的完整范围，以及哪些区域是固定不动的。图片的像素数不等于视口尺寸，例如 2 倍图要除以 2；确定不了时，写明你是按什么假设的。

对准主要区域的横向栏宽比例、对齐轴线、色板与字号对比关系，先把整体构图、气质和字体层级立住，再处理边框、阴影和细节；还原任务不重新发散风格。

参考图（尤其是整页长图或设计草图）常在纵向压缩了区块之间的留白，小字也可能带有乱码伪字或占位词。实现为真实代码时，不要死抠纵向像素坐标去一比一描红：长页各模块上下内边距按真实网页呼吸感自然舒展（如桌面区块 padding-block: clamp(88px, 9vw, 136px)），工作台去掉外围窗口装饰框并保持舒适的卡片内边距；文案在保持原有字号层级与节奏的前提下润色为规范简体中文，彻底清除任何非汉字伪字与生硬占位符。每轮修改后直接查看真实视口截图与参考图对照构图和细节，不调用截图工具的 --compare 做像素网格差分，补齐窄屏与必要交互状态。

响应式与验证重点

设备范围以产品事实为准：任务明确单端或固定视口时，只验指定范围；否则先在主视口真实操作到主要结果，再在另一端代表视口看主要状态，实际阅读正文，确认主动作可见可点。需要两端都完成同一流程时才各走一遍，不默认重复整条路径。检查文字、溢出和遮挡；有问题在原视口修复并复查，不用增加截图代替修复。

再补一个最复杂或最危险的状态：从最长内容、空内容、错误与恢复，以及本次改动涉及的状态中，选最可能破坏阅读或主操作的一项。它若已包含在代表状态中，不再重复取证。除任务或专项规范明确要求外，不展开全语言 × 全页面 × 全状态矩阵；某种语言、页面或状态确会改变布局或操作结果时，只把风险最高的那一项纳入补验。

项目明确支持的典型宽度仍按项目要求检查；除此之外，只有下列风险存在时，才增加对应的视口或连续操作；通过后就停止扩展：

• Canvas / 手势：实际绘制、拖动或触摸一次，检查画面非空、坐标跟手，页面不会被手势意外锁住。
• 复杂多栏：在窄屏检查重排后的阅读与操作顺序，以及各栏是否仍可读、可滚动。
• 弹窗 / 虚拟键盘：在手机上聚焦输入框并弹出键盘，检查焦点、关闭方式和主操作可见可点；再检查视口高度变化和安全边距，键盘或固定栏不能挡住主操作。
• 多屏 App：沿主要导航连续走至少两屏并返回，检查当前位置与返回后的状态是否正确、主操作是否仍可用。
• 壳内滚动：分别在页面与内部容器滚动，确认滚动落在该滚的区域，没有双滚动条或卡死。
• 特殊视口：只在用户指定尺寸、横竖屏切换、安全区、缩放或动态高度影响结果时，补对应视口；放大或重新排版后，阅读和操作顺序仍须清楚。