近來工作上需要用到 ai agent 來處理 前端(Frontend) 的 UI，我用 Figma MCP 拿到設計圖然後用 GLM 5.2 模型來處理。但是 GLM 5.2 不支援圖片作為輸入，所以模型只能拿 Figma 設計圖的 XML 數據來處理，導致出來的效果不如預期。
我在工作中用的 ai agent 是基於 OpenCode 和 Oh-My-Openagent ，所以我想到弄一個 OpenCode 的 subagent 來處理圖片輸入。 main agent 遇到圖片輸入時，會生出一個圖片處理的 subagent 提取圖中的資料，然後把資訊傳回 main agent 處理。
到 Ollama 上面找了一遍，支援圖片輸入的有下面的幾個模型。因為不考慮在本地運行任何大模型，這次的測試全部都是 Ollama Cloud 的模型：
建立 OpenCode subagent
首先建立一個 OpenCode 的 subagent 檔案，放在 ~/.config/opencode/agents/vision.md ，如果是只用在一個專案，則放在根目錄的 .opencode/agents/vision.md 。
我把 model temperature 定在 0.1 希望模型輸出可以更加穩定。你可以看到，subagent 的檔案名稱叫 vision.md ，所以在 OpenCode 中可以用 @vision 來指定用這個 subagent。
在 subagent 的提示詞中，有下面一句。是禁止 subagent 調用 oh-my-openagent 的 look_at 工具，這個工具的輸出效果看來不太好。
DO NOT USE `look_at` tool.
我叫 Gemini 產生一個基本的 subagent prompt 用作處理一些 UI 設計圖的輸入，輸入數據有可能是一些圖片類的設計圖，也有可能是 Figma MCP 的數據。就這樣，叫 subagent 提取設計圖中的文字樣式，例如是字型和字體顏色之類。也會叫 subagent 提取畫面中的 layout 和一些 spacing (margin / padding)。最後把這些資料整理好，上傳到 main agent 處理。
測試環境
OpenCode 設定
我使用 ultra-work mode，設定如下：
- 模型: GLM 5.2
- reasoningEffort: max
- temperature: 0.1
設計圖樣本
下面是隨便在網上找到的一幅 UI template 的設計圖，只是單純一張圖片。
輸入的 main agent 提示詞
看到在這裡和 subagent 的提示詞中，都不厭其煩的叫它不要使用 look_at 工具，因為它會導致輸出結果變很差。我覺得是因為 look_at 跳過了 subagent 自己用圖片作為輸入和處理，改由它自己處理圖片，這樣便不能測試每一個模型在處理圖片輸入的能力。
測試結果
gemma4
kimi-k2.6
kimi-k2.7-code
minimax-m3
mistral-large-3
不知怎樣， subagent 用了這個模型沒有反應。
可能日後有時間再研究一下是甚麼問題。
qwen3.5
總結
就輸出畫面而言，無疑 minimax-m3 的輸出是最接近原設計圖。雖然也不是100%一樣，但我認為結果是非常可以接受。未來在使用中，可能有一些需要改進的地方。我認為將會愈來愈好用。
有人會說 OpenAI 或者是 Anthropic 的模型在處理前端工作時會做得更好，效果會比 Ollama Cloud 的模型好很多倍。但沒有辦法，我所在的地方用不了這些模型，所以只針對 Ollama Cloud 上面的模型作比較。
雖然只能用 Ollama Cloud，但我覺得它在成本上也有優點。起碼在跑一次測試後，用量也不會太多。如果是用了 OpenAI / Anthropic 模型跑，用量有可能達到數百萬 token。
⚠️
這次的測試結果也有可能有不足的地方，不能代入每個人的使用習慣和場境。