Subframe

Subframe 早期是「用設計工具拉出 React＋Tailwind 元件，再把程式碼複製進專案」的 UI 建構器，現在官網的定義變成「a design tool for your codebase, and a coding agent with a canvas」：一個 macOS 與 Windows 都有的桌面 App，把設計畫布、程式代理和內建瀏覽器放在一起，設計與實作在同一個地方完成，而且直接作用在你本機的程式碼庫。官網 FAQ 特別強調，程式碼不會離開你的電腦，Subframe 跟你現在用的程式代理一樣讀寫本機檔案，只有設計畫布存在雲端，網頁版與桌面版都能開。

功能特色與適用場景：工作流程大概是這樣：在內建瀏覽器打開 localhost 上的產品，選取任一元素「Capture to canvas」貼到畫布，變成可編輯的設計；在畫布上試幾個方向，再對程式代理說「把這個按鈕變體實作出來、commit 並開 PR」。瀏覽器裡也能即時檢查元素，用設計面板調 tokens、元件與 class 名稱。元件支援 props、slots、variants，並與專案裡的設計系統同步；主題與 tokens 管理亮暗模式的顏色與文字。代理可以直接用你現有的 Claude Code 或 Codex 訂閱，Subframe 另外提供 MCP 伺服器，讓 Cursor 或 Gemini 等外部代理讀取設計脈絡。官方說最適合 React 專案，屬性面板以 Tailwind 類別為主，但瀏覽器與畫布可用在任何網頁技術上。

給台灣使用者的建議：定價很好懂，Free 只有 1 個專案但不限編輯人數，Pro 每位編輯者每月 20 美元、專案不限、AI 點數 6 倍。要注意的是 AI 點數只在網頁版、或你不用自己的 Claude／Codex 訂閱時才會扣，所以已經付 Claude 或 ChatGPT 訂閱的人，在桌面版其實主要是付畫布與協作的錢。官網直接回答「Subframe 能取代 Figma 嗎」說可以，它是專為介面設計打造的完整設計工具，但做插畫、行銷素材還是 Figma 方便。走 React＋Tailwind 的新創或小型產品團隊最合適，介面全英文。同類型可以和 Onlook 比較，兩者都走「畫布就是程式碼」路線，Subframe 多了 Windows 版與 MCP 伺服器。