關於這個系列
這是一份完整的設計開發紀錄，記錄了我如何在 Antigravity AI 的協助下，從一張白紙出發，逐步完成這套 Hugo 網站主題的全過程。
整個過程無縫融合了「使用者需求釐清 → 視覺定義 → 技術實作 → 持續迭代」的現代產品開發思維，同時也是一份 AI 協作工作流的真實案例。
系列大綱
| # | 主題 | 重點 |
|---|---|---|
| Step 1 | 專案啟動與視覺偏好調查 | 確認風格、佈局、色彩基調 |
| Step 2 | 視覺原型與設計定義 | UI Mockup 產出與定稿 |
| Step 3 | 基礎佈局與全寬網格實作 | CSS Grid 全寬架構實作 |
| Step 4 | 元件優化與內容細節磨合 | 卡片、導覽、廣告版位 |
| Step 5 | 資訊密度優化與最終結案 | 極簡化、截斷邏輯收尾 |
| Step 6 | 智慧 Dashboard 組件開發 | Shortcodes、進度條、數據卡片 |
設計核心原則
在展開這個系列之前，以下是我們整個協作過程中秉持的三個設計指引：
全寬優先：打破傳統部落格的置中框架，讓介面最大化利用螢幕寬度，給人「工具入口」而非「個人日記」的感受。
資訊密度：參考 Google News 的佈局基因，用格狀卡片呈現資訊，讓讀者能在最短時間掃視到最多內容。
極簡美學：使用淡色系作為基底，以搶眼的點綴色引導視線，字型選用 Inter 以強化中西文混排的一致感。
從這裡開始：