Wonder

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 即時取得設計脈絡，加速前端實作。
• 以真實程式碼進行視覺原型製作 : 創辦人與獨立開發者無需專責設計或工程團隊，就能把早期想法轉為可互動、可上線的原型。

常見問題