测试工程师的 AI 截图转网页代码实战：一次完整的改进过程
这是一个虚构但很典型的案例：刘哥是一位负责功能测试、接口测试和回归测试的 QA，最近手头在忙“完成会员中心 2.3 版本功能测试”，同时还要准备“执行支付链路回归测试”。这次刘哥需要整理一份给项目经理的测试报告，决定试试 AI 截图转网页代码。
背景
对刘哥来说，需求变化快，测试用例、缺陷报告和测试报告要反复写，边界场景还容易漏。偏偏这次还遇到一个变数：提测时间延后两天，回归时间被压缩。测试报告需要尽快交给项目经理，时间并不宽裕。
第一次尝试：问题出在哪
刘哥一开始只写了一句话：
帮我写一份关于“会员中心新版本的测试策略”的测试报告。
结果 AI 给出的内容四平八稳却用不上。复盘下来，主要有两个问题：
- 截图模糊或只截了一部分。
- 一次要求完美还原。
改进后的提示词
刘哥按照截图转代码的思路重写了提示词，核心是说明目标技术栈：
这是一张测试工程师需要实现的页面截图。请：
1. 先用列表描述页面结构（区域、组件、排列方式）；
2. 用 HTML + CSS 实现这个页面，不使用外部库；
3. 布局需要在手机宽度下也能正常显示；
4. 图片用灰色占位块代替，文字用截图中的内容；
5. 代码中为每个区域加简短注释。
结果（示意）
下面的效果为虚构演示，用来说明这类改进通常带来的变化：
示例（虚构）：一位开发者把手绘的登录页草图拍照上传。AI 先描述“顶部标题、两个输入框、一个按钮、底部注册链接”，然后生成了一份响应式的 HTML/CSS。运行后他只调整了按钮颜色和字体大小，就得到了可以演示的原型。
拿到结果后，刘哥没有直接转发，而是对照原始资料逐条核对，再补上 AI 不知道的背景。
复盘：这次用到的方法
- 要求 AI 先描述它识别到的布局结构，再生成代码。
- 在本地运行生成的代码，与截图对比差异。
- 针对差异逐项提出修改要求，比如间距、颜色、响应式。
- 提供清晰、完整的截图，复杂页面可以分区域截图。
之后刘哥发现，同样的方法也适用于另一类场景：从截图中提取表格、表单等结构。
复盘时刘哥还想到一个问题：复刻别人的网站合法吗？答案是：用于学习通常没问题，但直接复制他人设计和素材用于商业用途可能涉及侵权。
给测试工程师的提醒
把需求文档原文给 AI，让它按等价类、边界值、异常流分别列用例。AI 列出的用例只是候选清单，覆盖是否充分仍要结合需求和历史缺陷人工把关。另外，对话里不要出现测试账号密码、生产数据和未公开的版本信息。
一个额外的小技巧：把常用的组件代码保存下来，形成自己的组件库。
可以复用的经验
这个案例里最值得复用的，不是某一句提示词，而是“先说清背景和标准，再看结果、再修正”的习惯。下次遇到“推动高优先级缺陷关闭”这类任务，同样适用。