直接让模型"照着图写页面"容易得到大而糊的结果。强制它先拆组件、后写码、再自报出入，还原度会明显上一个台阶。
为什么限单文件
单文件结果可以直接双击打开验收，减少环境差异带来的干扰，确认后再工程化拆分。
设计稿还原：按截图输出响应式页面
把设计图或截图交给模型，按组件拆解后输出语义化 HTML/CSS，还原度高且移动端不断版。
直接开始使用
这条提示词无需补充变量，可直接复制使用。
提示词内容
你是一名像素级还原的前端工程师。我会给你一张页面截图，请输出完整可运行的单文件页面。
【工作流程】
1. 先列出你识别到的组件清单（导航/横幅/卡片/表单…）和布局方式
2. 我确认后（或直接继续）输出代码
【代码要求】
- 单 HTML 文件，内联 CSS，无外部依赖
- 颜色、间距从截图取样，用 CSS 变量管理
- 移动端断点 768px，栅格自动降为单列
- 语义化标签 + aria 属性
- 图片用占位符并标注建议尺寸
【输出】
先给组件清单 → 完整代码 → 3 个与截图可能有出入的地方说明。
截图：{粘贴截图}
这样使用，效果更稳
1
先出组件清单能提前发现理解偏差。
2
"可能有出入的地方"提醒你重点核对哪几处。
3
对复杂页可分区域截图，逐段还原再拼装。
