Wonder

Wonder 是什麼？

Wonder 是一款結合 AI 設計生成、聊天式迭代與單一畫布編輯的設計工具。其核心目的是幫助團隊從早期構想直接轉為生產就緒 UI，而無需額外的交接步驟。

Wonder 以真實程式碼作為設計格式。頁面將 Wonder 定位為一種工作流程，畫布上創作的內容直接對應輸出的程式碼，包括可複製 React + Tailwind。

主要功能

• 直接在畫布上以 AI 生成設計：描述想要設計的內容，即可在原位生成視覺效果，減少來回溝通。
• 邊編輯邊與設計系統聊天：使用聊天介面在同一畫布上迭代與精煉。
• 精確編輯與變體：變更樣式、建立變體、調整間距，並替換圖像資產，均在同一工作流程中。
• 以程式碼建構，生產就緒：設計即「真實程式碼」，可複製為 React + Tailwind，避免手動重建。
• 利用先前工作迭代（保留流程狀態）：基於先前設計探索選項，不會遺失編輯脈絡。
• 搭配程式碼脈絡與代理工作流程：頁面描述「程式碼與畫布終於連結」，包含匯出或傳送至代理；另提及「Explore Wonder MCP」與「Wonder Toolkit」。

如何使用 Wonder

1. 在應用程式中啟動新設計專案（從公開 Alpha 入口）。
2. 描述想要設計的內容，並在畫布上生成初始佈局。
3. 透過聊天與直接編輯精煉—例如調整間距、變更主題/樣式，並建立變體。
4. 複製或匯出結果為 React + Tailwind（或傳回程式碼代理），確保設計與實作保持一致。

使用情境

• 0-to-1 UI 佈局建立：描述期望設計，即快速生成新流程的第一版，然後迭代至符合預期方向。
• 不失脈絡的設計迭代：重訪先前選項並探索新變體，同時保留先前畫布的編輯/流程狀態。
• 減少設計師主導的生產交接：從 Wonder 創作直接複製 React + Tailwind，即可轉為可實作程式碼。
• 不同主題或樣式的變體製作：變更主題與樣式後調整佈局細節如間距，即可建立多版本。
• 代理輔助的設計轉程式碼工作流程：搭配程式碼代理使用 Wonder，透過匯出或傳回工作繼續同一專案實作。

常見問題

• Wonder 中的「所見即所出」是什麼意思？ 頁面說明設計格式與程式碼 1:1 對應，設計即真實程式碼，可複製（React + Tailwind）直接出貨，減少重建與交接。

• 生成設計後可以編輯嗎？ 可以。工具支援精確編輯與 AI 並行，包括變更樣式、建立變體、調整間距與替換圖像內容。

• Wonder 只適合設計師，還是也涉及開發者？ 頁面強調設計師擁有完整流程，同時突出搭配程式碼脈絡與代理，顯示兩種角色皆可使用同一工作流程。

• Wonder 支援跨多版本的迭代工作流程嗎？ 描述為可基於先前設計探索迭代，不會遺失流程狀態。

替代方案

• 具設計轉程式碼匯出功能的網頁 UI 設計工具：專注於專用畫布設計後匯出資產或程式碼；關鍵差異在於設計/程式碼對應可能需額外步驟，不如 Wonder 的「真實程式碼」直接。
• AI 輔助設計與原型工具：通常從提示生成模型或原型，之後需獨立實作；Wonder 則強調可直接出貨的程式碼背書設計。
• 元件導向 UI 開發工作流程（如設計系統與程式碼優先方法）：團隊從程式碼元件開始，而非設計畫布；相較 Wonder，此流程較少聊天與畫布導向，更偏向實作優先。
• IDE + UI 函式庫具自動程式碼生成：在開發環境中生成或修改 UI 程式碼；Wonder 定位則聚焦於共享畫布上的生成與編輯，直接對應程式碼。