Wonder

Wonder 是一款 AI 原生設計工具，讓團隊在視覺畫布上生成、編輯設計，並可匯出或同步到程式碼。支援 MCP 連結 coding agents，提供免費方案與付費方案。

連結到程式碼的 AI 設計畫布

Wonder 是一款以單一畫布為核心的 AI 原生設計工具，可用來生成版面、進行編輯，並同時處理程式碼脈絡。網站將其定位為一種以 AI 進行設計、與 AI 對話，並讓成果與真實程式碼保持一致的方式。

此產品強調從設計到正式環境的直接路徑。Wonder 表示設計背後有程式碼支援，可複製為 React + Tailwind，並能透過其 MCP 伺服器連結 coding agents，讓工作可以在畫布與開發工具之間流動，而不需要傳統的交接流程。

Wonder 也支援反覆探索：你可以開始新的設計專案、建立變體、調整版面與間距、編輯文案、替換圖片，並在畫布上生成素材。MCP 文件將這套工作流程延伸到支援的 agents，例如 Cursor 和 Claude Code。

公司條款將 Wonder 描述為一款用於建立、編輯與協作設計的工具，基於真實的 HTML 和 CSS，並提供可供正式環境使用的程式碼匯出。此產品可於 wonder.design 使用，並提供免費方案與付費方案，適合較大量的使用需求。

核心功能

AI 輔助的畫布設計

在視覺畫布上生成設計，然後在不離開同一工作區的情況下進行精準修改。

聊天驅動的反覆調整

透過聊天編輯設計，並將設計與 AI 互動一起呈現在同一個畫布上。

與程式碼對齊的輸出

將 Wonder 的設計格式 1:1 對應到程式碼，讓設計可以在不需要額外交接步驟的情況下回到正式開發流程。

匯出到正式開發流程

從設計中複製 React + Tailwind，或將結果送到你的 coding agent 進一步開發。

基於 MCP 的 agent 連結

使用 Wonder MCP 伺服器，讓支援的 coding agents 以雙向方式讀寫畫布內容。

視覺素材生成

直接在設計流程中生成圖片，並使用 shaders 建立更豐富的視覺元素。

實用工作流程

從零設計產品 UI
生成新的版面，在畫布上進行編輯，並讓工作與最終會上線的程式碼保持一致。
迭代既有畫面
在同一個工作脈絡中調整間距、樣式、文案、圖片選擇與變體。
設計到程式碼的協作
將 Wonder 連接到 coding agent，讓 agent 能在你於設計與實作之間切換時讀取或更新畫布。
產生視覺素材
當專案需要比預設占位內容更豐富的素材時，直接在設計流程中建立圖片與基於 shader 的視覺效果。
在採用前評估工具
使用免費方案探索工作流程，若團隊需要更多點數或額外的 MCP 工具呼叫，再升級到付費方案。

Pros and Cons

Pros

支援在同一個畫布中生成、編輯與反覆調整設計。
讓設計與真實程式碼保持一致，包括 React + Tailwind 匯出。
可透過 MCP 連接 coding agents，實現畫布與程式碼之間的雙向工作流程。
提供免費方案可先開始使用，並有明確的付費方案供高用量使用。
同時提供視覺設計工具與素材生成功能，例如圖片與 shaders。

Cons

定價頁顯示採用點數式使用限制，因此高用量工作會受方案容量影響。
MCP 設定說明會因用戶端而異，而且如果沒有可用的外掛，某些整合需要手動設定。
來源資料未說明進階企業級控管或合規功能。

FAQ

Wonder 是用來做什麼的？

Wonder 使用視覺畫布，讓你可以生成設計、進行精準編輯，並在同一個畫面中搭配程式碼內容一起工作。它的 MCP 伺服器也能讓支援的 coding agents 讀取與寫入 Wonder 畫布內容。

哪些 coding agents 可以連接到 Wonder？

文件指出 Wonder 目前支援 Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable，以及自訂 MCP 用戶端，其中 Cursor、Claude Code 和 Codex 可透過官方外掛以最快方式連接。

Wonder 可以產生什麼類型的輸出？

Wonder 可以匯出可供正式環境使用的程式碼，而首頁也表示你可以直接從設計複製 React + Tailwind。條款同時說明使用者可匯出 production-ready code。

Wonder 有免費方案嗎？

定價頁面顯示有免費方案，以及付費的 Pro、Pro+ 和 Max 方案。Free 標示為每月 0 美元，而 Pro 為每月 20 美元、Pro+ 為每月 60 美元、Max 為每月 200 美元。

Wonder MCP 的驗證方式如何運作？

MCP 文件說明採用基於 OAuth 的登入方式，不需要管理 API keys，且在授權後 tokens 會自動更新。

Quick Facts

類別: 設計工具 / 開發者工具
平台: 位於 wonder.design 的網頁應用程式
工作流程: 在畫布上設計，然後匯出或同步到程式碼
整合: 支援 Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable 及自訂用戶端的 MCP 伺服器
定價: 免費方案加上 Pro、Pro+ 與 Max 付費方案
公司: Aquila Labs, Inc. d/b/a Wonder