使用者介面設計課程講義

Unit 08．Mockup ＼ High-Fidelity Mockup

把「代幣」變成看起來
像真的產品的精稿MOCKUP

設計系統定好了規則，精稿 把規則變成看得懂的畫面。

拾器的色彩、字體、間距、元件代幣都在 ui07 定好了，這一關要把這些代幣真正套進畫面——從線框稿的灰色方框，變成有真實色彩、真實文案、看起來像正式產品的高保真精稿。你會學到精稿該遵守的設計原則、怎麼用 Figma Agent 一頁一頁把精稿生出來，還有容易被忽略、但正式上線前一定要做的無障礙對比度檢查。

0個精稿必須遵守的設計原則
0套設計系統代幣，貫穿所有精稿頁面
0個步驟：套代幣→逐頁生成→對比檢查

內容整理於 2026 年 9 月．中國科大視傳系｜使用者介面設計

拾
拾器 Pick It 這一關要決定：畫面看起來是不是像真的產品
01精稿是什麼 02設計原則 03套用設計系統 04逐頁生成 05無障礙對比 06外掛與模板
這堂課怎麼上 精稿最怕「憑感覺挑顏色」——01～02 關先講清楚精稿是什麼、該遵守哪些原則；03～04 關實際示範怎麼把 ui07 的代幣套進第一頁、再用 Figma Agent 逐頁生成；05 關補一個常被忽略的無障礙對比度檢查，06 關整理幾個真的能加速製作的外掛與模板。
怎麼下指令，AI 才聽得懂 延續同一個對話串——先承接 ui07 定出的色彩字體代幣，指令依序講「先做第一頁範例」「照著範例逐頁生成」「每頁生成後核對代幣有沒有跑掉」，AI 才會做出彼此一致、而不是每頁風格微妙不同的精稿。
STAGE 01

精稿是什麼，
為什麼設計系統還不夠

什麼是精稿？精稿（Mockup／高保真設計）是最接近真實產品的靜態畫面：有真實色彩、真實字體、真實文案跟圖片，通常還會標出間距與圓角，是開發前最後一份「畫面規格書」。跟只標示區塊位置、不管顏色字體的線框稿不同，精稿要讓每個人一眼就看出「做出來大概會長這樣」。

跟設計系統的關係？精稿不是設計師憑感覺挑顏色字體，而是把 ui07 定好的色彩、字體、間距、元件代幣，實際套進每一個畫面——這樣做出來的每一頁才會像同一個產品，而不是七拼八湊、每頁調性都不太一樣。

為什麼還要有這一關？線框稿確定「畫面上有什麼」，設計系統定出「規則」，精稿則是把兩者合起來，變成可以拿去跟客戶、工程師溝通、甚至直接切版開發的最終畫面——少了這一關，前面的努力都停留在「說得出來，但看不到」的階段。

參考資料
操作提醒下面 03～04 關會實際示範怎麼把設計系統代幣套進第一頁、再用 Figma Agent 逐頁生成；05 關補一個常被忽略但很重要的無障礙對比度檢查。

承接拾器對話串．Figma Agent 已經記得 ui07 定出的設計系統

Figma Agent
拾器的設計系統做完了：色彩代幣、文字階層、間距系統、按鈕變異都定好了。接下來要把線框稿變成真的精稿，這次不要每頁重新挑顏色，全部照設計系統來。
收到，設計系統的代幣我都記得——brand/primary 鼠尾草綠、surface/raised 米杏、text/primary 深咖啡，字體標題用 Chiron GoRound TC。做精稿會分幾步：先做出一頁範例，確認代幣套用正確；再照著範例的邏輯逐頁生成；最後別忘了核對文字對比度，確保正式上線前無障礙檢查會過。

這串對話從 ui07 延續過來，精稿會建立在設計系統已經定出的代幣之上

STAGE 02

Step 1．精稿要遵守
的四個設計原則

精稿做得好不好看是主觀的，但下面四個原則是客觀可以檢查的——做完精稿，拿這四點回頭檢查一次，比單純「感覺對不對」更可靠。

參考資料
操作提醒點右邊每一張卡片，四個原則都跟拾器的設計系統直接對應，不是憑空的抽象概念。

精稿檢查表．四個客觀可檢查的原則

01 一致性 Consistency 同一個按鈕在每一頁都用一樣的顏色代幣、圓角、字重——不會「這頁比較好看就換一下」。
02 層級 Hierarchy 用字級、顏色、留白引導視線：最重要的行動該是全頁最搶眼的元素，次要資訊自然降到 text/small。
03 真實內容 Real Content 文案盡量用真實或接近真實的內容，不要塞假字——假字看不出真實文案撐爆版面的風險。
04 無障礙 Accessibility 色彩再好看，對比不夠、看不清楚文字就不合格——05 關會實際示範怎麼檢查對比度。
Figma Agent
做精稿的時候，有沒有幾個客觀一點的檢查標準？不要只靠「感覺好不好看」。
有四個可以直接檢查：一致性（同一元件在每頁用一樣的代幣）、層級（最重要的行動最搶眼）、真實內容（別用假字，真實文案常常比想像中長）、無障礙（文字對比度是否足夠）。做完精稿，照這四點回頭檢查一次，會比單純憑感覺可靠很多。

這四點，03～05 關會逐一實際示範怎麼做

STAGE 03

Step 2．先把第一頁
做對：套用設計系統

在請 Figma Agent 逐頁生成之前，一定要先手動確認「第一頁」的代幣套用是正確的——這一頁會是後面所有頁面模仿的範本，第一頁錯了，後面全部都會跟著錯。右邊示範拾器的登入頁，標出畫面上每個區塊實際用了哪個設計系統代幣。

你的產出
操作提醒這一步不用急，花時間把第一頁核對清楚，比後面發現全部頁面都要重做划算很多。

範例．拾器登入頁精稿，標出實際套用的代幣

9:41
拾器 Pick It
登入帳號，開始交換材料
帳號
密碼
登入
還沒有帳號？註冊一個
1 2 3 4
1surface/base cream-50 當畫面背景
2text/h2＋Chiron GoRound TC 當標題字體
3surface/raised 米杏當輸入框底色，radius/sm 8px 圓角
4brand/primary 鼠尾草綠當主要按鈕，radius/lg 20px 圓角
Figma Agent
先幫我做登入頁的精稿，顏色字體全部照設計系統來，做完幫我列出這一頁實際用了哪些代幣，我要核對。
登入頁做好了：背景用 surface/base、標題用 text/h2 搭 Chiron GoRound TC、輸入框用 surface/raised 加 radius/sm、主按鈕用 brand/primary 加 radius/lg。這頁會是後面所有頁面的範本，確認沒問題我們再往下一頁生成。

第一頁核對沒問題，04 關就能放心照這個邏輯逐頁生成

STAGE 04

Step 3．用 Figma Agent
把精稿一頁一頁長出來

第一頁核對沒問題之後，接下來不是每頁重新下指令挑顏色，而是請 Figma Agent「照著第一頁的邏輯」繼續生成——這樣才能真正做到「一套設計系統，貫穿所有頁面」。右邊拆成 5 個步驟，每一步都附檢查重點。

Figma Agent 輔助
操作提醒點右邊步驟上的圓點可以跳著看；每生成 2～3 頁就核對一次代幣，不要等全部生成完才回頭抓錯。

互動練習．點步驟圓點，逐步看精稿怎麼一頁一頁生成

Figma Agent
照登入頁的邏輯，幫我生成物品列表頁跟物品詳情頁，代幣都要跟登入頁一致，卡片式的按鈕記得存成 Component。
兩頁都生成好了，背景、字體、按鈕顏色都延用登入頁的代幣；「立即領取」跟「收藏」兩個按鈕都存成了 Component，之後改樣式只要改一次，所有用到的地方會一起更新。

全部頁面生成完，05 關會示範最後一項容易被忽略的檢查：無障礙對比度

STAGE 05

Step 4．無障礙對比度：
算得出來，不是憑感覺

文字顏色跟背景色的對比夠不夠，不是「看起來還好」就算過關——國際通用的 WCAG 無障礙規範，明確訂出了對比度門檻：一般內文至少要 4.5:1，大型文字（18pt 以上或 14pt 粗體）至少要 3:1。右邊可以直接選拾器設計系統裡的顏色組合，即時算出對比度、看是否過關。

參考資料
操作提醒對比度是用色彩的「相對亮度」計算出來的，不是單純比較色碼看起來像不像深色——同樣是深色，跟不同背景搭配，對比度可能差很多。

互動練習．選文字色跟背景色，即時算出 WCAG 對比度

STEP 1．文字顏色

STEP 2．背景顏色

拾器 Pick It．範例文字 Aa

即時產出．對比度

Figma Agent
如果卡片上要疊文字說明，用米杏文字疊在鼠尾草綠背景上可以嗎？
算出來對比度是 3.06:1，一般內文（4.5:1）不合格，大型文字（3:1）勉強壓線通過——這個組合看起來是「淺色疊深色」，但鼠尾草綠其實不夠深，兩個顏色的亮度沒有差很多。如果是內文小字，建議改用白色文字，或是把背景換成更深的 green-700，對比度才會穩穩過關。

正式定稿前，把畫面上每一組文字／背景都這樣算一次，比交給無障礙外掛掃出一堆問題再回頭改划算

STAGE 06

做精稿用得上的
Figma 外掛與模板

除了手動畫跟請 Figma Agent 生成，這幾個外掛可以再加快製作精稿的速度：假資料不用自己編、圖片不用到處找、無障礙對比度也有工具可以直接掃描，跟 05 關手動算的結果互相對照。

參考資料
操作提醒外掛清單以 Figma Community 實際上架的工具為準，介面跟功能可能隨版本更新調整。

推薦外掛．做精稿常用的四個工具

Figma Community Plugins

Stark．無障礙對比度與色盲模擬檢查外掛，可對照 05 關手動算出的結果 Content Reel．一鍵填入真實感的姓名、頭像、數字，取代 Lorem ipsum 假字 Unsplash．直接在 Figma 裡搜尋、插入免費圖庫照片，不用切換視窗下載 Autoflow．自動畫出畫面之間的連接箭頭，適合整理精稿的頁面流程圖

課後作業與下一步

把拾器的操作方式，換成你自己期中案例的產品，走一次「設計系統 → 精稿」的流程

本週交付項目

  1. 把你自己期中案例的其中 2～3 個線框稿頁面，套用你在 ui07 定義的設計系統代幣，做成精稿，其中一頁要先當「範本頁」核對過代幣才能繼續往下做。
  2. 用 Figma Agent 逐頁生成時，比照 04 關的五個步驟操作，每生成 2～3 頁就核對一次代幣是否一致。
  3. 自己選畫面上至少 2 組文字／背景色組合，用 05 關教的方法算出對比度，確認至少通過 WCAG AA（一般文字 4.5:1，大型文字 3:1），不合格的要調整後再算一次。
  4. 安裝一個無障礙檢查外掛（例如 Stark），對照你自己手動算出的對比度結果是否一致。
ui07．設計系統＋變數回顧色彩、字體、間距代幣← ui09．Prototype 互動原型設計下一個教學單元→

從設計系統的色彩字體代幣出發，先核對第一頁範本，再用 Figma Agent 逐頁生成精稿，最後補一項容易被忽略的無障礙對比度檢查——四個設計原則、五個生成步驟，都是可以直接照做的操作清單，不是抽象的美感建議。內容整理於 2026 年 9 月。