本週地圖：從線框到有系統的精稿
W6 你做出了需求、受眾、Sitemap 與線框。這週要讓它有調性、有系統：先用情緒板對齊視覺方向，再把顏色、字體、按鈕做成「有名字的設計系統」，最後把線框換成精稿。
開工前：確認 W6 帶了什麼過來
檢查上週成果與設定（4 項）
Lv.5 一個工作台（情緒板）＋ Lv.6 六個工作台（變數 → 文字樣式 → 按鈕元件 → 套用線框 → 批次內容 → 跨頁稽核）。課堂做到 STEP 3，課後完成 STEP 4–6。
Stage 3．情緒板與視覺風格企劃
三個步驟：從關鍵字到色碼
- 定義品牌視覺關鍵字：從 RFP 與受眾洞察提煉 3–4 個形容詞（示範案例：海島慢遊、在地手作溫度、永續共生）。
- 把關鍵字變成「情緒溫度」：每個關鍵字一個色塊，飽和度與冷暖要明顯不同（沉靜、溫暖、搶眼、安靜）。四塊都差不多，情緒板就失去對比。
- 歸納成 4 個可建立變數的色碼：主色、輔色（CTA）、淺色背景、深色文字，並附對比估算。
① 建立團隊視覺共識，避免大家對「現代感」「質感」理解不同；② 向業主提案時，在投入繪圖工時前先取得調性認可。詳見 UNIT 04 視覺風格定位。
互動工作台：改色塊顏色、關鍵字與質感，看指令與色票一起變
展開最上方「主題與關鍵字」，把 4 個關鍵字與質感描述改成你的（例如：「安靜」「紙感」「可信賴」「一點點活潑」）。工作台的色塊名稱與指令會立刻換成你的；每個色塊的顏色、關鍵字與質感描述也可以直接在工作台裡改（會和最上方的專案卡同步），「自動套用到 Lv.6 設計系統」預設開著：色塊一改，後面的品牌變數、按鈕元件、精稿、指令階梯與規格速查表都會直接換成你的色票（①＝主色、③＝CTA 輔色、④＝背景）；第 3 個預設是 CTA 色源（最搶眼）、第 4 個是最安靜的背景色來源。
跳過情緒板直接建變數。做到一半才發現「這個藍是不是太冷」，這時要改的是套在好幾個畫面上的變數，成本比在情緒板階段討論高很多。
Stage 4．UI Style Guide 與精稿設計系統
這一關最容易「做起來像、驗起來不對」。所以每一步都用同一種節奏：先懂意義 → 動手調整 → 看指令自動組成 → 模擬執行 → 驗收清單 → 補救指令。目的是讓你確信：這段指令貼進 Figma，真的能把這一步做完，而且你知道怎麼驗證。
開工前：指令要寫到多細，Agent 才做得出一樣的結果？
STEP 1 品牌變數
STEP 2 文字樣式
STEP 3 按鈕元件
STEP 4 套用到線框
STEP 5 批次填入真實內容
STEP 6 跨頁稽核
色碼來自你在 Lv.5 歸納的結果，按下情緒板的「把這組色帶到 Lv.6」就會同步。變數命名（ocean／sunset 之類）也可以改成你的品牌名，例如 @color/paper-500。名稱要固定，後面所有指令才能引用。
示範案例：四個 P0 頁面的精稿（桌機）
設計品牌色只顧好不好看，沒考慮文字疊在色塊上的對比度。這個案例中，對比不足直接關係到 W8 的 WCAG AA 硬性規定，評審很可能實際用檢測工具驗證。
把「詳情頁」與「預約頁」也套上同一組變數與元件後，請 Agent「檢查四個頁面的按鈕與間距是否一致」。
規格速查：色票、字體、網格與 Auto Layout
這一區是「查表用」。做 Lv.6 時遇到不確定的數字，回來這裡找。數值來自 UNIT 04 的 RWD 與視覺規範。
色彩 Token 與 WCAG AA 對比（跟著你的情緒板即時更新）
字體階層（標題 Noto Serif TC／內文 Noto Sans TC）
| 樣式 | 字體 | 字級 | 行高 | 字重 | 應用 |
|---|---|---|---|---|---|
@text/H1 | Noto Serif TC | 36–48px | 1.2 | Black 900 | 首頁主視覺標題 |
@text/H2 | Noto Serif TC | 24–32px | 1.3 | Bold 700 | 區塊標題 |
@text/H3 | Noto Sans TC | 18–20px | 1.4 | Bold 700 | 卡片標題 |
@text/Body | Noto Sans TC | 15–16px | 1.6 | Regular 400 | 內文、表單 |
@text/Caption | Noto Sans TC | 12–13px | 1.4 | Medium 500 | 標籤、說明 |
@text/Button | Noto Sans TC | 14–15px | 1.3 | Bold 700 | 按鈕文字 |
標題用襯線帶出人文溫度，呼應情緒板調性；H3 以下用無襯線，在小字級與介面元件上辨識度更高。層級靠字重而不是另外挑字體，維持一致與載入效能。
12 欄網格與原子設計
桌機 12 欄、Gutter 24px、內容最大寬 1200px 置中。元件依原子設計拆解，方便 Agent 逐層建立、逐層重複使用：Atoms 原子（按鈕、色彩變數、圖示）→ Molecules 分子（搜尋列、卡片標頭）→ Organisms 組織（Hero、導覽列、頁尾）。
Auto Layout：Fill Container 與 Hug Contents
用在行程卡片、輸入框。寬度隨父容器伸縮，12 欄縮成手機 4 欄時，卡片會自動變窄。
用在按鈕。長度隨文字多寡自動伸縮，把文字換成「立即預約」也不會被裁切。
見補充講義 UNIT 13：Figma Auto Layout 深度實戰與視覺細緻化，有互動練習場。
手機上可點擊元件（按鈕、圖示）最小觸控範圍不要小於 44×44px，這在無障礙規範裡是硬性指標，W8 會驗收。
本週作業與檢核
目標：W8 上課前，設計系統建好，四個 P0 頁面都有精稿，Lv.5–6 成果存進成果收件匣。
交付 1情緒板與色票（Lv.5）
交付 2設計系統（Lv.6 STEP 1–3）
交付 3精稿與稽核（STEP 4–6）
W8 會在 Figma Design 用 Prototype 讓精稿可以點，做無障礙測試，並把公司實績、甘特圖、簡報骨架與交稿前審稿一次完成。前往 UNIT 07 →