怎么让 AI 按截图改界面？

06-02 怎么让 AI 按截图改界面？

课程定位

这一课讲截图反馈。很多界面问题靠文字很难说清楚，截图能把“哪里不舒服”直接摆到桌面上。

截图反馈的关键，是让 AI 看见画面，同时告诉它具体改哪里、保留哪里、改完怎么比较。

这一课的成果是一份「截图反馈记录」。

本课目标

• 能截取当前页面。
• 能在截图旁边标注问题。
• 能说明想保留的区域。
• 能让 AI 先列界面修改计划。
• 能改完后重新截图对比。

录制建议

• 建议时长：20 到 30 分钟。
• 现场截一张第一版页面。
• 用简单标注：圈出、编号、文字说明。
• 每次截图反馈只处理 1 到 2 个问题。
• 收尾做修改前后截图对比。

课前准备

• 第一版项目页面。
• 截图工具。
• 修改反馈卡。
• AI 工作台工具。
• assets 文件夹。

讲稿正文

可以这样开场：

“有时候你说‘这里看起来怪怪的’，AI 很难知道你指哪。截图的价值，就是把感觉放到画面上。”

截图反馈分五步。

第一，截当前页面。

截图要包含要修改的区域。比如输入区、按钮区和结果区都要在画面里。

第二，标注问题。

标注不用专业。可以用编号：

1. 输入提示太靠上
2. 按钮文案不够明确
3. 结果区和按钮距离太近

也可以用文字框图说明：

+-----------------------------+
| 标题                         |
| 1 输入提示需要更清楚          |
| [ 输入框 ]                   |
| 2 按钮文案改成“转换为表格”    |
| [ 按钮 ]                     |
| 3 结果区增加说明              |
+-----------------------------+

第三，说明保留部分。

比如转换逻辑保持稳定，整体布局保持两段式，颜色先不改。

第四，让 AI 先给计划。

AI 要说明它准备改哪些文件、改哪些样式或文案。

第五，改完后重新截图比较。

修改后截图和修改前截图放在一起，看目标是否达成。

最后收束：

“截图反馈像拿着照片和木匠沟通。你指给它看，它就更容易知道下一刀落在哪里。”

屏幕演示流程

1. 打开当前页面。
2. 截取页面截图。
3. 用编号标注 2 个界面问题。
4. 把截图说明交给 AI。
5. 让 AI 复述问题和保留区域。
6. 让 AI 给修改计划。
7. 确认后执行修改。
8. 刷新页面并重新截图。
9. 对比前后截图，保存反馈记录。

给 AI 的协作卡

我想根据截图做一次界面小修改。

截图里的问题：
1. 【问题一】
2. 【问题二】

希望效果：
【描述希望变成什么样】

需要保留：
【哪些布局、功能、文案或颜色保持稳定】

请先复述你看到的问题，再说明准备修改哪些文件。
改完后请告诉我应该如何截图对比验收。

截图反馈记录

• 修改前截图：
• 标注问题：
• 希望效果：
• 保留区域：
• AI 修改计划：
• 修改文件：
• 修改后截图：
• 对比结论：

课堂练习

让学员对自己的项目页面做一次截图反馈。

要求：

• 截图里最多标注 2 个问题。
• 必须写清保留区域。
• 修改后重新截图对比。

常见卡点

• 截图范围太小：重新截包含上下文的画面。
• 标注太模糊：用编号和短句说明。
• AI 改动过大：要求它只处理截图标注的问题。
• 改完后靠印象判断：保存前后截图对比。

课后作业

完成一次截图反馈修改。

提交内容：

• 修改前截图。
• 标注说明。
• 修改后截图。
• 对比结论。

课件页建议

• 第 1 页：截图把感觉放到画面上
• 第 2 页：截图反馈五步
• 第 3 页：编号标注示例
• 第 4 页：保留区域很重要
• 第 5 页：前后截图对比