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 輔助編程，通過質量門控和設計系統集成，幫助團隊更快地交付高質量的界面。