你不是不會設計就不能開始做產品畫面。真正麻煩的是：腦中明明有功能想法，卻不知道怎麼把它變成「使用者第一步看到什麼、下一步按哪裡、出錯時怎麼回來」這種可以討論的東西。這也是很多 PM、企劃、創作者第一次搜尋 AI Figma、AI mockup、AI 使用者流程時，心裡其實在問的問題。
我自己的產品工作習慣是先不急著追求漂亮畫面。畫面太早漂亮，反而會讓人誤以為問題已經想清楚；但如果流程、狀態、資料欄位、錯誤情境還是糊的，最後設計師和工程師只會一起被拖進重做地獄。AI 能幫你加速，但你要先知道要它加速哪一段。
先講結論：如果你不會 Figma，我會把 AI 當成「需求翻譯器」而不是「設計師替身」。先用 AI 拆使用者流程，再做低保真 mockup，最後才把可行方向交給 Figma Make、Figma Design 或設計師細修。不適合這樣做的人：想用一句話產出可上線 UI、完全不想檢查流程、或打算跳過設計系統和開發驗收的人。
AI Figma 不是魔法：你要先決定它要幫你畫什麼
很多人問「AI Figma 怎麼用」時，會直接打：「幫我做一個會員系統首頁。」這句話聽起來很清楚，其實資訊量很少。會員系統給誰用？首頁要完成什麼任務？主要按鈕是登入、續訂、查看權益、還是客服？如果使用者沒有會員，看到的是空狀態、升級頁，還是試用入口？
Figma 官方現在把 AI 放進許多產品面，像 Figma AI、Figma Make、Figma Design Agent，都在把「文字、畫面、原型、程式、設計系統」接得更近。但我會提醒你：工具變強，不代表需求會自動變清楚。官方文件也一直強調要給清楚任務、範例、限制和上下文，這其實很像 PM 寫規格，只是換成跟 AI 對話。
所以第一步不是開 Figma，也不是找 AI mockup generator，而是先寫出這句話：這個畫面要幫使用者完成哪一個任務？你只要能回答這句，後面不管用 ChatGPT、Claude、Figma Make，產出都會穩很多。這也是我在 設計問題是 2026 拉開職場差距的能力 裡反覆講的：AI 答案普通，通常不是模型太笨，而是問題沒有被設計好。
先把流程和狀態拆清楚，再請 AI 產 mockup，會比一開始追漂亮畫面穩很多。
先把需求翻成流程：AI mockup 前的 5 步驟
如果你現在只有一個產品想法，我會先用這 5 步驟讓 AI 幫你整理，而不是馬上叫它畫畫面。這張流程表就是本文的核心工具，你可以直接拿去改成自己的 prompt。
步驟 | 請 AI 產出 | 你要檢查 | 交付物 |
|---|---|---|---|
任務 | 使用者想完成的一個主要任務 | 是否太貪心、一次塞太多功能 | 一句任務描述 |
入口 | 使用者從哪裡進入這個流程 | 新手、老手、未登入是否不同 | 入口情境清單 |
流程 | 主要路徑與兩到三個分支 | 是否有成功、失敗、返回路徑 | user flow |
畫面 | 每一步需要的畫面與核心元件 | 資訊是否能支撐使用者做決定 | screen list |
驗收 | 每個畫面的可用標準 | 是否能交給設計/工程討論 | 驗收清單 |
我會先問 AI：「請把這個產品想法拆成使用者任務、入口情境、主要流程、例外狀態、畫面清單和驗收條件。」等它吐出來後，我再追問：「哪三個地方最容易被設計太漂亮但其實不可用？」這個追問很重要，因為它會逼 AI 從 mockup 的外觀回到產品邏輯。
如果你想把這套流程放到更完整的產品開發脈絡，可以接著看 AI 產品設計流程。那篇是從需求、PRD、user flow 到 prototype 的完整路線；這篇則專心處理「不會 Figma 時，怎麼先把畫面和流程說清楚」。
Figma Make、Figma Agent、ChatGPT 怎麼分工？不要全部丟給同一個工具
現在 AI 設計工具很多，最容易踩的雷是把所有工具都當成「幫我變漂亮」。我會把它們分成三種任務：文字拆解、互動原型、設計修整。
任務 | 我會先用 | 適合原因 | 不要這樣用 |
|---|---|---|---|
拆需求 | ChatGPT / Claude | 擅長整理流程、文案、邏輯和限制 | 要求它憑空保證 UI 可開發 |
做原型 | Figma Make | 適合從 prompt 生成互動 UI、功能原型或 web app 方向 | 一口氣貼太多複雜畫面要求 1:1 還原 |
修設計 | Figma Design / Agent | 適合在畫布上比方向、套元件、調狀態與一致性 | 完全不檢查設計系統與元件狀態 |
做簡報 | Canva / Slides 類工具 | 適合行銷素材、簡報頁、封面視覺 | 拿簡報卡片假裝產品流程已驗證 |
Figma Make 官方文件提到，你可以附上 Figma frame、設計、圖片，也可以帶 style context、用 point-and-edit 聚焦修改，甚至把預覽複製回 Figma Design 變成設計圖層。但這些功能都有前提：你要知道自己想改哪裡，而不是一直說「再高級一點」「再像 Apple 一點」。
如果你同時用多個 AI，我會讓 Claude 或 ChatGPT 先當產品助理，整理流程和驗收；讓 Figma Make 做可互動方向；再回到 Figma Design 或設計師手上處理元件和一致性。工具分工的邏輯，可以搭配 Claude vs ChatGPT vs Gemini 怎麼分工 一起看。
我的 prompt 模板：從一句想法變成 user flow 與畫面清單
下面這段不是要你照抄，而是給你一個起手式。你可以把產品名稱、使用者、任務和限制換掉，再丟給你常用的 AI。
我想做一個 [產品/功能]，目標使用者是 [誰]。
他現在的主要任務是 [要完成什麼]，最怕的是 [卡點/風險]。
請你不要先畫漂亮畫面，先幫我輸出：
1. 主要使用者流程，用步驟列出入口、操作、成功、失敗、返回路徑
2. 每一步需要的畫面清單，每個畫面只列核心元件
3. 每個畫面的使用者決策點：他為什麼會按下一步
4. 3 個最容易被忽略的例外狀態
5. 可以交給設計師或 Figma Make 的 mockup prompt
限制：
- 不要一次塞超過 1 個主要任務
- 不要用無意義的華麗文案
- 每個畫面都要有明確的使用者動作
我很常在這一步加一句：「請用 PM 驗收角度檢查，而不是用設計美感角度稱讚。」因為 AI 很會禮貌地說「這個流程很清楚」，但實務上你要它挑錯。畫面能不能做，往往不是看第一眼漂不漂亮，而是看使用者迷路時有沒有路回來。
這也是為什麼我不建議你一開始就追求高保真 UI。你先做低保真 screen list，讓大家看懂流程；等流程穩了，再進 Figma Make 或 Figma Design 生成 mockup。速度要用在減少溝通成本，不是用在更快產出一張會騙人的漂亮圖。
什麼情境適合 AI mockup？什麼情境一定要找設計師
AI mockup 很適合三種情境：第一，你要跟主管或客戶快速對齊方向；第二，你要在會議前把抽象想法變成可討論的畫面；第三，你要把 PRD 裡的流程拿去檢查是否漏掉狀態。這些都是「先討論」的任務。
但如果你要做正式上線產品、品牌關鍵頁、付費漏斗、複雜資料圖表、金融或醫療這類高風險流程，我會直接說：不要只靠 AI mockup。你需要設計師、工程師、法務或資安角色一起看，至少要有人檢查可讀性、可用性、無障礙、資料安全和錯誤處理。
尤其是 SaaS 軟體評測、專案管理軟體、產品設計工具這類商業產品，畫面不是裝飾，它會直接影響使用者要不要付費、要不要信任、要不要繼續走下一步。你可以用 AI 快速產方向，但不要讓方向稿假裝成最終答案。
如果你的問題其實是「用 AI 變快後，我有沒有真的變強」，那可以再看 AI 讓你變快但不會讓你變強。AI mockup 最怕的就是速度很快、判斷沒有跟上。
費用、限制與安全：Figma AI 不是每個人都能無限用
工具方案和 AI credits 這類資訊變動很快，所以我不會在正文裡寫死每個方案的價格。比較穩的判斷方式是：你要先確認自己的 Figma seat、團隊方案、AI credits、是否能用 team library、是否能分享或發佈 Figma Make 檔案。Figma Help Center 對這些限制寫得很清楚，而且 credits 會受到模型、任務複雜度和上下文材料影響。
我會特別提醒兩個安全點。第一，不要把 API key、個資、內部客戶資料直接貼進 AI prompt；官方也提醒敏感資訊不要放進 chat composer。第二，如果你用 Figma Make 發佈原型，要知道公開版本可能任何拿到 URL 的人都能看到。這種事情不要等到要 demo 給主管前才發現。
如果你的需求只是做行銷圖、簡報封面、社群素材，Figma 可能不是第一工具，像 Canva Pro 值得買嗎 這類素材工具更直接；但如果你要討論使用者流程、互動狀態、產品畫面和設計系統，那 Figma 這條線會更適合。
最後我會怎麼做：先交付「能討論的流程」，再追求漂亮
如果今天有一個完全不會 Figma 的 PM 或創作者問我：「我到底要不要學 AI Figma？」我會說，可以學，但不要把目標設成「我要變設計師」。你的第一個目標應該是：我能不能把一個想法變成一張團隊看得懂的流程圖、畫面清單和驗收清單？
一旦你能做到這件事，設計師會比較好接，工程師會比較好估，主管也比較知道自己到底在同意什麼。這才是 AI mockup 對非設計師最大的價值。不是讓你跳過專業，而是讓你更早把問題講清楚。
你今天可以從一個很小的功能開始：登入、訂閱、報名、收藏、上傳、搜尋，任選一個。先拆流程，再列畫面，再補例外狀態，最後才丟給 Figma Make 或其他工具做 mockup。漂亮不是第一步，清楚才是。
FAQ：AI Figma、AI mockup 與使用者流程常見問題
AI Figma 適合不會設計的人嗎？
適合拿來做第一版 mockup、使用者流程和畫面狀態探索，但不適合把它當成資深 UI 設計師。你仍然要補需求限制、品牌規範、錯誤狀態與驗收條件，否則很容易得到漂亮但不可用的畫面。
AI mockup 和正式 Figma 設計稿差在哪？
AI mockup 是用來對齊方向的草稿，正式 Figma 設計稿則需要元件、間距、響應式、互動狀態和開發交付細節。前者幫你討論得更快，後者才真正能交給設計與工程落地。
Figma Make、Figma Agent、ChatGPT 做畫面要怎麼分工？
我會用 ChatGPT 或 Claude 先拆需求與使用者流程，用 Figma Make 做可互動原型方向，再用 Figma Design 或 Figma Agent 修元件、狀態和設計系統一致性。不要一開始就要求單一工具一次做完所有事。
不會 Figma 可以先用 AI 做使用者流程嗎？
可以，而且我反而建議先做使用者流程。你先把入口、主要任務、分支、錯誤狀態和成功訊息列出來，再讓 AI 產 mockup，會比只丟一句「幫我做一個漂亮 App」穩很多。
參考資料
- Figma AI
- Figma Developers：Intro to Figma Make
- Figma Help Center：Create and edit a Figma Make file
- Figma Help Center：Figma Make FAQs
- Figma Help Center：How AI credits work
- Figma Blog：The Figma Design Agent is Here
