跳到主要內容
AI 代理開發•9 分鐘閱讀

把視覺能力接進 Cursor 與 Claude Code:開源 MCP 視覺服務架構與本機 Ollama 部署指南

AI 程式設計 AI 代理文字極強,但面對設計稿、報錯截圖和複雜表格時卻「雙目失明」。深入解析 Model Context Protocol (MCP) 視覺架構,詳解如何用 Shadow Vision 實現本機截圖 OCR 與 UI 還原始碼。

#MCP 協議#Cursor 視覺外掛#Claude Code#本機 Ollama 部署#截圖識別程式碼#AI 程式設計 AI 代理

當 AI Agent 遭遇視覺盲區:「對不起,我看不到你發的圖片」

過去一年裡,Cursor、Claude Code、Codex 等 AI 程式設計助手深刻重構了軟體工程的生產力範式。

但幾乎每個開發者都踩過這樣一個惱人的坑:

當你遇到一個複雜的介面樣式 Bug,或者拿到設計師給的一張精美 UI 原型圖,隨手截圖發給 Agent,滿心期待它直接給出修復補丁或生成 Tailwind 程式碼時,終端裡卻冷冷地彈出一句話:

"I cannot view images in this terminal environment. Please provide the text or code directly."

文字大模型在推理與邏輯生成上極其強大,但在無介面的開發終端裡,它們被剝奪了「眼睛」。


破局利器:Model Context Protocol (MCP) 視覺標準化

為了解決大模型與外部工具的連線摩擦,Anthropic 開源了 Model Context Protocol (MCP) 協議。它就像 AI 世界的 USB-C 介面,為 AI 代理提供了標準化的外部資料感知與工具呼叫規範。

基於此,我開源了 Shadow Vision (影瞳),一個專門為 AI Agent 提供多模態視覺感知的 MCP 伺服器。

通過在 Agent 設定檔中加上一行命令,你的 Cursor、Claude Code 便立刻擁有了六大結構化視覺工具:

  1. vision_ocr:精準識別報錯彈窗、控制台截圖、票據及多列複雜表格中的文字;
  2. vision_inspect:深度診斷介面渲染問題,解釋圖表、報錯原因及視覺異常;
  3. vision_annotate:讀懂畫面的紅框圈選、箭頭指示與醒目標示下劃線,精確鎖定目標區域;
  4. vision_layout:將參考設計圖遞迴分解為元素層級樹、間距與配色規範;
  5. vision_reconstruct:核心大招——直接將一張 UI 截圖逆向重構為乾淨優雅的 React / HTML / Tailwind 原始碼草稿;
  6. vision_compare:比對修改前後的兩張視覺截圖,自動找出畫素級樣式差異與迴歸 Bug。

拒絕程式碼洩露:可插拔後端與本機 Ollama 離線部署

企業開發者最大的擔憂是商業機密與原始碼截圖洩露。很多線上視覺 API 要求將圖片傳至公網,這在嚴格的企業內網政策下絕對禁止。

Shadow Vision 在底層架構上採用了完全解耦的可插拔視覺後端(Pluggable Backends):

  • 本機離線模式(Local-First):原生支援本機執行的 Ollama(一鍵掛載開源視覺大模型如 Qwen2-VL、LLaVA)。整套視覺推理與影像資料完全執行在本機 GPU/CPU 上,不向外網傳送任何一位元組網路資料;
  • 雲端強力模式(Cloud Pro):當需要極高精度的視覺推理時,可自由切換至 Anthropic Claude 3.5 Sonnet 或 Google Gemini 多模態模型;
  • 自建相容閘道器:支援任何遵循 OpenAI-compatible 協議的自建叢集(如 LM Studio、vLLM)。

極速設定示例(Claude Desktop / Cursor):

json
{
  "mcpServers": {
    "shadow-vision": {
      "command": "uv",
      "args": ["run", "shadow-vision"],
      "env": {
        "VISION_BACKEND": "ollama",
        "OLLAMA_MODEL": "qwen2-vl:7b"
      }
    }
  }
}

讓只會讀文字的 AI 睜開雙眼看懂螢幕,這是人機協作程式設計走向下一代真正具身化智慧的關鍵一步。

全部實戰手記 →