視覺風格定位
與 RWD 規範

這一單元只有三件事，而且有順序：① 定位（想給人什麼感覺）→ ② 設計系統（把感覺變成可重複使用的數值）→ ③ RWD 規範（讓同一套數值在每種螢幕都成立）。先點一下三張卡片，看每一層「回答什麼問題、交出什麼東西」。

拖動（或點擊）座標上的橘色圓點，離它最近的 3 個關鍵字會自動被選中；情緒板與下方的迷你首頁會立刻換上對應的色彩、字體與圓角。你也可以直接點關鍵字按鈕，最多選 3 個。

設計系統不是「一份漂亮的規範圖」，而是一組有名字的數值（Token）。名字固定、數值可以換——改一個地方，全站一起變。

網頁色彩必須遵守 W3C WCAG 2.1 AA：

點左邊的色塊換顏色，對比度與右邊的介面預覽會即時更新（也可以先到 1-2 套用一組風格）

設計系統的色彩分三層：Primitive（原始色票）→ Semantic（有用途的名字）→ Component（元件拿去用）。下面改最左邊的原始色，看哪些元件跟著變；再點「綁定 Variable」把某個元件改成「寫死 Hex」，體會漏改是怎麼發生的。

字級不是一個個憑感覺挑，而是從基準字級 × 比例算出來。調整下面兩個參數，看五個層級怎麼被一起推動；桌機與手機用不同的「比例強度」，避免手機標題大到一行放不下。

12 欄能被 1、2、3、4、6 整除，分欄彈性最高。切換裝置與版型，再拖動 Gutter 與 Margin，看橘色的欄怎麼承接內容。欄數會跟著斷點變（12 → 8 → 4），這就是 RWD 規範的第一條。

斷點是一條線：螢幕寬度越過它，版面規則就換一套。元件化是一份母版：改一次，所有用到它的地方一起更新。兩者合起來，才是「一份設計、多種螢幕」。

下面這個是真的在用 CSS 容器查詢（Container Query）運作的迷你網站，寬度被你控制。慢慢拖過 768 與 1200 兩條橘線，觀察導覽列、卡片欄數、網格欄數的變化；再關掉右邊的「轉化策略」，看看沒有這些規則時會壞成什麼樣子。

上面右側的四個開關，就是四種把桌機版面「轉」進手機的方法。對照表放在這裡，之後設計手機版時逐項檢查：

元件（Component）有一份母版 Master，用到它的每個地方叫實例 Instance。原子設計（Atomic Design）則是它的層級：原子（按鈕）→ 分子（搜尋列＝輸入框＋按鈕）→ 組織（Header、卡片）。

改左邊的母版，看右邊四個實例；再對其中一個按「覆寫文字」或「Detach」，比較連動有什麼不同

Auto Layout 是元件「會自己伸縮」的關鍵。每個子物件的寬度有三種模式：Fixed 固定、Hug 貼合內容、Fill 填滿剩餘空間。拖動 Frame 寬度、改按鈕文字、切換模式，觀察哪些設定會破版。

右邊是一張正在長大的 Style Guide 畫布。左邊選步驟：每完成一步，右邊對應的區塊就從虛線「長」成實體。每一步都附上 Figma 手動操作、完成標準，以及可以直接貼給 Figma Agent 的語法。

如果你的 Figma Agent 可以一次吃長指令，直接貼下面這份。它把六步全部串起來，並要求每步完成後回報、遇到無法操作的功能要明說，避免它默默跳過。

下面的手機一開始是「直接把桌機稿塞進 375px」的慘況。逐項打開右邊的修正，看問題一個一個消失；全部打開後，你就完成了一次標準的手機版轉化。

整個單元就是這三層：定位決定「像什麼」，設計系統把它變成有名字的數值，RWD 規範規定這些數值在不同螢幕怎麼變。下面九句話，各自屬於哪一層？先選，選完才會看到解釋。

各組對照這份清單做 UI/UX 檢查。勾選狀態會留在你的瀏覽器裡。