Wonder

一款能在同一個畫布上同時產生 UI、圖像與程式碼的設計工具——你設計的，就是上線的樣子。

社群:

UI 與 UX 設計 AI 設計生成 AI 網站構建器 AI 網站設計

造訪網站

Atoms - 以 AI 建立網站與應用程式，無需程式碼

Atoms

Sponsor

無需寫程式，幾分鐘內驗證創意、建立網站與應用，獲得第一批客戶。

概覽
替代方案
分析

Atoms - 以 AI 建立網站與應用程式，無需程式碼

產品概覽

Wonder 是什麼？

Wonder 是一款以畫布為中心的設計工具，將設計與前端開發整合在同一個工作流程中。不同於傳統設計工具必須交接給工程師，Wonder 生成的設計與生產級程式碼（React + Tailwind）一對一對應。設計師可以直接在畫布上下 prompt、迭代並打磨視覺，底層程式碼會即時同步更新。它也透過 MCP server 與 Cursor、Claude Code 等程式撰寫 Agent 整合，讓工程師無需截圖或重建即可將設計脈絡直接引入程式碼。

主要功能

即時設計轉程式碼
畫布上建立的每一個元素都由真實的 HTML/CSS 支撐。設計格式與程式碼 1:1 對應，設計師所見即工程師所交付，毫無落差。
以畫布為中心的 AI 生成
只要描述你的需求，Wonder 就能直接在畫布上產生版面、元件與樣式變體。選取任一元素即可就地調整。
MCP Server 整合
透過內建的 MCP server，將 Wonder 與 Cursor、Claude Code 等程式撰寫 Agent 連結。Agent 可直接讀取設計脈絡，免去手動重畫或截圖。
內建影像生成
無需切換工具，直接在畫布上產生影像。不再需要佔位素材——只要描述需求，影像就會出現在對應位置。
Shader 支援，打造互動視覺
為設計加入 GPU 加速的 Shader 效果，打造超越靜態 mockup 的豐富互動視覺。
分級 Credit 計費
提供 Free、Pro、Pro+、Max 四種方案，每月 Credit 額度從 300 到 60,000，涵蓋從試用到日常上線交付的各種情境。

使用案例

產品 UI 設計 : 不論是打造 Web 應用或行動端介面，設計師都能在畫布內生成、迭代並匯出可直接上線的 React + Tailwind 元件。
消除設計與開發的交接落差 : 深受設計轉開發失真之苦的團隊，可運用 Wonder 確保上線產品與設計稿完全一致，無需人工重建。
行銷與 Landing Page : 行銷與成長團隊可在同一個畫布內快速製作並上線 landing page、簡報與宣傳圖。
Agent 輔助開發 : 使用 Cursor、Claude Code 等 AI 程式撰寫 Agent 的工程師，可透過 MCP 即時取得設計脈絡，加速前端實作。
以真實程式碼進行視覺原型製作 : 創辦人與獨立開發者無需專責設計或工程團隊，就能把早期想法轉為可互動、可上線的原型。