前端 Design Token 巡檢模板：讓首頁、Blog 與文章卡片保持一致

內容站不是只有文章寫完就好。當首頁 Hero、Blog 列表、文章詳細頁、分類頁與 CTA 按鈕各自長出不同色彩、圓角、陰影與字級時，讀者會感覺網站像是拼裝起來的，而不是一個長期經營的品牌入口。

這份 Design Token 巡檢模板是給 UCAMC 這類 Next.js 內容站使用的日常檢查表：不需要一次重做設計系統，而是每天用小範圍、可回滾的方式，確認 UI 還維持在同一套品牌語言裡。

1. 先定義這次巡檢範圍

每次巡檢先限定範圍，避免「順手」改成大改版。建議只選一到兩個區塊：

• 首頁 Hero 與最新文章卡片。
• /blog 列表卡片與工具列。
• 文章頁的分類、標籤、封面圖與正文排版。
• 分類頁卡片與返回連結。
• 全站按鈕、連結 hover、文字選取色。

如果巡檢發現問題很多，先記錄，不要一次全部調整。品牌站的維護重點是穩定累積，而不是每天讓讀者看到截然不同的介面。

2. 色彩 Token：確認不是每個元件自己選顏色

先看全站是否仍沿用核心色彩，例如：

用途	檢查內容
背景	頁面是否維持白色、淺灰、淡藍灰的乾淨層次。
主文字	文章標題與正文是否有足夠對比，不要過淡。
Accent	紅、綠、藍、黃橘是否只用在重點，不要到處搶焦點。
分類標籤	不同頁面的 category pill 是否有一致圓角、邊框與 hover。
CTA	主要 CTA 是否清楚，次要 CTA 不應比主要 CTA 更搶眼。

一個實用做法是從 CSS 變數開始檢查，而不是在每個元件裡找 #2563eb、#f59e0b 這類硬編碼。若真的需要特殊色，也應該在註解或 class 命名上說明用途。

3. 按鈕 Token：主 CTA 與次 CTA 不要互相競爭

按鈕是最容易失控的地方。巡檢時可以逐項看：

• 首頁主要 CTA 是否仍是最明顯的行動入口。
• 次要 CTA 是否使用透明、文字型或較低噪音的樣式。
• Blog 卡片的「閱讀文章」是否和首頁 CTA 有同一種品牌語感。
• 按鈕圓角、字級、邊框、陰影是否一致。
• 手機版按鈕是否會擠壓、換行或造成水平捲動。

如果站內已有共用元件，例如 LegacyButton，優先新增 variant 或 scoped class，而不是在頁面裡複製一長串 class。這能避免首頁修好了，Blog 列表卻仍保留舊樣式。

4. 卡片 Token：資訊密度比裝飾更重要

內容站的卡片要讓讀者快速判斷「這篇文章值不值得點」。巡檢時可以檢查：

• 每張卡片是否有分類、日期、閱讀時間、標題、摘要與清楚 CTA。
• 卡片陰影是否過重，導致每個區塊都像彈窗。
• 邊框與背景是否足以分隔內容，但不會像資料表。
• 最新文章卡片是否有足夠呼吸空間，尤其中文標題不要被擠成尷尬斷行。
• 手機版是否可以單欄閱讀，不需要橫向捲動。

卡片的重點不是「更多裝飾」，而是讓文章的標題、摘要與分類更好掃讀。若想強化視覺，可以先調整 spacing、border alpha、背景層次，而不是直接加更多顏色。

5. 文字階層：讓讀者知道哪裡是入口、哪裡是內容

每日巡檢可以用瀏覽器實際看三個尺寸：桌面、平板寬度、手機寬度。檢查：

• H1 是否在第一眼說清楚頁面目的。
• H2 / H3 是否有明顯但不突兀的階層。
• 摘要文字是否足夠可讀，不要過小或過淡。
• 英文標籤如 Latest note、Knowledge map 是否和中文文案搭配自然。
• 文章內 inline code、清單、表格、task list 是否渲染正常。

如果只靠 build 結果，很容易漏掉中文斷行、按鈕擠壓或列表縮排問題。對內容站來說，視覺巡檢是 SEO 與品牌品質的一部分。

6. 手機版溢位檢查

最簡單的手機版巡檢方式，是看頁面是否出現水平捲動。可以用瀏覽器或自動化工具確認：

const overflow = document.documentElement.scrollWidth > window.innerWidth;

若出現溢位，常見原因包括：

• 卡片內部使用固定寬度。
• 按鈕列沒有 flex-wrap。
• 長英文 slug、URL 或 inline code 沒有換行策略。
• 圖片、表格、程式碼區塊沒有 max-width: 100% 或 overflow guard。

修復時先加容器保護，例如 max-width: 100%、min-width: 0、overflow-wrap: anywhere，再考慮縮小字級。不要第一步就把內容刪短，因為問題通常在版面約束而不是文案本身。

7. 每日紀錄模板

可以把每次巡檢記錄成一小段維護 log：

欄位	填寫內容
巡檢日期	例如 2026-07-09。
檢查頁面	/、/blog、/{slug}、分類頁。
發現問題	按鈕層級、卡片密度、手機溢位、裸露 URL 等。
修改檔案	CSS、元件、頁面或文章。
驗證方式	npm run lint、npm run build、local production route、瀏覽器畫面。
後續觀察	是否需要 Leon 決策或之後再拆小任務。

這個 log 不需要很長，但要能回答兩個問題：今天為什麼改？改完怎麼知道沒有壞？

延伸閱讀

如果你正在經營 Next.js 內容站，可以搭配閱讀：

• Next.js 內容站每日 SEO 巡檢清單：確認 route、metadata、robots 與 sitemap。
• 前端視覺回歸巡檢清單：把首頁、Blog 與手機版截圖納入日常檢查。
• 內容資產庫模板：把文章、截圖、Prompt 與檢查表整理成可重複使用的素材。

小結

Design Token 巡檢不是為了追求完美設計系統，而是讓每一次小修改都不偏離品牌方向。當色彩、按鈕、卡片、文字階層與手機版約束逐步穩定，UCAMC 才能從舊 Blog 的內容整理，變成讀者願意收藏、搜尋引擎也容易理解的技術內容品牌站。