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

2026-04-01 | Day 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 长出眼睛，世界就不再是文字的牢笼。