超級 AI 個體｜互動測驗站
設計規範
這一頁用的是站上 真正的 token 與元件，所以不會跟實作不一致——CSS 改了它就跟著變。 改任何視覺之前先看這裡；規格會跑掉，多半是因為有人在元件裡寫了一次性數值。
品牌層規範見 cis.lifehacker.tw；這裡只處理「在這個網站上怎麼落地」。
字級
最小 14px。任何 UI 文字都不低於這個值（2026-08-21 定）。
頁面主標 H1
42–58px · font-black
超級 AI 個體
單元／章節主標
28–30px · font-black
什麼是 AI Agent？
區塊標題 H2
22px · font-bold
Lv1／Lv2／Lv3
卡片標題 H3
17px · font-bold
讓 AI Agent 學會你的一切
內文
15px · leading-relaxed
分清 Chat 與 Agent 是兩種東西，並對齊全課路線圖。
次要說明／meta
14px —— 下限
5 單元 · 5 個免費 · 3 個知識點
唯一例外
插畫元件內部
components/objects/ 與 content/svg 裡的標籤可以小於 14px——那是圖的一部分， 不是要讀的介面文字。插畫以外一律 14px 起跳。
字體
英文在前、中文在後
英數 Inter、中文 Noto Sans TC（Google Fonts variable，layout.tsx 載入）。 不切 unicode-range，靠堆疊順序分工。等寬用 Tailwind 預設 font-mono（實務上是 SF Mono）。
圓角
四個值，沒有第五個。不要再寫 rounded-[18px]／[22px]／[24px] 這類一次性數值——那是規格跑掉的主要來源。
rounded-lg／rounded-xl／rounded-2xl 已在 @theme 對齊成同一個 16px，寫哪個都一樣。
顏色
全站不用紅色——答錯的回饋是圖形變化，不是紅字。
一層一色（僅限層級堆疊）
這裡的顏色有語意（代表哪一層）；序號圓圈那種純順序的地方不要上彩虹。
陰影
一律暖色系（色相 60，對齊底色），不要用純黑。用 .card-lift 就好，不要各自寫。
.card-lift
滑鼠移上來會上浮 6px、陰影加深。hover 不改 border 顏色。
靜止值
0 1px 2px oklch(62% .018 60/.14)
0 8px 20px -12px oklch(62% .02 60/.28)
動態
所有動畫都要有 prefers-reduced-motion 分支。
全站預設
220ms · easeInOutCubic
cubic-bezier(0.65, 0, 0.35, 1)
已寫進 --default-transition-*，Tailwind 的 transition 工具自動吃到。進出兩端都有緩衝。
需要回彈時
側欄展開
cubic-bezier(0.68, -0.35, 0.32, 1.35)
Tailwind v4 陷阱
位移不會補間
-translate-y-* 編譯成的是 translate 屬性而不是 transform。自訂 transition 時務必把 translate 列進 transition-property， 否則位移是瞬間跳的。
共用元件
有這些就別自己刻。圖示一律 Lucide（size 16 / strokeWidth 1.75），品牌標誌才用 @lobehub/icons。
按鈕 .btn
高 40px · 圓角 10px · 14px 粗體
OptionButton
單選題選項
ExplainCard
互動後的說明框
狀態徽章
序號、免費、鎖定
版面
內容欄寬
首頁 1100px；章節頁與單元頁 880px。
站頭底緣到第一行文字
三種頁型都一樣
60px。main 用 pt-14 sm:pt-[72px]，首頁另有 hero header 的 24px。
卡片間距
24px（gap-6 / space-y-6）。
章節封面
放進去就自動生效
1200×628，檔名 public/covers/<章節 id>.webp。首頁在建置時掃資料夾，沒有對應檔案的章節用品牌色漸層佔位。
文案
中英數之間
不要留空格
JSX 裡中文段落換行時，行尾要補 {''}—— 否則換行會被收斂成一個半形空白，中文之間就多一個空隙，還會變成斷行點。