在叫 AI 寫之前，先把腦袋裡的東西畫出來
我猜你看完 EP.5 之後，
第一次叫 AI 改網頁的時候，
會出現一個熟悉的畫面：
你嘗試了形容詞、講感覺、講對比，
來回試了 5 輪，
AI 給的東西越來越偏。
你開始懷疑：
「是 AI 不夠聰明，還是我講不清楚？」
誠實答案：
多半是你講不清楚。
因為人類的視覺記憶比語言記憶強很多，
你腦袋裡有畫面，
但要把畫面變成文字，
會遺失 80% 的訊息。
所以這篇要教你 vibe coder 最值得花的一個額外技能：
用 Figma 把畫面想清楚。
目的很清楚 —
多一條跟 AI 溝通的管道，
跟「變成設計師」無關。
2026 年的設計工具有很多：
Figma、Sketch、Adobe XD、Penpot、Framer⋯
但對 vibe coder 來說，
Figma 有三個其他工具沒有的優勢：
所以這篇我不會講 Sketch 或其他工具。
對你來說只有 Figma 是最划算的學習投資。
Figma 全部功能加起來大概有 200 個。
但你只要會 5 個就夠用了。
我自己做 NaLi Match、leoaido.com、脆脆王國的時候，
用到的 Figma 功能也就是這 5 個。
Frame 是 Figma 裡最基本的東西。
你可以把它想成「一張紙」 —
每一個 Frame 就是一個畫面。
做手機 App，每一頁就是一個 Frame。
做網站，每一個區塊（hero、feature、CTA）就是一個 Frame。
常用快捷鍵：F → 拖出一個 Frame，
右側面板可以選「iPhone 16」「Desktop 1440」等預設尺寸。
這是 Figma 對 vibe coder 最重要的功能，
因為它的概念跟 CSS 的 Flexbox 一模一樣，
學會它你就會「用網頁的方式想設計」。
選一個 Frame → 按 Shift + A，
就把它變成 Auto Layout。
之後你往裡面塞東西，
Figma 會自動排好間距、對齊。
網頁上會有很多重複的東西：
按鈕、卡片、頭像、tag。
選一個你做好的元素 → 右鍵 → Create Component（或 Ctrl/Cmd + Alt + K），
它就變成「主元件」。
之後你拖出來用的都是「副本」。
改主元件，所有副本一起變。
這跟 React 的元件邏輯一模一樣 —
你在 Figma 裡建立的設計系統，
可以無痛對應到程式碼裡的元件結構。
2024 年加進來、2026 年變成主流的功能。
你可以在 Figma 裡定義：
・主色 = #c9a96e
・大標題字級 = 32px
・卡片圓角 = 12px
・基礎間距 = 16px
之後所有元件都用變數，
你想換主題色（比如做深色版），
改一個變數，整份設計變過去。
2025 / 2026 進階版加了「Expression Tokens」 —
變數可以做計算（例如「主色亮 20%」），
讓設計系統更接近真實程式碼的能力。
選一個 Frame → 右側面板最下面 → Export → PNG / SVG / PDF。
就這樣。
導出的 PNG 你可以：
對 vibe coder 來說，
Export 出來的圖才是 Figma 真正的成品。
畫面在 Figma 裡長什麼樣不重要，
重要的是它讓 AI 接得到。
2026 年 Figma 推出的 AI 功能。
給它一段文字描述，它幫你生 UI 元件、寫文案、做插畫，
而且會用你目前已經設好的 Variables 跟 Components，
不會做出跟你設計系統不一致的東西。
更厲害的是 Figma Make 能「看自己生的東西」 —
它會分析自己生成的截圖，
自動調整間距、對齊、結構，直到結果像你描述的樣子。
對 vibe coder 來說，
這等於「設計階段的 AI Pair」。
你只要在 Figma 跟 Figma Make 對話，
就能跑出第一版設計。
Code Connect 讓你把 Figma 裡的元件，
直接「綁」到你 GitHub repo 裡的真實 React / Swift / Android 元件。
當開發者在 Figma 的 Dev Mode 點一個按鈕，
看到的會是「這個按鈕對應的 React 元件叫 PrimaryButton，路徑在 src/components/Button.tsx」 —
直接拿 code 用，
跟以前那種「padding 12px」的設計參數比起來，差別非常大。
對 vibe coder 來說，
這個功能讓「設計 → 程式碼」變成單向不重做的流程。
之後 AI 在你的專案裡看到 Figma 連結，
會自動找到對應的元件，不會自己亂生一個新的。
你不需要看完 Figma 官方教學的 200 集影片。
下面是我自己每次開新專案的 30 分鐘工作流：
30 分鐘走完一輪，
你會拿到「自己看了滿意」+「AI 看得懂」的設計。
這 30 分鐘換掉的，
是你跟 AI 來回 10 輪、改了 5 個小時、還是覺得不對的痛苦。
新手最常見的問題：
花 4 小時把 hero section 對齊到完美，
結果 AI 生出來的東西因為螢幕響應式根本對不上。
記住：
vibe coder 的 Figma 是「給 AI 看的草稿」 —
對到「感覺對」就停手，
把它當成印刷廠等級的成品在追，會無限耗下去。
沒設 Variables 的設計，
後面想換顏色得改 50 個地方。
還會發現 AI 生出來的 code 用了一堆 hardcode 顏色，
因為它看不到「這幾個顏色其實是同一個變數」。
把 5 頁的內容全部塞在一個 Frame，
Figma 不會出錯，但 AI 看 PNG 的時候會抓不到「頁面」邊界。
每個邏輯獨立的畫面都該有自己的 Frame。
免費版有「3 個檔案 / 3 個頁面」的限制（2026 年的數字，發文前再查一次）。
如果你開的是「團隊空間」會吃這個額度，
個人空間反而沒這個限制。
vibe coder 一開始用個人空間就好。
三種主流做法，看你跟哪個 AI 工具：
最後那句「告訴我你抓到的色票跟字級」很重要 —
AI 會跟你對齊，你才能驗證它有沒有看對。
v0 是 Vercel 出的設計→React 工具，
它對「Figma 風格的截圖」訓練最深。
丟 PNG 進去，它直接吐 React + Tailwind + shadcn/ui 的元件。
v0 的優勢是「給你產品級的元件 code」，
缺點是它只做 UI 不做後端。
所以 v0 適合「先把畫面做出來」的階段。
2026 進階做法：
裝 Figma 的 MCP server，
你的 AI 工具就能直接讀取你的 Figma 檔案，
不用 export PNG。
這個工作流很爽但設定門檻高，
建議你先用 PNG 模式撐過前幾個專案，
等你習慣 Figma 之後再升級到 MCP。
下次你要把 Figma 設計交給 AI，
套這個結構：
第 3 條最關鍵 —
AI 會告訴你哪裡你的設計「實作上會卡」，
這個回饋會反過來讓你的下一份 Figma 設計更聰明。
vibe coder 的瓶頸常常在自己的描述能力上。
學會 Figma 之後，你會發現很多事情變成「我畫一下你看」就解決了。
有了 Figma + EP.5 的三層指令，
你能做出自己滿意的網頁了。
但網頁做完還只是「在你電腦裡」 —
關掉電腦它就不見了，
朋友看不到，
客戶連不到，
你也沒有任何「歷史版本」可以回去。
下一篇 EP.7 我們講 GitHub —
為什麼你不能只把檔案存在電腦裡，
以及怎麼讓 AI 幫你管理版本，
不會今天改了明天找不到舊版。