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 長出眼睛，世界不再是文字的牢籠。