Framesmith 1.7——為AI代理提供UI完成質量門控工具

Framesmith 1.7 是一個開源的 MCP（Model Context Protocol）伺服器，旨在為 AI 程式設計代理提供一個視覺化的 UI 畫布。透過 Framesmith，開發者可以在編寫任何框架程式碼之前，先草擬 UI 設計、在瀏覽器中預覽，並與 AI 代理達成設計共識。這一工具特別適合那些希望將 UI 設計流程融入 AI 輔助開發工作流的團隊。

Framesmith 的核心元件包括一個畫布檢視器、一個質量評估面板以及一個設計系統面板。檢視器允許使用者以多種斷點模式預覽畫布，支援並排對比、檢查底層 JSON 結構以及歸檔或刪除畫布。質量評估面板會顯示一個 0 到 100 的評分，按類別列出問題，並標註哪些問題可以自動修復。點選任何問題都會在即時預覽中高亮對應的節點，方便定位。設計系統面板則展示畫布的有效設計令牌，包括顏色、字型、間距和圓角，並標明每個令牌的來源層級（工作區、專案或畫布），以便檢視自定義與繼承的關係。

安裝 Framesmith 非常簡單，無需克隆倉庫或構建專案。使用者只需透過 npx 命令即可在 MCP 客戶端中註冊 Framesmith。支援 Claude Code、Codex、Cursor、Windsurf、VS Code（配合 MCP 擴充套件）以及其他相容 MCP 的客戶端。所有操作都透過標準 stdio MCP 介面完成。如果需要從原始碼構建用於開發，可以克隆 GitHub 倉庫並執行 npm install 和 npm run build。

Framesmith 提供了一系列工具，幫助 AI 代理管理畫布、工作區和專案。其中，init 工具用於初始化繫結當前倉庫，確保畫布以 JSON 格式儲存在 .framesmith/ 目錄下。canvas_create 工具用於建立新畫布，並返回一個多樣化訊號，提示代理避免重複佈局。canvas_list、canvas_move、canvas_archive 等工具用於管理畫布的生命週期。viewer_url 工具返回檢視器的 URL 以及每個畫布的獨立連結，方便分享。此外，還有 workspace_create、project_create、canvas_bind 等工具用於更高階的容器管理。

Framesmith 的工作流程強調“先設計後編碼”。AI 代理透過 MCP 工具呼叫建立畫布，使用者在檢視器中審查設計，然後代理根據反饋修改畫布，直到設計滿意後才開始編寫程式碼。這種流程可以顯著減少重複工作，提高 UI 開發效率。

總的來說，Framesmith 1.7 是一個強大的工具，它將視覺化 UI 設計引入 AI 輔助程式設計，透過質量門控和設計系統整合，幫助團隊更快地交付高質量的介面。