全棧個人網站設計系統規範，驅動 apps/personal。
設計服務於內容。強調色只用於必要的互動引導（CTA、hover、active），其餘用灰階和大量留白。頁面第一感應是"整潔的工程文檔"而非"設計作品集"。
所有視覺變量（色彩、字型、間距、圓角、陰影）集中在 tokens.js，注入為 CSS 自定義屬性。任何調整只改一個文件，兩個網站同步更新，杜絕視覺漂移。
所有組件通過 CSS 變量實現主題切換，無需重寫樣式。深色模式不是"淺色模式取反"，而是獨立設計的表面層次系統，確保層次感不丟失。
從 320px 開始設計，向上擴展。媒體查詢只做增強，不做補救。導航、搜索、卡片網格均有完整的三段式斷點方案（移動 → 平板 → 桌面）。
靜態 HTML 是基礎，互動是增強。搜索、篩選、主題切換以 vanilla JS 實現，Pagefind 靜態索引無需後端。圖表（Recharts/Chart.js）作為 Astro Island 按需加載。
藍色（#B5C7EB）用於信息類標籤、鏈接、技術棧。粉色（#E89EB8）用於個人類、情感類標記和裝飾性漸變。灰階負責結構和層次，不與品牌色競爭。
tokens.js 的 DARK_TOKENS 對象集中管理。
position: sticky; top: 0; z-index: 100var(--bg-surface)，底部 1px var(--border-default) 邊框，滾動後加 backdrop-filter: blur(12px)border-radius: var(--radius-full)），padding 8px 20px--color-primary，加 --shadow-brandtag-blue）：技術棧、框架、工具類標籤tag-pink）：項目分類、個人屬性標籤tag-gray）：通用/中性標籤tag-grad）：精選/推薦，全站僅限少量使用--gradient-brand-subtle 佔位背景translateY(-2px) + --shadow-md，過渡 200ms--color-primary-dark| 斷點 | 尺寸 | 導航 | 卡片網格 | 文章側欄 TOC | 搜索 |
|---|---|---|---|---|---|
| Mobile | 320–767px |
漢堡菜單，側滑抽屜 | grid-cols-1 |
折疊為頂部按鈕，點擊展開 | 圖標觸發全屏遮罩搜索 |
| Tablet | 768–1023px |
水平鏈接（精簡版） | grid-cols-2 |
折疊為頂部按鈕 | 導航欄內嵌搜索框 |
| Desktop | 1024px+ |
完整水平導航 + 快捷鍵提示 | grid-cols-3 |
固定右側 240px，滾動高亮 | 導航欄 pill 搜索框 + ⌘K |
clamp(24px, 5vw, 48px)，避免硬編碼斷點display=swap，避免 FOUT 閃爍<img> 使用 loading="lazy" + srcset（WebP 主，PNG 降級）個人網站.free
├── 📄 0_設計系統
│ ├── 色彩（對應 tokens.js 變量名）
│ ├── 字型比例
│ ├── 間距規範
│ └── 組件庫（Symbol Library）
├── 📄 1_線框圖
│ ├── 首頁（Mobile / Tablet / Desktop）
│ ├── 項目展示頁
│ ├── 開發記錄頁
│ └── 文章詳情頁
├── 📄 2_高保真設計稿
│ ├── 淺色主題
│ └── 深色主題
└── 📄 3_交接說明
└── 間距標注 + 組件對照表
primary/blue = #B5C7EB），確保設計稿顏色可追蹤display/4xl、body/base、mono/sm 等，字號與 tokens.js 完全一致p-4）primary/blue → var(--color-primary)）.tsx 文件；Symbol Override = 組件 Propsbody/base → font-size: var(--text-base); font-family: var(--font-body)）每篇文章和項目頁需添加 JSON-LD Schema（BlogPosting、SoftwareSourceCode），提升搜索引擎收錄質量。Astro 可通過組件集中管理。
Astro SSG 頁面在 <head> 最前插入內聯 <script> 讀取 localStorage 主題偏好，在 CSS 加載前設定 data-theme，杜絕白色閃爍。
所有圖片需 alt 屬性；色彩對比度需達 WCAG AA（正文 4.5:1，大字 3:1）；導航需 aria-label；搜索需 role="search"。
Google Fonts 使用 font-display: swap + preconnect 預連接。考慮字體子集化（僅加載中文常用字）以優化加載速度，特別是移動端。
每篇文章自動生成帶標題的 Open Graph 圖片（1200×630px），用於社交分享預覽。可使用 Astro + Satori 在構建時生成，存為靜態 PNG。
開發記錄需提供標準 RSS/Atom Feed（/rss.xml），Astro 有官方 @astrojs/rss 包，配置極簡。
在 Cloudflare Pages 的 _headers 文件設置 Content-Security-Policy，防止 XSS 攻擊。需與使用的 CDN 資源域名白名單協調。
免費、隱私友好的頁面瀏覽統計，無需 Cookie 同意橫幅。在 CF Pages 控制台一鍵開啟，自動注入腳本。