# Wonder Wonder 是一款原生 AI 設計工具，可在畫布上生成、編輯設計並與程式碼同步。 - Findings24: - 網站: - 價格: Freemium - 分類: AI圖像設計, AI設計助手 ## 什麼是 Wonder？ Wonder 是一款以單一畫布為核心的 AI 原生設計工具，可用來生成版面、進行編輯，並同時處理程式碼脈絡。網站將其定位為一種以 AI 進行設計、與 AI 對話，並讓成果與真實程式碼保持一致的方式。 此產品強調從設計到正式環境的直接路徑。Wonder 表示設計背後有程式碼支援，可複製為 React + Tailwind，並能透過其 MCP 伺服器連結 coding agents，讓工作可以在畫布與開發工具之間流動，而不需要傳統的交接流程。 Wonder 也支援反覆探索：你可以開始新的設計專案、建立變體、調整版面與間距、編輯文案、替換圖片，並在畫布上生成素材。MCP 文件將這套工作流程延伸到支援的 agents，例如 Cursor 和 Claude Code。 公司條款將 Wonder 描述為一款用於建立、編輯與協作設計的工具，基於真實的 HTML 和 CSS，並提供可供正式環境使用的程式碼匯出。此產品可於 wonder.design 使用，並提供免費方案與付費方案，適合較大量的使用需求。 ## Wonder 能做什麼？ ### AI 輔助的畫布設計 在視覺畫布上生成設計，然後在不離開同一工作區的情況下進行精準修改。 ### 聊天驅動的反覆調整 透過聊天編輯設計，並將設計與 AI 互動一起呈現在同一個畫布上。 ### 與程式碼對齊的輸出 將 Wonder 的設計格式 1:1 對應到程式碼，讓設計可以在不需要額外交接步驟的情況下回到正式開發流程。 ### 匯出到正式開發流程 從設計中複製 React + Tailwind，或將結果送到你的 coding agent 進一步開發。 ### 基於 MCP 的 agent 連結 使用 Wonder MCP 伺服器，讓支援的 coding agents 以雙向方式讀寫畫布內容。 ### 視覺素材生成 直接在設計流程中生成圖片，並使用 shaders 建立更豐富的視覺元素。 ## 使用情境 ### 從零設計產品 UI 生成新的版面，在畫布上進行編輯，並讓工作與最終會上線的程式碼保持一致。 ### 迭代既有畫面 在同一個工作脈絡中調整間距、樣式、文案、圖片選擇與變體。 ### 設計到程式碼的協作 將 Wonder 連接到 coding agent，讓 agent 能在你於設計與實作之間切換時讀取或更新畫布。 ### 產生視覺素材 當專案需要比預設占位內容更豐富的素材時，直接在設計流程中建立圖片與基於 shader 的視覺效果。 ### 在採用前評估工具 使用免費方案探索工作流程，若團隊需要更多點數或額外的 MCP 工具呼叫，再升級到付費方案。 ## 常見問題 ### 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 會自動更新。 ## 快速資訊 - **類別**: 設計工具 / 開發者工具 - **平台**: 位於 wonder.design 的網頁應用程式 - **工作流程**: 在畫布上設計，然後匯出或同步到程式碼 - **整合**: 支援 Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable 及自訂用戶端的 MCP 伺服器 - **定價**: 免費方案加上 Pro、Pro+ 與 Max 付費方案 - **公司**: Aquila Labs, Inc. d/b/a Wonder