Wonder
Wonder (Aquila Lab) · 圖片 · 程式設計
Wonder 是一款 AI 設計工具，在裡面畫布和程式碼是同一件事。你不必先畫好mockup再交給工程師，而是在同一個地方從 AI 設計走到程式碼，並匯出可上線的 React 與 Tailwind（或純 CSS）。它是一款給產品團隊用的設計工具，適合想用 AI 生成介面、在熟悉的畫布上手動編輯，然後不必經過轉譯步驟就把成果交付出去的團隊。Wonder 也附帶一個 MCP 伺服器，能接上 Claude、Cursor 這類程式碼代理。設計與程式碼的修改會保持同步。
關於 Wonder
Wonder 是什麼
Wonder 是一款圍繞單一想法打造的設計工具：你在畫布上看到的，就是你交付的東西。它的設計格式與程式碼一對一對應，所以你在畫面上排好的元件，就是你專案裡真正的 React 元件。這省掉了以往靠肉眼重建畫面的標記步驟。沒有轉譯步驟，也不用猜。
這款產品鎖定的是產品團隊，而不是單打獨鬥的玩家。它把設計師本來就熟悉的工具（畫布、圖層、元件）和 AI 生成、內建聊天結合起來，並能連接 GitHub 儲存庫，讓 AI 讀取你現有的程式碼、在畫布上重建真實介面。你也可以透過 MCP 讓程式碼代理存取同一個畫布，也就是說，負責寫應用程式其他部分的人不必離開編輯器就能操作 Wonder。
主要的限制在於範圍與價格。Wonder 產出 React 與 Tailwind（或純 CSS），所以使用其他前端技術棧的團隊能從匯出得到的價值較少。免費帳號也有上限。有限的 AI 聊天代幣、三個私人檔案，以及 25 MB 的圖片上傳。很快就不夠用。
開始使用
- 在 app.wonder.so 建立帳號並開啟新檔案。公開檔案不限數量；免費方案下的私人檔案上限為三個。
- 在 AI 聊天中描述你想要的畫面或元件，或從現有版面開始，讓 AI 在你旁邊生成。
- 像在任何設計工具裡一樣編輯結果。畫布具備圖層、元件、設計變數、格線，以及著色器與圖示庫。
- 連接你的工作區以便交付。連結 GitHub 儲存庫把真實介面拉進畫布，或把 Wonder MCP 伺服器加到 Claude、Cursor 或 Codex，讓修改雙向流動。
- 匯出或同步可上線的 React 與 Tailwind 程式碼回到你的專案。
產品資訊
快速了解 Wonder 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 產品設計師：適合想從畫布一路管到上線的人。對 React 元件有基本認識，能幫助你讀懂輸出。
- 設計工程師與前端開發者：如果你本來就寫 React 和 Tailwind，會很契合，因為匯出的成品直接進入現有程式碼庫，不需要整理。
- 小型產品團隊：每位使用者固定計價加上即時協作，讓共用檔案、邀請審閱者的團隊也用得起。
- 正在打造第一個介面的創辦人：想把粗略的產品構想快速變成可用的畫面時很好用，前提是應用程式架在 React 上。
任務
- 從文字提示生成介面：描述一個畫面，拿回可編輯的版面，再到畫布上細修。
- 重建現有產品介面：連接 GitHub 儲存庫，讓 AI 讀取你的程式碼，在畫布上重建對應的畫面。
- 將設計匯出成 React 與 Tailwind：把完成的設計變成可上線的程式碼，不用手動標記。
- 讓設計與程式碼保持同步：用 MCP 伺服器把畫布修改推進程式碼，也把程式碼修改拉回畫布。
- 製作互動版面原型：格線、區塊與行內版面，加上設計變數，讓測試結構調整變得很容易。
情境
- 啟動新功能的畫面：一次工作階段就能從提示走到可審閱的版面，再把檔案分享給團隊。
- 交付給工程團隊：匯出團隊可以直接提交的程式碼，不必再多一道重建工序。
- 在程式碼代理裡工作：一邊寫應用程式其他部分，一邊從 Claude Code 或 Cursor 操作 Wonder，讓兩邊保持一致。
- 重新設計既有頁面：把目前的介面拉進畫布，自由迭代，再直接交付回去。
- 團隊審閱會議：在免費方案邀請檢視者，或在 Pro 邀請完整協作者，並具備即時編輯的出席狀態控管。
主要功能
對應程式碼的畫布
Wonder 的核心主張是它的設計格式與程式碼一對一對應。畫布上的一個元件，就等同於你專案裡的元件。你用視覺方式排列元素，輸出的是真正的 React 元件，而不是它的圖片。對於厭倦手動重建畫面的團隊來說，這正是這款工具的意義。
AI 生成與內建聊天
編輯器內建一個 AI 聊天，能在畫布上生成與修改介面。你可以描述想要什麼，然後在細修版面時持續和它對話。Pro 帳號每邀一位使用者可獲得每月 20 美元的 AI 代幣。免費方案則維持代幣有限。
React 與 Tailwind 匯出
完成的成品會匯出成可上線的 React 與 Tailwind，另有純 CSS 可選。這些程式碼的用意是直接進入真實專案，而不是躺在交付資料夾裡。如果你的技術棧不是以 React 為基礎，Wonder 的契合度就是在這裡下滑。
Wonder MCP 伺服器
mcp.wonder.so 上的 MCP 伺服器把 Wonder 接到 Claude、Cursor、Codex 等程式碼代理。你的代理取得畫布的讀寫權限，因此能把設計拉進程式碼，或把程式碼推回設計。設定使用標準的 OAuth 登入。沒有 API 金鑰要管理。每個方案都免費，包含免費方案。
GitHub 與桌面應用程式
你可以連接 GitHub 儲存庫，讓 AI 讀取你現有的程式碼，在畫布上重建真實的產品介面。Wonder 也以桌面應用程式形式在 Mac 與 Windows 上運行，給不想在瀏覽器分頁裡工作的人使用。偏好瀏覽器？那也可以。
協作與設計變數
檔案可以是公開或私人，分享時可只給檢視權限或完整編輯權限，並具備即時工作階段的出席狀態控管。變數面板可存放設計代幣，每個檔案也都有自己的圖示庫。格線、區塊與行內版面讓你測試結構調整，不必從頭重建。
優缺點
優點
- 設計與程式碼共用同一種格式，畫布與產品之間不必手動重建。
- 真正的 React 與 Tailwind 匯出直接進入現有程式碼庫，不需要整理。
- MCP 支援可搭配 Claude、Cursor、Codex 及其他代理，且每個方案都免費。
- 每年計費的每人每月 16 美元固定價，讓團隊成長時的成本依然可預期。
- Mac 與 Windows 都有桌面應用程式，另有具備角色與權限的即時協作。
缺點
- 匯出綁定 React 與 Tailwind，使用其他前端技術棧的團隊幾乎拿不到好處。
- 免費方案限制 AI 聊天代幣、三個私人檔案與 25 MB 的圖片上傳，這會卡住真實專案。三個私人檔案實在不多。
- 免費方案沒有列出每月代幣額度，所以大量使用 AI 很快就會把你推向 Pro。
- 這款工具還很年輕，2026 年 4 月才推出，所以預期會有持續變動，而在團隊每隔幾週就推出新功能與修正的同時，偶爾也會遇到不夠完善的地方。
常見問題
Wonder 是一款 AI 設計工具，把畫布上的工作變成可上線的程式碼。你在熟悉的畫布上設計介面，用 AI 生成與編輯，然後匯出真正的 React 與 Tailwind，而不是靜態的mockup。
相關內容
探索與 Wonder 相關的工具、技能與文章。
Wonder 替代方案
X Ray Interpreter
X-ray Interpreter · 圖片X Ray Interpreter 是一款以網頁為基礎的 AI 放射科工具，能把 X 光、電腦斷層、磁振造影、超音波與 PET 影像變成白話報告。你上傳一張掃描影像，片刻之間就得到初步的 X 光判讀結果，之後若有需要解釋的地方，還能繼續追問。它的定位是第二意見與學習輔助，而非醫療診斷。
Aieasypic
AIEasyPic · 圖片AIEasyPic 是一款 AI 圖片生成器，能在幾秒內把單純的文字提示變成完成的藝術作品。你也可以用自己照片訓練自訂模型、在現有圖片中替換臉部，並從文字建立短影片片段，全部都能在瀏覽器中完成。它適合想要快速視覺素材的休閒創作者，也適合想打造個人模型、又不想碰任何程式的業餘玩家。
Chargen
Chargen · 圖片Chargen 是一款 AI 角色生成器與世界觀建構工具，專為《龍與地下城》與其他桌上角色扮演遊戲打造。它能將一句構想變成手繪風格的肖像，在同一場工作階段中生出 NPC、怪物、地圖與遭遇，並把每隻生物的細節放在手邊。桌上角色扮演美術這部分靠一套名為 Gold 的點數系統運作，而文字生成器則對所有人保持免費。