設計流程

1.先用低保真線框想清楚布局

一開匙可以先決定主要區塊，像是導覽列、側欄、內容區、工具列、卡片/表格、分頁/篩選器。
我們從簡單 ASCII 線框示意：

2.決定設計系統與元件

字體/字級：標題、內文、微字（12/14/16/20…）
色彩：主色、互動色、成功、警告、錯誤、灰階
間距：4 或 8 的倍數（例如 8/16/24/32 px）
元件庫（擇一）：原生 HTML+CSS、Tailwind、Bootstrap、shadcn/ui、Material UI
共用元件：按鈕、Input、Select、Tag、Card、Modal、Toast、表格列

3.先做「骨架」(Layout skeleton)，再塞內容

把版面與排版先完成（Grid/Flex、RWD 斷點），之後再接資料與互動狀態（loading/empty/error）。

4.接上互動與狀態

Loading/Empty/Error 三態：卡片骨架（skeleton）、空清單、錯誤提示
元件的 hover/focus/active 狀態和表單驗證與錯誤訊息位置
行動版操作（手指可點、點擊區域要大、固定底部操作列）

5.檢查清單

對齊與節距是否一致（8px/4px 網格）
色彩對比是否達到 AA（文字對背景至少 4.5:1）
RWD：<1200px、<800px、<360px 都不爆版
可用性：主要任務 3~5 步內完成、按鈕文案動詞化
可維護性：把重複的色彩/間距抽成 CSS 變數或設計 Token