那些截图里的秘密——独立开发者的 AI 视觉觉醒

一张模糊的截图，一个尴尬的下午

林远盯着微信对话框里的图片发呆。

那是用户"海风"发来的 bug 反馈——一张手机屏幕截图，画面里是一个报错弹窗。但问题来了：截图分辨率太低，文字糊成一团，关键信息根本看不清。

"能再截一张清楚点的吗？"林远敲过去。

五分钟过去了。十分钟过去了。没有回复。

林远叹了口气。这种情况他太熟悉了。作为一个独立开发者，他一个人扛着产品"小众清单"的全部工作——开发、运营、客服、市场。用户反馈是他最宝贵的信息来源，但收集有效信息的过程常常让他头大：

• 截图模糊，看不清报错内容

• 用户描述不清，"反正就是点不了"

• 需要反复追问，一来一回就是半小时

• 有时候追问完，用户已经没耐心了

他曾经想过做一个反馈表单，让用户填写设备型号、系统版本、操作步骤。但填表的用户越来越少——大家都懒，能截图就不打字。

"要是 AI 能直接看懂截图就好了。"林远心想。

意外发现：Claude 竟然能"看见"

那天晚上，林远在研究 Anthropic 的官方文档时，发现了一个他之前忽略的章节：Vision。

文档里说，Claude 3 系列模型支持图像输入。不仅支持，还能理解图片内容、提取文字、分析图表。

"等等，这不就是我一直想要的功能吗？"

他点开官方示例仓库 claude-cookbooks，找到了一个名为 getting_started_with_vision.ipynb 的教程。示例代码很简单：

import base64

from anthropic import Anthropic

client = Anthropic()

with open("screenshot.png", "rb") as image_file:

base64_string = base64.b64encode(image_file.read()).decode("utf-8")

message = client.messages.create(

model="claude-sonnet-4-6",

max_tokens=1024,

messages=[{

"role": "user",

"content": [

{

"type": "image",

"source": {

"type": "base64",

"media_type": "image/png",

"data": base64_string

}

},

{"type": "text", "text": "这张截图里的报错信息是什么？"}

]

}]

)

print(message.content[0].text)

就这么简单？林远有点不敢相信。

动手试试：从模糊截图里提取信息

林远决定用那张困扰他一下午的模糊截图来测试。

准备工作：确保已安装 Python 和 Anthropic SDK，并设置好 API Key：

pip install anthropic

export ANTHROPIC_API_KEY="your-api-key"

他先把截图保存为 bug_screenshot.png，然后跑了一遍代码。

几秒钟后，AI 返回了结果：

这张截图显示的是一个错误弹窗，位于应用界面中央。弹窗标题为"操作失败"，内容文字为"网络连接超时，请检查网络设置后重试"。下方有一个"确定"按钮。从界面元素判断，这是一个 iOS 应用的报错提示。

林远愣住了。

那张图他看了好几遍都没看清楚，AI 居然能把关键信息都提取出来。网络超时——这就对上了用户之前说的"点了没反应"的问题描述。

"这不就是我一直需要的吗？"

他又试了几张之前的用户反馈截图，效果都很惊艳：

• 一张低质量的收据照片，AI 完整识别出了商家名称和金额

• 一张竞品的功能截图，AI 分析出了交互逻辑

• 一张他自己的代码截图，AI 指出了第 47 行有个语法错误

"代码截图也能看？这也太强了吧。"

更进一步：让 AI 分析得更准

林远继续翻看 cookbooks，发现了一个重要技巧：用 prompt engineering 提升准确度。

官方示例里有个案例——让 AI 数图片里的狗有多少只。直接问会出错，但如果加上一段引导：

prompt = """你拥有完美的视觉能力，非常擅长数图片中的物体。

在回答之前，请先在 <thinking> 标签里逐步分析图片的每个区域，

然后在 <answer> 标签里给出最终答案。"""

加上这段 prompt 后，AI 的准确率显著提升。

林远把这个技巧用到了自己的场景。他写了一个专门分析 bug 截图的 prompt：

def analyze_bug_screenshot(image_path):

with open(image_path, "rb") as f:

base64_string = base64.b64encode(f.read()).decode("utf-8")

response = client.messages.create(

model="claude-sonnet-4-6",

max_tokens=2048,

messages=[{

"role": "user",

"content": [

{

"type": "image",

"source": {

"type": "base64",

"media_type": "image/png",

"data": base64_string

}

},

{"type": "text", "text": """你是一个专业的技术支持助手。

请分析这张 bug 截图，按以下格式输出：

1. 错误类型：[错误类型]

2. 错误信息：[完整错误信息]

3. 可能原因：[列出 2-3 个可能原因]

4. 建议操作：[给用户的排查建议]

如果截图模糊，请尽量提取你能识别的信息。"""}

]

}]

)

return response.content[0].text

效果立竿见影。现在用户一发截图，他就能快速得到结构化的分析结果。

几点注意事项：

1. 图片格式：支持 PNG、JPEG、GIF、WebP，单张图片最大约 20MB

2. 图片质量：分辨率越高越好，太模糊可能识别不准

3. 多图限制：单次请求最多 20 张图片

4. 费用计算：图片会按 token 计费，复杂图片消耗更多 token

还有更多玩法

林远发现，Vision 能力不止于识别 bug 截图。

分析竞品截图。他把竞品 App 的界面截图喂给 Claude，让它分析交互流程、功能布局、设计风格。"帮我看看这个竞品的搜索功能是怎么设计的？"——几秒钟就能得到答案。

解读数据图表。运营群里经常有人发数据报表截图，问"这周数据怎么样？"现在他可以直接让 AI 读图分析，省去了手动录入数据的麻烦。

多图对比。一次可以传入多张图片，让 AI 做对比分析。"这两版设计稿有什么区别？"——直接得到答案。

官方文档里还有个有趣的例子：把一张长收据分成两张图片传入，AI 能自动拼接识别出完整内容。

messages=[{

"role": "user",

"content": [

{"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": image1_base64}},

{"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": image2_base64}},

{"type": "text", "text": "请识别这两张图片里的完整信息"}

]

}]

从"看得懂"到"动得了"

那天晚上，林远在他的开发日志里写道：

今天发现了一项新能力：让 AI "看见"。 以前用户发截图，我只能干着急。现在 AI 能帮我解读，省下了大量追问的时间。 但还缺一点。用户的问题往往不只是"看"，还需要"查"——查数据库、查日志、查配置。截图里说"数据不对"，但我还得自己去数据库翻。 要是 AI 能直接帮我查数据就好了……

林远不知道的是，这个愿望在 Cookbooks 里已经有了答案。下一章，他将解锁 AI 的第二项能力：Tool Use。

让 AI 不只是看，还能动手。

代码参考

本文涉及的完整代码已上传至 GitHub 仓库：https://github.com/anthropics/claude-cookbooks/tree/main/multimodal

核心示例：

• getting_started_with_vision.ipynb - Vision 入门教程

• best_practices_for_vision.ipynb - Vision 最佳实践

• reading_charts_graphs_powerpoints.ipynb - 图表与文档分析

下期预告：用户说"数据不对"，林远得自己去数据库查。直到他发现 AI 可以直接写 SQL……

本文属于「独立开发者的 AI 分身进化论」系列，记录一个独立开发者如何逐步解锁 Claude API 的各项能力。