・Figma Make AI 實戰
— 用 Prompt 驅動局部元件與創意佈局
🎯 單元學習目標
- 掌握 Figma Make AI 實戰核心：學會透過精確的 Prompt 語法，快速生成「局部 UI 元件」與「創意佈局」，擺脫全頁模板的呆板感。
- 導入視傳系美感流（Visual Communication Design）：學會打破 AI 預設的罐頭視覺，從字體對比、色彩質感、構圖張力與微互動細節四大維度進行高保真精緻化調校。
- 無縫銜接 Design System：將 AI 生成的創意元件重新規範化，解綁純化後綁定系統 Tokens 與 Auto Layout，確保產出兼具「極致視覺感」與「工程可維護性」。
・UI Prompt 萬能公式
在現代 UI/UX 工作流中，AI 不該用來「直接生成整頁最終稿」（這容易導致千篇一律的「AI 罐頭感」），而是作為「局部組件創意發想器」與「繁複結構加速器」。
UI Prompt = [組件類型] + [版面 layout 邏輯] + [主題內容] + [視覺氛圍與細節]
| Prompt 要素 | 說明 | 關鍵字範例 |
|---|---|---|
| 1. 組件類型 (Type) | 明確指定要生成的 UI 元件 | Bento Grid, Hero Section, Feature Card, Interactive Filter, Pricing Table |
| 2. 排版結構 (Layout) | 指定 Auto Layout 的流像與比例 | Asymmetric 2-column, 3-card grid, Overlapping layout, Vertical stacked |
| 3. 主題內容 (Context) | 指定具體的實例內容（避免 Lorem Ipsum） | Contemporary art exhibition, Editorial magazine, Sustainable fashion e-commerce |
| 4. 視覺細節 (Visual Style) | 設定字體風格、空間感與裝飾元件 | Minimalist, High-contrast typography, Subtle borders, Dark mode, Micro-badges |
UI / UX 常用設計術語
| 英文 | 中文翻譯 | 說明 |
|---|---|---|
| Bento Grid | Bento 格狀版面（便當式網格布局） | 源自日本便當盒（Bento）的分格概念，由不同大小的卡片組成不規則網格， 常見於 Apple、Microsoft、Figma 等現代網站。設計領域通常直接保留 Bento Grid 的英文名稱。 |
| Hero Section | 主視覺區（首頁主視覺區） | 網頁最上方的重要版面，通常包含主標題、副標題、主視覺圖片、 品牌介紹與 CTA（Call To Action）按鈕，是吸引使用者注意力的重要區域。 |
| Feature Card | 特色卡片（功能介紹卡片） | 使用卡片式介面展示產品特色、服務內容、活動亮點或功能資訊， 是目前最常見的 UI 元件之一。 |
| Interactive Filter | 互動式篩選器 | 透過分類、標籤、搜尋框、排序等方式， 讓使用者即時篩選所需內容，提高瀏覽效率與操作體驗。 |
| Pricing Table | 方案比較表（價格方案表） | 用於比較不同產品、服務或訂閱方案， 通常包含價格、功能列表、推薦方案與 CTA 按鈕， 常見於 SaaS、電商及企業官網。 |
常見版面配置（Layout）術語
| 英文術語 | 中文翻譯 | 說明 |
|---|---|---|
| Asymmetric 2-column | 非對稱雙欄版面 |
左右兩欄採不同寬度或內容比例（如 70/30、60/40），
能增加視覺層次與設計感，常見於品牌官網、作品集與 Landing Page。
|
| 3-card Grid | 三卡片網格布局 | 由三張資訊卡片組成的網格版面，可橫向排列、直向排列或搭配不同尺寸， 常用於展示產品特色、服務內容、案例作品或文章列表。 |
| Overlapping Layout | 重疊式版面 | 利用圖片、文字、卡片等元素彼此交疊， 創造景深、空間感與視覺焦點，是現代 UI 設計的重要表現方式。 |
| Vertical Stacked | 垂直堆疊布局 | 元素依照閱讀順序由上而下排列， 適合手機介面、資訊列表、時間軸、側邊欄及內容型網站， 具有良好的可讀性與響應式表現。 |
・實戰 Prompt 範例庫
💡 提示：建議針對「局部複雜元件」下指令，生成後再將優質組件組合至主頁面中。
範例 A：藝術展覽 Bento Grid 特色卡片區塊
Generate a modern Bento Grid feature section for a contemporary art exhibition named "Island New Wave".
Layout: 1 large hero feature card on the left (60% width) with tag pills and primary CTA button, and 2 stacked smaller highlight cards on the right (40% width).
Visual style: Editorial aesthetic, generous padding, high-contrast typography, dark mode background (#0F172A), subtle 1px border (#334155).
請為當代藝術展覽 「Island New Wave（島嶼新浪潮）」 設計一個現代化 Bento Grid 特色展示區塊。
版面配置： - 左側配置一張大型主視覺特色卡片（約占 60% 寬度）。
- 卡片內包含：
- 標籤（Tag Pills）
- 主要行動按鈕（Primary CTA Button）
- 右側（約占 40% 寬度）配置兩張上下堆疊的小型特色卡片，用於展示重點內容。
視覺風格： - 採用編輯設計（Editorial）美學。
- 具有充裕留白（Generous Padding）。
- 高對比字體排版（High-Contrast Typography）。
- 深色模式背景（#0F172A）。
- 卡片外框使用細緻的 1px 邊框（#334155）。
範例 B：互動式複合篩選與標籤牆 (Filter Bar & Tag Wall)
Create a responsive category filter bar with an inline search input and expandable tag wall for a design inspiration gallery.
Include active state pill badges, a dropdown sort menu, and a clear-all button. Clean layout, 8px gap between tags, modern minimal style.
建立一個適用於設計靈感圖庫（Design Inspiration Gallery） 的響應式分類篩選工具列。
版面配置： 內容包含：
- 內嵌式搜尋欄（Inline Search Input）。
- 可展開的標籤牆（Expandable Tag Wall）。
功能需求： - 具有啟用狀態的膠囊標籤（Active State Pill Badges）。
- 下拉式排序選單（Dropdown Sort Menu）。
- 「清除全部」按鈕（Clear All Button）。
設計風格： - 乾淨俐落的版面配置。
- 各標籤之間維持 8px 間距。
- 現代極簡（Modern Minimal）設計風格。
範例 C：高質感電商商品特色與規格對照表 (Spec Comparison)
A sleek spec comparison card for a premium audio brand.
Include an image slot on top, key stats highlighted in large bold numbers, bulleted feature list, and a sticky "Add to Cart" button bar at the bottom.
請為一家高階音響品牌（Premium Audio Brand） 設計一張簡潔且高質感的商品規格比較卡（Specification Comparison Card）。
版面配置： 版面內容包含：
- 頂部預留商品圖片展示區（Image Slot）。
- 以大型粗體數字強調關鍵規格數據（Key Stats）。
- 條列式商品特色（Bulleted Feature List）。
- 底部設置固定式（Sticky）的「加入購物車（Add to Cart）」按鈕列，方便使用者隨時操作。
整體風格： - 精緻、現代且具有高端品牌質感。
- 著重資訊層級、閱讀效率與使用者體驗（UX）。
- 適合應用於高質感電商網站或品牌產品頁面。
・ AI 生成基礎上的精緻化調校
AI 生成的 UI 通常結構完整，但視覺往往顯得「平淡、常規、缺乏品牌個性」。
視覺傳達設計（Visual Communication）的核心價值，就在於將「合理」提升為「驚艷」。
・AI 預設 vs. 視傳級調校對照表
| 調校維度 | AI 預設輸出 (Generic AI) | 視傳系精緻化 (Editorial & High-Fi) |
|---|---|---|
| 字體排版 | 全篇採用預設無襯線體（如 Inter / Roboto），缺乏階層對比。 | 標題引進古典襯線體（Serif）或個性標題體，加大級縮比（如 36px 標題搭配 13px 微縮標籤），強化字距與行高張力。 |
| 色彩與氛圍 | 高飽和單色或預設灰階，視覺僵硬。 | 導入語意化 Tokens，使用低飽和高雅底色、微弱漸層 overlay、甚至加入微細節噪點（Noise Texture）。 |
| 版面構圖 | 呆板的等分網格（如均分 3 欄卡片）。 | 導入長短卡片破格、不對稱黃金比例（60:40）、重疊（Overlap）與豐富的留白呼吸感（Negative Space）。 |
| 質感與細節 | 厚重深色邊框與預設硬陰影。 | 採用 1px 15% 透明度微光邊框，搭配大範圍柔和懸浮陰影 (Blur: 16px, Opacity: 4%)，營造空氣感。 |
・ 四大視覺精緻化調校心法
| 調校維度 | 核心主題 | 具體實務設定與操作規範 |
|---|---|---|
| 1. 字體階層張力 Typographic Contrast | 標題靈魂注入 | 將 AI 預設的通用無襯線標題，替換為具備品牌個性的字型（如中文《字心坊》/《源流明體》，英文 Playfair Display / Clash Display）。 |
| 極致級縮對比 | 大標題設定為 36px ~ 48px (Bold)，搭配超微型分類標籤 11px ~ 12px (Uppercase, Letter-spacing: 5%)，創造出雜誌編輯般的視覺張力。 |
|
| 2. 色彩氛圍與質感階調 Color & Atmosphere | 擺脫預設純黑純白 | 背景色改用溫潤的深藍灰 color/neutral/bg（#0F172A 或 #F8FAFC），避免使用 #000000 純黑。 |
| 雙色微漸層 | 在 Hero 卡片或主要 CTA 注入 135° 微弱漸層（如底色由 #0F2C59 漸變至 #1E40AF），大幅提升畫面立體度。 |
|
| 3. 版面破格與留白節奏 Layout Tension & Negative Space | 打破同等分切開 | 若 AI 生成了 3 等分卡片，可將其中一張卡片設定為 Fill Container 佔據 2 欄寬度，作為主要視覺焦點（Hero Card）。 |
| 縱向張力 | 卡片內部 Padding 從預設的 16px 提升至 24px 或 32px，給予文案與圖片充分的「呼吸空間」。 |
|
| 4. 微邊框與空氣感懸浮陰影 Micro-Borders & Soft Elevation | 精細邊框 | 邊框顏色改用 stroke: #FFFFFF 並設定透明度為 10% ~ 15%，打造極致的玻璃切邊質感。 |
| 空氣感懸浮陰影 | 套用規格：Drop Shadow = X: 0, Y: 4px, Blur: 16px, Color: #0F172A (Opacity: 4% ~ 6%)取代預設死板的重色陰影，營造卡片輕盈懸浮於背景之上的高級感。 |
・ Figma Make AI 實戰教學：當代藝術展《Island New Wave》Bento Grid 製作流程
・專案 Prompt 規格與需求發想
本講義示範如何透過 Figma Make AI 生成骨架，並以「編輯設計（Editorial）美感」與「設計系統規範」進行高保真（High-Fi）細緻化調校。
✨ Figma Make AI Prompt (English Original)
Generate a modern Bento Grid feature section for a contemporary art exhibition named "Island New Wave".
Layout: 1 large hero feature card on the left (60% width) with tag pills and primary CTA button, and 2 stacked smaller highlight cards on the right (40% width).
Visual style: Editorial aesthetic, generous padding, high-contrast typography, dark mode background (#0F172A), subtle 1px border (#334155).
| 規格維度 | 具體參數與內容規範 |
|---|---|
| 展覽主題 | 當代藝術展《Island New Wave（島嶼新浪潮）》 |
| 版面架構 | 不對稱 Bento Grid（左側 60% Hero 卡片 + 右側 40% 兩張上下堆疊 Highlight 卡片） |
| 左卡元素 | 主標題、副標題、膠囊標籤（Tag Pills：#2026展覽 #數位藝術）、主要 CTA 按鈕（立即預約 →） |
| 視覺風格 | 雜誌編輯風（Editorial）、充裕留白（Padding: 32px）、高對比字體、深色模式（#0F172A）、1px 細邊框（#334155） |
・版面結構與 Auto Layout 佈局示意
・ 製作步驟實務拆解
STEP 1
Scratchpad 畫布生成與結構驗證
在 Figma Make 輸入 Prompt 後，將生成的 AI 骨架放在臨時發想畫布中。檢查左側 Hero 與右側 Stacked 卡片的父子容器層級關係。
範例 A：藝術展覽 Bento Grid 特色卡片區塊
Generate a modern Bento Grid feature section for a contemporary art exhibition named "Island New Wave".
Layout: 1 large hero feature card on the left (60% width) with tag pills and primary CTA button, and 2 stacked smaller highlight cards on the right (40% width).
Visual style: Editorial aesthetic, generous padding, high-contrast typography, dark mode background (#0F172A), subtle 1px border (#334155).
請為當代藝術展覽 「Island New Wave（島嶼新浪潮）」 設計一個現代化 Bento Grid 特色展示區塊。
版面配置： - 左側配置一張大型主視覺特色卡片（約占 60% 寬度）。
- 卡片內包含：
- 標籤（Tag Pills）
- 主要行動按鈕（Primary CTA Button）
- 右側（約占 40% 寬度）配置兩張上下堆疊的小型特色卡片，用於展示重點內容。
視覺風格： - 採用編輯設計（Editorial）美學。
- 具有充裕留白（Generous Padding）。
- 高對比字體排版（High-Contrast Typography）。
- 深色模式背景（#0F172A）。
- 卡片外框使用細緻的 1px 邊框（#334155）。
STEP 2
在 Figma Make產生畫面
生成島嶼新浪潮 · 展覽首區
STEP 3
生成下一層級頁面（Detail / Booking Page）
先讓 AI 根據主頁風格，延伸產出下一層級的「展覽詳情與預約頁面」：
Generate a secondary exhibition detail page for "Island New Wave" that opens when clicking the primary CTA button. Include:
- A top navigation bar with a "← Back to Home" button.
- A hero gallery section for art pieces.
- An interactive ticket booking form with date/time selectors.
- Exhibition schedule timeline.
為《島嶼新浪潮》生成一個展覽詳情與預約的二級頁面，包含左上角返回按鈕、藝術品畫廊區、日期時間預約表單與展覽時程表，並保持一致的深色模式風格與字體。
STEP 4
加入按鈕與卡片微互動（Micro-Interactions）
賦予元件 Hover（懸浮）與 Active（按壓）等動態微互動效果：
Create component variants and micro-interactions for all interactive elements: 1. Buttons: Add Hover state with 102% subtle scale-up, glowing border effect, and a right-arrow icon slide animation. 2. Bento Cards: Add Hover state with a -4px vertical lift (elevation) and soft ambient shadow (#38BDF8 at 10% opacity). 3. Tag Pills: Add Hover state changing background opacity from 15% to 30%.
為所有互動元件建立 Variant 微互動狀態：按鈕 Hover 時微幅放大 102% 並帶發光邊框、箭頭向右微滑；Bento 卡片 Hover 時向上懸浮 4px 並帶淡藍色微陰影；Tag 標籤 Hover 時加深背景透明度。
STEP 5
發佈（Publish）
產生專屬網址，可隨時更新
STEP 6
產生專屬網址
STEP 7
設計系統設定（System Guidelines）
可設定設計系統
・ 🌐 《島嶼新浪潮》Figma Make 全站生成與動態串接流程表
包含二級頁面生成、彈窗設計與全站智慧原型（Prototype）串接之雙語 Prompt 對照指南。
| 步驟/層級 | 目標頁面與元件 | Figma Make AI 指令 (英中對照 Prompt) | 頁面元件與轉場動效重點 |
|---|---|---|---|
| STAGE 1 二級頁面 |
展覽詳情與預約頁 (Detail & Booking) |
Generate a secondary exhibition detail page for "Island New Wave" that opens when clicking the primary CTA button. Include: 1. Top nav with "← Back to Home". 2. Hero gallery. 3. Interactive ticket booking form with date/time selectors. 4. Schedule timeline. Maintain dark mode (#0F172A) & 1px border (#334155).
中文指令：
請為《島嶼新浪潮》生成一個展覽詳情與預約二級頁面。包含：1. 帶有「← 返回首頁」的頂部導覽列；2. 藝術品主視覺藝廊；3. 帶有日期與時間選擇器的互動式預約表單；4. 展覽節目時程表。保持相同的深色模式（#0F172A）與 1px 邊框（#334155）。 |
|
| STAGE 2 二級頁面 |
展品藝廊與藝術家 (Gallery & Artist) |
Generate a secondary "Artwork Gallery & Artist Spotlight" page for "Island New Wave". Include: 1. Global Nav ("Gallery" Active). 2. Filterable artwork masonry grid (Digital Art, Light, Soundscapes). 3. Artist Profile with photo slot and bio. 4. Interactive artwork preview cards. Maintain dark mode style (#0F172A).
中文指令：
請生成「Island New Wave」的二級頁面「展品藝廊與藝術家專區」。包含：1. 全域導覽列（「藝廊」設為 Active 狀態）；2. 可依類別篩選的展品瀑布流網格（數位藝術、光影裝置、聲音地景）；3. 藝術家個人簡介與照片 Slot；4. 帶有「語音導覽」觸發器的展品卡片。 |
|
| STAGE 3 二級頁面 |
周邊活動與工作坊 (Events & Workshops) |
Generate a secondary "Events & Workshops" page for "Island New Wave". Include: 1. Global Nav ("Events" Active). 2. Horizontal timeline calendar filtering events by date. 3. Event cards with Title, Speaker, Time, Available Seats badge, and "Reserve" button. Maintain 32px padding and editorial fonts.
中文指令：
請生成「Island New Wave」的二級頁面「周邊活動與工作坊」。包含：1. 全域導覽列（「活動」設為 Active 狀態）；2. 可依日期篩選活動的橫向時程日曆；3. 活動卡片（包含名稱、主講人、時間、剩餘名額標籤與「預約席位」按鈕）。維持 32px 充裕留白。 |
|
| STAGE 4 二級頁面 |
參觀指南與 FAQ (Visit & Access) |
Generate a secondary "Visit Info & FAQ" page for "Island New Wave". Include: 1. Global Nav ("Visit" Active). 2. Opening hours, ticket prices table, and address. 3. Transport guide tabs (Metro, Bus, Parking Map). 4. Accordion-style FAQ section (expandable/collapsible). Maintain dark palette.
中文指令：
請生成「Island New Wave」的二級頁面「參觀指南與 FAQ」。包含：1. 全域導覽列（「參觀」設為 Active）；2. 開放時間、票價表與展館地址；3. 交通指南 Tab 標籤頁（捷運、公車、停車場）；4. 風琴式 FAQ 區塊（點擊可展開/收合問題）。 |
|
| STAGE 5 全域彈窗 |
購票確認彈窗 (Ticket Checkout Modal) |
Generate a floating Modal Overlay for "Ticket Order Confirmation". Include: 1. Glassmorphism overlay with 20px blur and dark background (#0F172A at 90% opacity). 2. Ticket summary (Date, Time Slot, Price). 3. Contact info form (Name, Email, Phone). 4. "Confirm & Pay" CTA and "✕ Close" button.
中文指令：
請生成「購票訂單確認」的懸浮彈窗（Modal Overlay）。包含：1. 毛玻璃質感外框（20px 模糊，#0F172A 90% 透明度）；2. 已選門票摘要（日期、時間場次、總金額）；3. 聯絡人資訊表單（姓名、Email、電話）；4. 主要「確認支付」按鈕與右上角「✕ 關閉」按鈕。 |
|
| STAGE 6 全站串接 |
原型智慧串接總指令 (Master Prototype Flow) |
Create a complete website prototype for "Island New Wave":
1. GLOBAL NAV: Connect Navbar menu items across ALL pages to their respective pages on Click using Smart Animate (Ease Out, 300ms). Connect "← Back to Home" buttons to Landing Page.
2. TICKET FLOW: Set primary CTA buttons ("立即預約展覽 →") to OPEN "Ticket Order Confirmation" Modal Overlay. Set Close and Confirm buttons to close overlay smoothly.
3. CARDS & FAQS: Connect Home Bento cards to open respective section pages. Connect FAQ accordions to toggle open/closed variants.
4. HOVER STATES: Ensure all buttons and cards have Hover states with subtle 102% scale or opacity highlight.
中文指令：
請為「Island New Wave」建立完整且連通的網站原型：1. 全域導覽：將所有頁面的導覽列點擊事件串接至對應頁面（Smart Animate, 300ms），「← 返回首頁」按鈕串接回主頁；2. 購票流程：將所有「立即預約展覽 →」按鈕設定為點擊開啟購票 Modal 彈窗，彈窗關閉按鈕設為平滑關閉；3. 卡片與 FAQ：Bento 卡片點擊開啟對應頁面，FAQ 標題點擊切換展開變體；4. 微互動：確保所有按鈕與卡片啟用 Hover 懸浮放大效果。 |
|
💡 執行建議：請依照 STAGE 1 ➔ STAGE 5 的順序，分次貼上 Prompt 生成各個頁面與彈窗；當所有頁面準備就緒後，最後貼上 STAGE 6 的全站串接總指令，即可讓 Figma AI 自動拉出全站的原型動態連結線！
・ AI 原始生成稿 vs. 視傳級高保真調校對照
| 調校維度 | AI 原始生成稿 (Generic AI) | 視傳級高保真 (Editorial Polish) |
|---|---|---|
| 字體排版 | 通用無襯線體，級縮比不明顯 | 標題改用古典襯線體，36px 大標對比 11px 加寬微型 Tag，呈現雜誌編輯感 |
| 色彩質感 | 硬邊黑白與預設灰階，無層次 | 綁定 #0F172A 深藍灰底色與 1px #334155 精細髮絲邊框，提升質感 |
| 響應架構 | 部份文字為 Fixed Width，易溢出 | 全層級貫穿 Fill Container，隨畫布縮放自動推擠換行 |
| 影像與光影 | 灰階單色 Placeholder | 替換為《島嶼新浪潮》品牌海浪攝影圖，套用 4% 透明度懸浮微陰影 |
💡 實務避坑提醒：切勿直接將 AI 生成的原始 Frame 擺入正式 Mockup 頁面！務必在 Scratchpad 完成「解綁、綁定 Tokens、校正 Auto Layout 鏈結」三部曲後，再轉化為組件移入專案庫中。
・從 AI 到 Design System — 標準化與元件化流程
Figma 高效製作與交付細節規範對照表
涵蓋基礎建設、 Auto Layout 佈局、元件系統、圖層組織與 Dev Handoff 工程交付之實務標準與檢核指標。
| 製作階段 | 核心類別 | 具體製作細節與規範 | 關鍵檢查與驗證指標 |
|---|---|---|---|
| 第一階段 基礎建設 (Foundations) |
色彩系統 Color Tokens |
|
✅ 畫面上絕不出現裸碼 Hex Code。 ✅ 品牌色與語意色完全綁定。 |
| 文字系統 Typography |
|
✅ 所有文字預設設定固定行高。 ✅ 無多餘 Enter 產生的空行。 |
|
| 空間與圓角 Spacing & Radius |
|
✅ 全站 Padding 與 Gap 無亂數像素（如 13px, 17px）。 | |
| 第二階段 結構佈局 (Layouts) |
容器邏輯 Frame vs Group |
|
✅ 圖層面板中無非必要 Group 存在。 ✅ 佈局具備彈性架構。 |
| 響應式機制 Resizing Rules |
|
✅ 縮放外層畫布時，內部組件彈性延伸縮放不破版。 | |
| 進階排版 Advanced AL |
|
✅ 懸浮紅點綁定於容器內且不受流向擠壓。 ✅ 邊框佔用空間符合預期。 |
|
| 第三階段 元件系統 (Components) |
原子設計 Atomic Design |
|
✅ 底層原子修改時，頂層組件同步更新。 |
| 變體與屬性 Variants & Props |
|
✅ 避免建立數百個重複 Variant，維護高效率。 | |
| 插槽機制 Slot Concept |
|
✅ 組件外框固定時，內部內容可無縫客製替換。 | |
| 第四階段 整潔組織 (Cleanliness) |
命名規範 Layer Naming |
|
✅ 圖層樹結構乾淨清晰，無預設亂數檔名。 |
| 專案頁面組織 Pages Hierarchy |
|
✅ 跨團隊成員能於 3 秒內定位所需模組與頁面。 | |
| 第五階段 工程交付 (Dev Handoff) |
模式適配 Dev Mode Alignment |
|
✅ Dev Mode 下可直接 1:1 複製 Flexbox CSS 與 Token 代碼。 |
| 圖示規範 Icon Guidelines |
|
✅ Icon 縮放或更換時位置不偏移。 ✅ 無實時可變 Stroke 造成工程困擾。 |
|
| 資產輸出 Export Settings |
|
✅ 工程師可一鍵下載打包好的圖像與 Icon 資產。 |
交付前 30 秒快速踩坑檢核清單 (Final Checklist)
| 狀態 | 檢核類別 | 具體檢核項目與測試方法 |
|---|---|---|
| Token 綁定率 | 畫面選色與文字階層是否已 100% 綁定 Token / Style？（檢視 Inspect 面板完全無裸碼 Hex） |
|
| 文字行高設定 | 所有文字樣式是否皆已設定固定行高 (Line Height)？（避免預設與段落擠壓） |
|
| 圖層命名清理 | 圖層面板是否已清理完畢？（確認無 "Rectangle 1" 或 "Frame 123" 等亂數命名） |
|
| 畫布響應測試 | 縮放外層畫布時，內部卡片與內文是否自動彈性響應？（測試改為 Fill Container 自動換行推擠） |
|
| 按鈕尺寸自適應 | 按鈕文字變長時，按鈕圖示與邊距是否自動向外擠壓？（測試 Hug Contents 與 Gap 防重疊） |
|
| Icon 規範化 | Icon 的 Master 是否均帶有固定 Bounding Box（如 24x24）且已執行 Flatten 合併？ |
💡 團隊協同效益：
落實上述製作細節，能讓專案的維護成本降低 70%，且工程師能在 Dev Mode 中達到 1:1 零溝通誤差落地 的最高交付標準。