给 AI 一张截图，怎样还原响应式网页而不是固定像素图

截图是一个视口的结果，不是布局规格

先从截图提取版心、网格、对齐、间距、字体、素材和组件状态，再用响应式约束实现。固定像素照抄只会在另一个宽度崩掉。

确认参考条件

记录截图尺寸、设备像素比、浏览器、字体和素材授权，区分真实资产与占位图。

把涉及的文件、目录、版本、命令和实际输出写进记录；代码变化同时保留 diff 与测试结果。

拆出版心和网格

测量最大宽度、列关系、间距和对齐线，用 min/max、grid、flex 和比例表达。

确认“拆出版心和网格”已经有可回查结果，再进入“定义组件与状态”；依据仍然来自猜测时，把缺口单列并停在当前步骤。

定义组件与状态

识别导航、列表、表单、卡片和内容块，补加载、空、错误、焦点和交互状态。

确认“定义组件与状态”已经有可回查结果，再进入“决定响应变化”；依据仍然来自猜测时，把缺口单列并停在当前步骤。

决定响应变化

为窄屏明确换行、折叠、滚动、隐藏和触控尺寸，不按桌面页面整体缩小。

确认“决定响应变化”已经有可回查结果，再进入“多宽度截图比对”；依据仍然来自猜测时，把缺口单列并停在当前步骤。

多宽度截图比对

在桌面、平板和手机检查像素差异、文字溢出、水平滚动、素材和交互。

需要修改时先限定文件和行为范围，无法说明回滚方式或影响面的动作先不执行。 完成后把证据归入“布局规格、响应规则与截图对比”。

验收要看约束是否成立

布局规格、响应规则、资产映射和多宽度截图一起交付。只在参考截图尺寸相似、其他宽度变形的页面不能算还原完成。