AI 時代還要不要用 Figma/Pencil ？我的結論：看你是不是要交付給別人
整理版優先睇
用唔用 Figma，取決於個頁面係咪要交付俾別人
呢篇文章係由全棧開發者 Max King 寫嘅，佢成日研究 AI UI 工作流，發現好多人問：而家 AI 出圖同 Codex/Cursor 都寫到頁面，仲使唔使開 Figma？佢自己都糾結過。整體結論係：如果只係自己做 demo 或內部工具，其實可以跳過 Figma，直接用 UI Spec 加參考圖，再交畀 Codex/Cursor 做，然後截圖修改就得。但係一旦個頁面要畀老細、客戶、團隊確認，或者要長期維護，Figma 依然好重要——佢唔係用嚟創造，而係用嚟做確認層。
作者區分咗兩個階段：探索階段可以用 vibe design 自由睇方向，但交付階段一定要收斂，要有一個大家都認嘅版本。Figma 喺呢個階段主要做四件事：確認版本、標註細節、團隊協作、減少扯皮。佢提醒，唔好為咗用 Figma 而用，前面一定要先有 UI Spec 諗清楚結構，Figma 只係承接已相對清晰嘅設計稿。
總括嚟講，作者認為 AI 時代嘅 Figma 唔係古法，而係交付過程嘅確認層。自己用可以輕啲，交付別人就要正式啲。
- 核心結論：用唔用 Figma 取決於頁面係咪要交付畀別人，自己 demo 可以跳過，交付項目一定要有確認層。
- 個人 demo 工作流：UI Spec → 參考圖 → Codex/Cursor 實現 → 截圖修正，夠快夠用。
- 探索 vs 交付：vibe design 適合探索方向，Figma 適合交付階段嘅確認同對齊，兩者唔係對立。
- Figma 嘅核心價值：確認版本、標註細節、團隊協作、減少扯皮，而唔係創造。
- 可行動建議：判斷場景——個人項目可直接跳過 Figma；涉及老細、客戶、團隊、長期維護時，一定要入 Figma 做確認稿。
自己 demo：跳過 Figma 嘅 workflow
如果只係自己做一個小頁面，例如後台工具、測試頁面或者臨時 demo，而家我唔一定會先開 Figma。因為呢個場景入面，我自己就係產品、設計、前端同驗收人，我知道個頁面要做咩，知道邊啲模塊重要，知道第一版邊度可以接受。
如果完整行一次 Figma，反而可能會拖慢節奏。我更願意用呢套 workflow：UI Spec → 參考圖 → Codex/Cursor 實現 → 截圖修正。呢套方式對個人開發者、小團隊、內部工具其實已經夠用，尤其係你唔係做正式交付項目，而係想先驗證個 idea。
最重要係：頁面能唔能夠跑得起、結構係咪啱、數據接唔接得到、狀態有冇漏、後面能唔能夠繼續改。
交付項目：Figma 作為確認層嘅價值
一旦進入真實項目，情況就唔同喇。因為真實項目唔係你自己覺得差不多就完，老細要睇、客戶要睇、團隊要睇，前端要知道還原邊一版。嗰陣時「感覺差不多」就唔夠。
如果老細確認咗 A 版本，最後前端整出嚟似 B 版本，中間就好難交代。你唔可以話 AI 覺得咁樣都幾好。喺交付項目入面，設計結果需要被確認，確認之後代碼要盡量還原，後面有修改都要講得清改咗邊度、點解改、客戶確認嘅係邊個版本。
Figma 唔一定負責「創造」，但佢好適合負責「確認」。
- 確認版本：老細或客戶到底確認咗邊一版，唔好只靠聊天記錄嘅一張截圖。
- 標註細節：間距、字號、組件狀態、交互說明，喺 Figma 更容易統一表達。
- 團隊協作：設計師、前端、產品、老細，大家至少睇住同一個頁面。
- 減少扯皮：效果唔對時，可以返去確認稿判斷係設計稿冇講清，定係實現偏咗。
Figma 嘅價值唔係為咗顯得流程專業，而係為咗令交付過程有依據。
探索 vs 交付：vibe design 同 Figma 嘅分工
有人話 AI 時代應該打開格局，唔好停留喺傳統組件庫、傳統設計稿。呢個觀點我理解，AI 令 UI 表達更自由，Canvas、3D、大屏、動態界面都可以更快做出嚟，呢種 vibe design 好適合探索。
但探索同交付係兩件事。我而家會咁樣區分：探索階段可以自由啲，先睇感覺、方向、整體氛圍；交付階段必須收斂，要確認版本、還原模塊、補齊狀態、處理移動端、保證後續維護。
探索階段可以自由，但交付階段一定要有確認稿。
Figma 喺 AI UI 工作流嘅正確位置
我而家唔會將 Figma 放喺最前面，亦唔會當佢係每次都必須經過嘅中轉站。我更願意將佢放喺「確認層」：UI Spec → 視覺參考 → Figma 確認/協作 → Codex/Cursor 實現 → 截圖修正。
唔係每個項目都必須行呢一步，但只要項目涉及別人確認，Figma 就好有用。不過要留意，唔好將 Figma 當成萬能中轉站。如果 Figma 文件只係由圖片轉出嚟嘅圖層快照，對落地幫助有限。前面一定要有 UI Spec 諗清楚頁面目標、模塊結構、組件邊界、狀態同響應式。
Figma 應該承接一個已經相對清楚嘅結構，而唔係幫你補所有產品結構。
唔好為咗入 Figma 而入 Figma。
- 1 確認版本：老細或客戶確認嘅係邊一版。
- 2 標註細節：間距、字號、組件狀態等統一表達。
- 3 團隊協作：大家睇同一份設計稿。
- 4 減少扯皮：有確認稿做依據。
判斷方法同總結
如果係我自己做頁面，我會咁樣判斷。可以先唔入 Figma 嘅情況：個人項目、臨時 demo、內部工具、頁面結構簡單、你自己就係最終決策人、只需要快速驗證功能。
建議入 Figma 嘅情況：老概要確認、客戶要確認、設計師同前端分工、頁面還原度要求高、後面要長期維護、需要沉澱組件規範或設計系統。
自己用可以輕啲，交付別人要正式啲。呢度嘅「正式」唔一定係流程複雜，而係要有一個大家都認嘅確認稿。
哈嘍，大家好，我是 Max King。
最近聊 AI UI 工作流，經常會繞到一個問題：
現在 AI 都能出圖了，Codex / Cursor 也能寫頁面了，那 Figma 還要不要用？
這個問題我一開始也糾結過。
因為如果只是自己做一個頁面，流程確實可以很短。
先寫 UI Spec，再讓 gpt-image-2 出一個參考圖，然後把 UI Spec 和參考圖交給 Codex / Cursor。頁面跑起來以後，再截圖對比，一輪輪修。
這樣一套下來，很多頁面已經能跑了。
那還要不要進 Figma？
我的答案是：看這個頁面是不是要交付給別人。
如果只是自己做 demo，Figma 不一定是必經環節。
但如果這個頁面要給老闆看、給客戶確認、給團隊協作、給前端按稿還原，那 Figma 依然有價值。
不是因為它“高級”。
而是因為真實項目裏，需要一個可以被確認、被標註、被討論、被追蹤的東西。
01
-MaxKing.cc-
自己做 demo，我確實不一定先打開 Figma
先說實話。
如果我只是自己做一個小頁面，比如後台工具、測試頁面、臨時 demo，我現在不一定會先打開 Figma。
因為這個場景裏，我自己就是產品、設計、前端和驗收人。
我知道頁面要幹什麼。
我知道哪些模塊重要。
我知道第一版哪裏可以接受。
我也知道後面哪裏可以慢慢改。
這種情況下，完整走一遍 Figma，反而可能會拖慢節奏。
我更願意這樣跑：
UI Spec
↓
參考圖
↓
Codex / Cursor 實現
↓
截圖修正
這套方式對個人開發者、小團隊、內部工具，其實已經夠用了。
尤其是你不是在做一個正式交付項目，而只是想先驗證想法。
這時候最重要的是：頁面能不能跑起來，結構是不是對，數據能不能接，狀態有沒有漏，後面能不能繼續改。
Figma 在這裏不是沒用，只是它不一定是第一步。
但只要項目從“自己做着玩”進入“要交付給別人”，情況就完全不一樣了。
02
-MaxKing.cc-
但只要進入交付，問題就變了
一旦進入真實項目，情況就不一樣了。
因為真實項目不是你自己覺得差不多就結束。
老闆要看。
客戶要看。
團隊要看。
前端要知道還原哪一版。
後面修改時，還要知道到底改了哪裏。
這個時候，“感覺差不多”就不夠了。
比如老闆看了一個設計方向，說：
這個可以，就按這個做。
那前端最後做出來，不能完全變成另一個東西。
如果老闆確認的是 A，最後頁面落地像 B，中間就很難交代。
你不能說：
AI 覺得這樣也挺好。
這在自己玩的時候可以，但在交付項目裏不行。
交付項目裏，設計結果需要被確認。確認之後，代碼實現需要儘量還原。後面有修改，也要能說清楚改了哪裏、為什麼改、客戶確認的是哪個版本。
Figma 不一定負責“創造”，但它很適合負責“確認”。
說到這裏，就繞不開這兩年很火的 vibe design。
03
-MaxKing.cc-
vibe design 適合探索方向，不適合直接交付
有人說，AI 時代應該打開格局，不要還停留在傳統組件庫、傳統設計稿這種思路。
這個觀點我理解。
AI 確實讓 UI 表達更自由了。Canvas、3D、大屏、動態界面，都可以更快做出來。很多以前要設計師慢慢畫的東西，現在 AI 很快就能給你一個方向。
這種 vibe design 很適合探索。
但探索和交付是兩件事。
如果這些不收斂，後面就很容易變成：圖很好看，代碼不像；老闆說不是這個感覺；客戶說之前不是這樣；前端說這裏沒法還原；最後大家一起返工。
所以我覺得，vibe design 和 Figma 不是對立關係。
它們只是處在不同階段。
04
-MaxKing.cc-
Figma 在 AI UI 工作流裏，應該放在哪？
我現在不會把 Figma 放在最前面。
也不會把它當成每次都必須經過的中轉站。
我更願意把它放在“確認層”。
UI Spec
↓
視覺參考
↓
Figma 確認 / 協作
↓
Codex / Cursor 實現
↓
截圖修正
不是每個項目都必須走這一步。
但只要項目涉及別人確認，Figma 就很有用。
這就是 Figma 的價值。
不是為了顯得流程專業，而是為了讓交付過程有依據。
05
-MaxKing.cc-
我現在怎麼判斷要不要進 Figma？
如果是我自己做頁面，我一般會這樣判斷。
這種情況下，直接用 UI Spec → 參考圖 → 代碼實現 → 截圖修正，就可以。
但有些場景，我會建議進 Figma。
這種情況下，如果完全跳過 Figma，只靠 AI 出圖和代碼截圖溝通，很容易出問題。
自己用，可以輕一點。交付別人，要正式一點。
這裏的“正式”，不一定是流程複雜。
而是要有一個大家都認的確認稿。
06
-MaxKing.cc-
不要把 Figma 當成萬能中轉站
最後還有一點我想提醒。
Figma 有價值，但不要把它神化。
不是所有 AI UI 流程都要變成：
AI 出圖
↓
轉 Figma
↓
Figma 再轉代碼
這條路看起來完整，但裏面有很多信息損耗。
AI 生成的是一張視覺圖。轉成 Figma 時，工具要猜圖層。再從 Figma 到代碼時，工具又要猜組件。最後進入真實項目，還要重新補狀態、數據、響應式、接口。
如果 Figma 文件本身不是結構化設計稿，只是一個“從圖片轉出來的圖層快照”，那它對落地幫助有限。
不要為了進 Figma 而進 Figma。Figma 應該承接一個已經相對清楚的結構。
也就是說，前面還是要有 UI Spec。
頁面目標、模塊結構、組件邊界、狀態、響應式，這些要先想清楚。
Figma 負責把這些東西變成可以確認和協作的設計稿，而不是替你補所有產品結構。
07
-MaxKing.cc-
我的結論
所以，AI 時代還要不要用 Figma？
我的答案是：
看你是不是要交付給別人。
自己做 demo，不一定非要先進 Figma。
但只要要給老闆、客戶、團隊確認，Figma 依然很重要。
它不是古法。
它是交付過程裏的確認層。
AI 可以幫你更快探索方向。Codex / Cursor 可以幫你更快實現頁面。截圖閉環可以幫你更快修正偏差。
但正式交付時，總要有一個大家都認的版本。
這個版本需要被確認、被標註、被討論、被追蹤。
這就是 Figma 現在仍然有價值的地方。
模板、Prompt 和示例領取
我把這套 AI UI 工作流裏的模板、Prompt 和示例整理成了一份資料包。
進入公眾號後台，私信我，發送關鍵詞【UI工作流】，即可領取資料和示例。
下一篇預告
下一篇我會繼續聊：image-to-code 不是沒用，但我現在不會把它當主路徑。
- END -
關於 MaxKing寶藏
我是 MaxKing，全棧開發者、量化交易實踐者，也是 AI 重度用戶。這裏分享的不是遙遠概念，而是我在真實使用、搭建和踩坑後留下的判斷。
如果你想交流 AI 工具、個人知識庫或自動化工作流，請查看公眾號菜單欄「聯繫我」獲取更多聯繫方式。