Photo by Amper on Unsplash
「這個按鈕要放在右邊，然後點下去會跳出一個彈窗，裡面有表單，然後...」
如果你是 PM，這段話應該很熟悉。你花了十分鐘描述一個功能，工程師聯完後交出來的東西，跟你想像的完全不一樣。這不是誰的錯，而是文字本身的侷限性——一百個人讀同一段描述，會產生一百種畫面。
解決方案很簡單：用視覺溝通。但傳統的設計工具（Figma、Sketch）對非設計背景的 PM 來說，學習曲線太陡。好消息是，2024 年的 AI 工具已經讓「不會設計的人也能做出 Mockup」成為現實。
什麼是 Mock？先搞懂這三個詞
在進入實戰之前，先釐清三個常被混用的術語：
1. Wireframe（線框圖）
最低保真度的草稿，只有黑白灰，專注於佈局和資訊架構。不討論顏色、字體、圖片，只討論「什麼東西放在哪裡」。
- 適用時機：需求初期，快速對齊大方向
- 工具：紙筆、Balsamiq、Excalidraw
2. Mockup（視覺稿）
高保真度的靜態設計，包含實際的顏色、字體、圖片。看起來像「完成品的截圖」，但不能互動。
- 適用時機：確認視覺風格，交付給工程師開發
- 工具：Figma、Sketch、Adobe XD
3. Prototype（原型）
可以點擊互動的版本，模擬真實的使用流程。用來測試使用者體驗，但不是真的程式碼。
- 適用時機：用戶測試、展示給利害關係人
- 工具：Figma Prototype、Principle、ProtoPie
PM 最常需要的是 Wireframe 和 Mockup。Wireframe 用來快速對齊想法，Mockup 用來精確傳達需求。而現在，AI 讓這兩者的產出速度提升了 10 倍。
AI 時代的 Mock 工具全覽
以下是 2024 年 PM 可以直接上手的 AI 工具：
🔥 v0 by Vercel
網址：v0.dev
輸入文字描述，直接產生可運行的 React 程式碼。不只是圖片，是真的可以動的網頁。
適合場景：需要給工程師看「這個互動效果我要的是這樣」
範例 Prompt：「一個電商結帳頁面，左邊是商品清單，右邊是付款資訊表單，底部有一個藍色的結帳按鈕」
🔥 Bolt.new
網址：bolt.new
跟 v0 類似，但可以產生更完整的應用，包含多頁面和基本邏輯。
適合場景：需要快速做出 MVP 原型展示給老闆或客戶
🔥 Claude Artifacts
Anthropic 的 Claude 可以直接在聊天介面中產生互動式的 UI 元件，即時預覽。
適合場景：快速驗證一個小功能的 UI 想法
🤖 Clawdbot + Canvas
網址：clawd.bot
Clawdbot 是一個可以部署在你自己環境的 AI 助理，它有一個強大的功能叫做 Canvas——可以即時渲染 HTML/CSS/JavaScript 頁面，讓你直接在對話中看到成品。
適合場景：
- 需要快速產出 Mock 並即時預覽
- 想要在自己的環境中測試頁面邏輯
- 需要 AI 幫你迭代修改，直到滿意為止
範例對話：
你：「幫我做一個登入頁面，有 Email 和密碼欄位，還有一個登入按鈕，風格要簡潔現代」
Clawdbot：（直接在 Canvas 中渲染出可互動的登入頁面）
你：「按鈕改成圓角，顏色換成深藍色」
Clawdbot：（即時更新畫面）
這種對話式的迭代開發特別適合 PM——你不需要學任何工具，只需要用自然語言描述你要什麼，AI 就會幫你做出來並即時呈現。比起截圖來回，效率高出許多。
🎨 Figma AI
Figma 內建的 AI 功能，可以根據描述生成 UI 元件。對已經會 Figma 的人來說是加速器。
🎨 Galileo AI
專門為 UI 設計打造的 AI，產出品質很高，但需要付費。
實戰教學：5 分鐘產出一個 Mockup
讓我們用 v0 來做一個實際案例。假設你是 PM，要設計一個「用戶個人資料設定頁面」。
Step 1：先用文字描述需求
不要急著開工具，先在筆記本裡寫清楚：
- 頁面目的：讓用戶編輯個人資料
- 必要欄位：頭像、姓名、Email、電話、個人簡介
- 操作：可以上傳頭像、儲存修改、取消
- 風格：簡潔、專業、白色背景
Step 2：撰寫 AI Prompt
把上面的需求轉成 AI 看得懂的 Prompt：
Create a user profile settings page with the following elements:
- A circular avatar upload area on the top left
- Input fields for: Full Name, Email (disabled), Phone Number, Bio (textarea)
- Two buttons at the bottom: Cancel (secondary) and Save Changes (primary, blue)
- Clean, minimal design with white background
- Use shadcn/ui style components
Step 3：迭代修改
AI 第一次的產出通常不完美，這時候用追加描述來調整：
- 「把頭像移到中間」
- 「Bio 欄位加上字數限制提示」
- 「增加一個密碼修改區塊」
Step 4：輸出並分享
v0 會給你一個可分享的網址，直接貼給工程師看。比起截圖，工程師可以直接在瀏覽器裡操作，理解你要的互動效果。
進階技巧：用 Clawdbot 建立可測試的頁面
如果你需要的不只是靜態 Mock，而是可以實際測試互動邏輯的頁面，Clawdbot 的 Canvas 功能特別實用。
場景一：表單驗證邏輯
假設你想確認「密碼強度檢查」的 UX 是否清楚：
「幫我做一個註冊表單，密碼欄位要即時顯示強度（弱/中/強），用顏色條表示，紅色是弱、黃色是中、綠色是強」
Clawdbot 會產出一個真的可以輸入並即時反應的頁面，你可以直接測試各種密碼組合，看看 UX 是否符合預期。
場景二：多步驟流程
假設你在設計一個三步驟的結帳流程：
「做一個三步驟的結帳頁面：第一步填收件資訊、第二步選付款方式、第三步確認訂單。要有進度條顯示目前在哪一步，可以點上一步下一步切換」
你可以實際點擊、測試流程是否順暢，而不是看著靜態圖猜測。
場景三：錯誤狀態展示
工程師最常問的問題之一：「錯誤狀態長什麼樣？」
「在剛剛的表單加上錯誤狀態：Email 格式錯誤時顯示紅框和錯誤訊息、送出失敗時顯示 Toast 提示」
這樣你交付給工程師的就不只是「正常狀態」的 Mock，而是完整涵蓋各種狀態的規格。
與工程師溝通的最佳實踐
有了 Mock 只是第一步，怎麼交付才是關鍵。
1. Mock + 文字說明並行
不要只丟一個連結。Mock 呈現的是「長什麼樣」，但工程師還需要知道：
- 這個按鈕點下去會發生什麼事？
- 錯誤狀態長什麼樣？
- Loading 狀態要顯示什麼？
- 手機版的佈局有不同嗎？
2. 標註互動細節
在 Mock 旁邊加上註解（Figma 可以加 Comment，或用 Notion 整理）：
- 點擊 A → 跳轉到 B 頁面
- 表單送出後顯示成功 Toast，3 秒後消失
- Email 欄位不可編輯（灰底呈現）
3. 提供設計檔而非截圖
如果用 Figma 做 Mock，直接分享 Figma 連結。工程師可以：
- 直接看到 Padding、Margin 數值
- 取得正確的色碼
- 匯出需要的 icon 和圖片
4. 用可互動的原型取代靜態圖
如果時間允許，用 v0、Bolt 或 Clawdbot 產出的可互動頁面，比靜態截圖更能減少誤解。工程師可以直接「玩」你的設計，而不是猜測。
5. 接受「技術上做不到」
有時候你設計的效果，技術上實現成本很高。這時候要一起找替代方案，而不是堅持原本的設計。這也是 Mock 的價值——在開發前就發現問題。
常見問題 FAQ
Q：AI 產出的 Mock 可以直接交給工程師開發嗎？
看情況。如果是用 v0 產出的程式碼，工程師可以作為起點，但通常需要調整。Mock 的目的是溝通，不是交付最終產物。
Q：我不懂程式，AI 產出的程式碼我看不懂怎麼辦？
沒關係，你不需要懂程式碼。你只需要看預覽畫面是否符合你的想像。程式碼是給工程師參考的。
Q：公司用的是舊的設計系統，AI 產出的風格不一樣怎麼辦？
在 Prompt 裡明確指定風格，或者在迭代時調整。也可以只用 AI 產出 Wireframe 等級的草稿，視覺細節再由設計師處理。
Q：Clawdbot 的 Canvas 跟 Claude Artifacts 有什麼差別？
功能類似，但 Clawdbot 可以部署在你自己的環境，資料不會外流。而且 Clawdbot 可以結合其他工具（檔案存取、API 呼叫等），做更複雜的整合。
結語：Mock 是 PM 的超能力
會做 Mock 的 PM，跟不會做的 PM，溝通效率差了一個數量級。
過去，這個技能需要學 Figma、學設計原則，入門門檻不低。但現在，AI 把這個門檻降到了幾乎為零。你只需要會描述你要什麼，AI 就能幫你視覺化。
下次開會前，不要再只帶著文字需求了。花 5 分鐘用 AI 做一個 Mock，你會發現會議時間縮短了，來回修改少了，工程師也不再抱怨「這不是我理解的那樣」。
用視覺說話，讓溝通變簡單。