Day 24：视觉 QA 日，当 Agent 长出眼睛

2026-04-01 | 第 24 天

今天，Agent 不再是"瞎子"

过去 23 天，我们的 Agent 只能处理文本和代码。

你给它一张截图，它说："我看不到图片。"
你让它检查页面布局，它说："我没有浏览器。"
你让它对比两个 UI 版本，它说："请提供文字描述。"

今天，这一切改变了。

我们给小狐狸（Fox）和小蝴蝶（Butterfly）装上了"眼睛"——视觉 QA（Visual Question Answering）能力。

什么是视觉 QA？

简单说，就是让 Agent 能"看"图，并回答关于图片的问题。

输入：一张图片 + 一个问题（例如："这个按钮的颜色是什么？"）
输出：一个答案（例如："蓝色，#007BFF"）

背后用的是多模态模型（如 Qwen-VL 或 GPT-4V），它们能理解图像中的文字、布局、颜色、甚至情感。

今天的三个实战场景

1. 自动化 UI 回归测试

老板扔了一张 FlameCMS 后台的截图到群里："看看这个新版本的侧边栏有没有问题。"

以前，我需要人工检查：字体是否对齐？图标是否缺失？颜色是否一致？

今天，小狐狸直接调用视觉 QA：

result = vision_qa.ask(
    image="screenshot_v2.png",
    question="列出侧边栏所有菜单项，并检查是否有图标缺失或文字溢出"
)

结果： 3 秒后，它回复："发现 2 个问题：1. '设置' 图标缺失；2. '用户管理' 文字溢出边界 5px。"

我打开 Figma 对比，完全正确。

2. 竞品截图分析

老板又扔了一张竞品的定价页面截图："他们的套餐结构是什么样的？"

小狐狸看了一眼，回复：

"共 3 个套餐：

Basic: $9/月，包含 10GB 存储

Pro: $29/月，包含 100GB 存储 + API 访问

Enterprise: 联系销售，自定义配额

注意：Pro 套餐的 'API 访问' 字样用红色高亮，可能是主推卖点。"

这比人工阅读快了 10 倍，而且不会漏掉细节。

3. 设计稿 vs 实现稿对比

小蝴蝶画了一张新封面设计稿，Acp 实现了前端页面。老板问："实现稿和设计稿一致吗？"

以前，这需要人工像素级对比。

今天，小狐狸同时看了两张图，回复：

"整体一致，但有以下差异：

设计稿中标题字体大小为 32px，实现稿为 28px

设计稿中按钮圆角为 8px，实现稿为 4px

实现稿中背景色偏深（#F5F5F5 vs #FAFAFA）"

小蝴蝶立刻在 Figma 里调整了标注，Acp 重新生成代码。

技术细节：我们用了什么？

模型：Qwen-VL-Max（阿里云），支持高分辨率图像和复杂推理
集成方式：通过 vision_qa skill 封装，Agent 只需调用 ask(image, question)
成本：每次调用约 $0.002，比人工 QA 便宜 100 倍

局限性与踩坑

视觉 QA 不是万能的：

小文字识别不准：如果图片中文字小于 10px，模型可能读错
复杂布局理解有限：对于嵌套很深的 UI，它可能混淆层级
需要清晰的问题：问"这张图怎么样？"会得到模糊回答；问"按钮颜色是什么？"才能得到精确答案

最佳实践： 把大问题拆成小问题，逐个击破。

明日预告

明天（Day 25），我们要做一次"月度复盘"。

过去 25 天，我们从 0 到 14 个 Agent，从 SQLite 到 PostgreSQL，从纯文本到多模态。

是时候停下来，看看我们走了多远。

明天见。

Day 24 总结： 当 Agent 长出眼睛，世界不再是文字的牢笼。