# 提示词：把截图还原成页面

> 提供设计稿或网页截图，让智能体先拆解结构再实现，并通过截图对比逐项修正差异，适合快速还原落地页、卡片和后台界面。

## 适用场景

你手里有一张设计稿、一张竞品页面的截图，想把它做成可运行的页面。只说「按这个图写」，得到的通常是结构大致对、细节全错：间距、字号、颜色、响应式、悬停状态都靠猜。

要提高还原度，关键是三件事：先让智能体把图拆成结构清单；给它明确的技术约束；然后让它自己截图对比、列出差异再修正，把你从「肉眼挑刺」中解放出来。

## 模板

先把图片附上（在 Claude Code 里可以拖入窗口、用 Ctrl+V 粘贴，或者直接给出图片路径），再发送：

```text
这是【页面名称】的设计稿截图（见附图）。请用【技术栈，如 React + Tailwind / Astro + 原生 CSS】还原成页面，
放在【路径，如 src/pages/pricing.astro】。

约束：
- 只使用项目里已有的依赖、设计令牌和公共组件【列出文件，如 src/styles/tokens.css】；不要新增依赖。
- 颜色、字号、间距优先取令牌；令牌里没有的，先告诉我，不要擅自写死。
- 图片和图标用占位资源，写清楚尺寸，不要凭空生成素材。
- 使用语义化标签；可点击元素用 button 或 a；图片带 alt；表单控件带 label。
- 需要适配的宽度：375px、768px、1280px，不允许出现横向滚动条。

按这个流程：
1. 先不写代码。用文字拆解截图：整体布局、各区块从上到下的顺序、每个区块的组成、
   可复用的组件、需要的交互状态（悬停、聚焦、禁用、空状态）。等我确认。
2. 实现静态结构和样式。
3. 启动开发服务器，用浏览器截图工具对 3 个宽度分别截图，与设计稿逐区块对比，
   列出差异清单（间距、字号、颜色、对齐、圆角、阴影等），按重要性排序。
4. 修正差异。最多重复对比与修正 3 轮；仍无法对齐的，告诉我原因。
5. 汇报：完成了哪些、与设计稿仍有哪些差异、哪些地方是你猜的。
```

## 怎么用 / 怎么改

- **有设计令牌就一定要给。** 还原的最大偏差来自色值和间距。把令牌文件或 Figma 导出的变量一起附上，比任何描述都有效。
- **没有自动截图工具怎么办。** 官方最佳实践里提到，可以用浏览器截图和对比来验证界面改动，具体需要接入能截图的浏览器工具。没有的话，把第 3 步改成：智能体列出要检查的点，你自己打开页面逐项看，把不一致的地方再反馈给它。
- **复杂页面分块做。** 一次只还原一个区块（如导航栏、首屏、定价表），每块做完确认再进入下一块，比整页一次完成稳得多。
- **多张图的场景。** 桌面版、移动版、悬停状态分别附图，并在提示词里标注每张图对应什么状态。

## 常见问题或注意事项

- **它自己虚构了文案和图标。** 在约束里写「文案以截图为准，看不清的标出来问我」，避免它编造内容。
- **总是对不齐像素。** 追求像素级一致需要精确的尺寸标注和字体文件。如果设计稿只是示意，约定「视觉上一致即可」，把精力放在结构和响应式上。
- **颜色看起来偏。** 截图经过压缩，吸取的颜色不准。尽量要设计源文件里的色值。
- **改着改着破坏了已有的页面。** 约束里写明「只修改指定文件，公共组件如需改动先说明」，并在最后运行项目的类型检查和构建。