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

<!doctype html>
<html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>布局教学</title>
<style>
*{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:#172c46;font:18px/1.6 system-ui,sans-serif}
.page{width:min(1200px,calc(100% - 32px));margin:32px auto}
.hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;margin-block:32px 24px}
.hero section,.hero aside{padding:32px;border-radius:12px;min-width:0}
.hero section{background:#d9ebff}.hero aside{background:#e4e7ef}
h1{font-size:clamp(27px,3vw,38px);line-height:1.3}h2{font-size:24px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cards article{padding:24px;background:#fff;border:1px solid #cbd5e1;border-radius:10px;min-width:0;overflow-wrap:anywhere}
@media(max-width:767px){.hero{grid-template-columns:1fr}.hero section,.hero aside{padding:24px}.cards{grid-template-columns:1fr}}
</style>
<main class="page"><header><strong>教学参考 · Learning Lab</strong></header>
<div class="hero"><section><h1>把学习变成一次实践</h1><p>先选一个任务，再检查你做出的结果。</p></section>
<aside><h2>本周任务</h2><p>整理资料 · 制作目录</p></aside></div>
<div class="cards"><article>1 · 搜索资料</article><article>2 · 整理文件</article><article>3 · 核对来源</article><article>4 · 做出草稿</article><article>5 · 验证结果</article><article>6 · 记录改进</article></div></main></html>

请先测量这张参考截图和当前项目，再实现指定页面。截图是视觉证据，不是让你脱离现有组件库另起炉灶。

参考截图/视口尺寸【】；目标页面和必须匹配的区域【】；现有运行方式/组件/字体图片资产【】；交互要求【】。

先报告截图中可确认的网格、间距、字体层级、控件状态和窄屏变化，并把看不清的内容列为未知。实现时复用仓库现有模式，只改任务所需文件。完成后在参考宽度和手机宽度各截图，对照指出真实差异；不能运行浏览器或缺少素材时如实报告，不用固定绝对定位伪装响应式。