浏览 AI 知识库
给 AI 一张截图，怎样还原响应式网页而不是固定像素图
根据截图还原网页，目标不是只在 1440px 下像原图。先读容器、网格、断点和内容变化，再用多个宽度对照，页面才不会一缩就散。
沿完整工作流推进
前一阶段的可检查结果，是下一阶段的输入；中间证据不足时停在当前阶段。
桌面截图还原得很像，窗口一变窄却全挤在一起
AI 按 1440px 截图用绝对定位还原首页，桌面看着接近；窗口缩到 1100px 后按钮压住标题，390px 时页面出现横向滚动。
- 布局关系而非坐标被还原
- 多个中间宽度已检查
- 真实内容不会撑破容器
先确认这次任务的起点、边界和交付
| 需要确认 | 本例内容 |
|---|---|
| 现有材料 | 桌面截图一张、手机截图一张、现有品牌字体和真实页面内容；目标组件为导航、首屏和六个入口。 |
| 不能越过的边界 | 从布局关系推断网格和断点，不逐像素描摹；未知交互标注；图片、字体和文案用项目真实资产。 |
| 要交付的结果 | 布局规格、响应规则与截图对比 |
从“确认参考条件”走到“多宽度截图比对”
| 当前阶段 | 实际处理 |
|---|---|
| 确认参考条件 | 记录截图尺寸、设备像素比、浏览器、字体和素材授权，区分真实资产与占位图。 |
| 拆出版心和网格 | 测量最大宽度、列关系、间距和对齐线，用 min/max、grid、flex 和比例表达。 |
| 定义组件与状态 | 识别导航、列表、表单、卡片和内容块，补加载、空、错误、焦点和交互状态。 |
| 决定响应变化 | 为窄屏明确换行、折叠、滚动、隐藏和触控尺寸，不按桌面页面整体缩小。 |
| 多宽度截图比对 | 在桌面、平板和手机检查像素差异、文字溢出、水平滚动、素材和交互。 |
桌面截图的 1200px 版心不能直接缩成手机页面
| 元素 | 桌面观察 | 窄屏规则 | 验收 |
|---|---|---|---|
| 内容版心 | 最大约 1200px，左右留白 | 宽度 calc(100% - 32px) | 390px 无横向滚动 |
| 双栏内容 | 主内容 + 280px 侧栏 | 改为单列，目录折叠 | 侧栏内容仍可访问 |
| 表格 | 列完整显示 | 容器内滚动或改卡片 | 页面本身不被撑宽 |
| 按钮 | 桌面紧凑排列 | 触控目标至少 44px | 键盘焦点和触控可见 |
把截图和现有项目交给 Agent，先还原约束再写页面
适合截图还原任务，要求Agent检查真实素材和多宽度布局，而不是猜固定像素。
可复制使用
把截图和现有项目交给 Agent，先还原约束再写页面
请先测量这张参考截图和当前项目，再实现指定页面。截图是视觉证据，不是让你脱离现有组件库另起炉灶。 参考截图/视口尺寸【】；目标页面和必须匹配的区域【】；现有运行方式/组件/字体图片资产【】；交互要求【】。 先报告截图中可确认的网格、间距、字体层级、控件状态和窄屏变化，并把看不清的内容列为未知。实现时复用仓库现有模式，只改任务所需文件。完成后在参考宽度和手机宽度各截图，对照指出真实差异；不能运行浏览器或缺少素材时如实报告，不用固定绝对定位伪装响应式。
使用范围：适合截图还原任务，要求Agent检查真实素材和多宽度布局，而不是猜固定像素。不手绘已有图标，不用固定绝对定位冒充响应式布局，不改无关全局样式。
完成后的布局规格、响应规则与截图对比
布局规格写出最大宽度、两列比例、卡片最小宽度和 768px 断点；实现使用 Grid 与 minmax。1440、1024、768、390px 截图对比均无重叠和横向滚动，差异记录保留。
为什么“两个目标宽度相似，中间宽度仍崩”还不能交付
两个目标宽度相似，中间宽度仍崩
- 原因
- 只针对截图宽度写媒体查询
- 怎么改
- 连续拖动视口并检查内容驱动断点，用最小/最大约束替代固定像素