# Wonder

把真實應用跑在畫布上、讓 agent 與你一起修改程式碼化圖層的設計工具。

HTML: https://softbests.com/zh-hant/software/wonder
Markdown: https://softbests.com/zh-hant/software/wonder.md
Website: https://wonder.design/

- 欄目: [設計與原型](https://softbests.com/zh-hant/category/design-prototyping)
- 定價: 免費增值
- 平台: macOS, Windows, 網頁

## 適合誰

希望 Claude Code、Codex 或 Cursor 與介面設計在同一塊畫布上協作的設計師和設計工程師。

## 為什麼值得關注

Wonder 會連線 GitHub 倉庫，把真實應用直接跑在畫布中，因此每個介面都是可編輯圖層，背後就是最終上線的程式碼。它能匯入 Figma 選區、匯出 React 與 Tailwind，並接入 Claude Code、Codex、Cursor、Claude Desktop、Antigravity 或任意 MCP 客戶端；agent 使用你已有的訂閱，而不是 Wonder 的 credit。免費版包含一名編輯者、每週 3,000 個 AI 生成圖層、無限檔案、程式碼匯出、Figma 匯入與全部 shader。Pro 按年付為每位編輯者每月 16 美元，取消圖層上限，增加 AI 圖片與向量生成、可分享的執行中應用和團隊協作。它提供網頁版以及 macOS、Windows 桌面端。代價是 Wonder 在 2026 年底圍繞 agent 重做過一輪，工作流與文件仍在穩定中。

## 可替代誰

- [Figma](https://softbests.com/zh-hant/software/figma)

## 相關與平替

- [Paper](https://softbests.com/zh-hant/software/paper)
- [Cursor](https://softbests.com/zh-hant/software/cursor)