認識 Figma Make：它做什麼、什麼時候用
Figma Make 是 Figma 裡的 AI 工具：你用文字（Prompt）描述，它生成可以真的操作的網頁，右邊直接預覽，還能一鍵發佈成公開網址。重點是：它生成的是「程式」，不是一張圖。
- 快速做出「局部組件」的創意版本（Bento 卡片、Hero、篩選列）
- 把 Figma 精稿轉成可操作的網頁
- 做 1–4 頁、重視視覺的作品，並發佈成網址
- 當「原型」讓評審實際點擊
- 一次生成整個網站的「最終稿」（容易千篇一律）
- 需要真實後端、登入、資料庫
- 頁面很多、邏輯很複雜、要逐行精準控制
- → 這些情況請參考 UNIT 08 路線 B／C（Claude）
兩週進度：W11–W12 怎麼分配
本週交付：用自己的 Figma 做出首頁的可互動版本。第 1–4 章
本週交付：至少 2 個 P0 頁面串接、發佈成 figma.site 網址。第 5–8 章
Figma Make 專案裡面有什麼？（點檔案看說明）
你在 Make 左側會看到一份檔案列表。你不用會寫程式，但要知道哪幾個檔案重要——尤其是「規則書」Guidelines.md，以及之後交給 Claude 時它是什麼樣的專案。
Make 的專案是 React ＋ Tailwind 寫成的網頁程式。所以在 Make 裡，「互動」是真的程式在跑，不是 Figma Design 那種「連線原型」。額度與功能依你的帳號與 Figma 當週版本而定，不確定時以介面為準。
UI Prompt 怎麼寫：萬能公式與組裝器
AI 不該用來「直接生成整頁最終稿」，而是當作局部組件的創意發想器與繁複結構的加速器。公式只有一行：
UI Prompt ＝ [組件類型] ＋ [版面邏輯] ＋ [主題內容] ＋ [視覺氛圍與細節]
互動：Prompt 組裝器
選四個要素，右邊預覽會跟著變，下方的 Prompt 會一句一句組成。把滑鼠移到每一句，看它對應畫面的哪一部分。
常用術語（看不懂 AI 回覆時回來查）
| 英文 | 中文 | 一句話說明 |
|---|---|---|
| Bento Grid | 便當盒格狀版面 | 由不同大小的圓角卡片組成不規則網格，Apple、Figma 官網常見。 |
| Hero Section | 主視覺區 | 網頁最上方：主標題、副標、主視覺圖與 CTA 按鈕。 |
| Feature Card | 特色卡片 | 用卡片展示產品特色、服務或活動亮點。 |
| Interactive Filter | 互動式篩選器 | 用分類、標籤、搜尋、排序，即時篩選內容。 |
| Asymmetric 2-column | 非對稱雙欄 | 左右不等寬（如 60/40），增加層次與焦點。 |
| Overlapping Layout | 重疊式版面 | 元素彼此交疊，創造景深。 |
| Vertical Stacked | 垂直堆疊 | 由上而下排列，適合手機與列表。 |
| CTA | 行動呼籲按鈕 | 「立即預約」這類最重要的按鈕。 |
三個 Prompt 範例（中英對照）
建議針對「局部複雜元件」下指令，生成後再把好的組件組合進主頁面。
A藝術展覽 Bento Grid 特色卡片區塊
B互動式篩選與標籤牆（Filter Bar & Tag Wall）
C高質感商品規格比較卡（Spec Comparison）
從 AI 骨架到高質感 UI：四個維度的調校
AI 生成的 UI 通常結構完整，但視覺「平淡、常規、缺乏品牌個性」。視覺傳達設計的核心價值，就是把「合理」提升為「驚艷」。下面這個調校器，讓你親眼看到四個維度各自改變了什麼。
調校設定值對照
| 維度 | AI 預設輸出 | 視傳級調校 | 要在 Prompt 或 Guidelines 寫的數值 |
|---|---|---|---|
| 字體排版 | 預設無襯線，大小差不多 | 標題襯線、36–48px；標籤 11–12px 大寫 | headline serif 36–48px bold; tags 11–12px uppercase, letter-spacing 5% |
| 色彩氛圍 | 高飽和單色或預設灰階 | 深藍灰底、微漸層、語意化 Token | background #0F172A (never pure black); 135° gradient #0F2C59 → #1E40AF |
| 版面構圖 | 等分網格、擁擠 | 60:40 破格、留白 24–32px | asymmetric 60/40; card padding 32px; one card spans 2 columns |
| 質感細節 | 粗邊框、硬陰影 | 1px 15% 邊框、柔和懸浮陰影 | 1px border white 15%; shadow 0 4px 16px rgba(15,23,42,.04) |
調校的指令要「一次改一個維度」，並說明「只改 X，其他不要動」。調到滿意後，把規則寫進 Guidelines.md，之後所有頁面都會自動遵守（見第 4、7 章）。
案例一：島嶼新浪潮・展覽首區（Bento Grid）
這是一個完整、可以操作的範例：用一個 Prompt 生成當代藝術展「Island New Wave」的 Bento Grid 首區，再延伸二級頁面、加微互動、發佈成網址。先打開成品，再照步驟做一遍。
| 規格 | 內容 |
|---|---|
| 主題 | 當代藝術展《Island New Wave（島嶼新浪潮）》 |
| 版面 | 非對稱 Bento Grid：左 60% 主卡片＋右 40% 兩張上下堆疊小卡 |
| 左卡元素 | 主標題、副標題、膠囊標籤（#2026展覽 #數位藝術）、主要 CTA「立即預約展覽 →」 |
| 視覺 | 雜誌編輯風、Padding 32px、高對比字體、深色 #0F172A、1px #334155 邊框 |
六個步驟（點步驟，看實際畫面與指令）
案例二：島嶼新浪潮旅遊入口網——Figma Design 轉 Figma Make
案例一是「從 Prompt 發想」。真正做專題時，你已經有 Figma Design 精稿，目標是忠實還原並加上互動。下面用示範檔裡的精稿，完整走一遍八個步驟。你可以直接用同一份示範檔練習，再換成自己的專題。
先看「還原指令」怎麼寫（工作台）
選附圖方式、規格與互動，看指令怎麼組成。這就是步驟 4 要貼進 Make 的指令。
八步實戰：照著做，勾選完成
左邊是八個步驟與預估時間，右邊是每一步的做法、連結、可複製的指令與驗收。完成一步就按「標記完成」，進度會存在你的瀏覽器。
找不到「附加設計」選項？Figma 介面常更新。可改成上傳 Frame 的 PNG 截圖（Figma 匯出 2x），並把規格卡以文字貼進 Prompt。附圖後差異很大？先看第 8 章診所。
全站頁面與串接：一頁一頁生成，最後串起來
下面是以展覽案例示範的「頁面指令庫」：STAGE 1–4 生成二級頁，STAGE 5 生成彈窗，STAGE 6 把全站串成一個能操作的網站。照順序貼，每次一個。
Smart Animate、Open Overlay 是 Figma Design 原型的詞。在 Make 裡，頁面切換與彈窗是真的程式在跑，所以指令改用「淡入 300ms、點擊開啟彈窗」這種描述方式。
設計系統化與交付：讓生成結果「穩」
AI 的結果每次都可能不一樣。讓它穩定的方法，是把規則寫下來：Guidelines.md 是規則書，theme.css 放顏色與字體等 Token，頁面則只「使用」它們，不直接寫死數值。
寫「不要用絕對定位」「按鈕 ≥ 44px」「用這組色」。越早寫越好（第 5 章步驟 3）。
顏色、圓角、字體變數。改這裡整站一起變，等同 Figma 的 Variables。
每次 Prompt 都附上，AI 才不會自己換色。見 UNIT 10 STEP 0。
交付前 30 秒檢核
Figma 精稿的結構（Auto Layout、變數、元件）越完整，Make 還原越準——見 UNIT 05 與 UNIT 08 設計稿準備度。想把 Make 成果交給 Claude 精修（路線 C），見 UNIT 10。
常見狀況診所與本週作業
出了問題怎麼辦
兩週作業（W11–12）
目標：W11 完成首頁的可互動版本；W12 完成至少 2 個 P0 頁面並串接，發佈成網址。用你們自己專題的 Figma 精稿來做。
| 項目 | 內容 | 繳交格式 |
|---|---|---|
| Make 檔案 | 你們的 Figma Make 檔案，含 Guidelines.md | 連結（權限可檢視） |
| 發佈網址 | figma.site 網址，用無痕視窗測試過 | URL |
| 精稿對照 | Figma 精稿與 Make 預覽並排截圖，標示「保留什麼、改了什麼、為什麼」 | 圖片或 PDF |
| Prompt 紀錄 | 用本頁「匯出指令包」，或貼 3 段關鍵 Prompt（含補救指令） | .md 或文字 |