# CLAUDE.md This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. ## 專案性質 單檔靜態 HTML landing page 示範專案(虛構產品 `dotlog`),用於演繹 `DESIGN.md` 的設計規範。**無 build 系統、無 npm 依賴、無測試框架、非 git 倉庫**。文案、統計數字、GitHub 連結皆為假資料,不要當成真實產品資訊處理。 ## 常用指令 ```bash # 本地預覽(推薦,避開 file:// 的字體 CORS) python3 -m http.server 8000 # 或直接開檔 open index.html ``` 重新產生 `screenshot-light.png` / `screenshot-dark.png`:README 有完整 Playwright (Python) 腳本。**關鍵陷阱**:全頁截圖前必須手動把所有 `.fade-up` 元素加上 `visible` class,否則下半部區塊會因 IntersectionObserver 尚未觸發而呈空白。 ## 架構 只有三個檔案要理解: - **`DESIGN.md`** — 設計權威來源。色彩 token、字體、間距、圓角、各區塊版面、組件樣式(Button/Card/Badge/Code)、動態規範、可及性要求都在這裡。**改 `index.html` 樣式前先查這份**;設計決策衝突時以 `DESIGN.md` 為準,除非使用者明確要求偏離。 - **`index.html`** — 全部 HTML + CSS + JS 都在單檔內,無外部 `.css` / `.js`。內部結構固定順序: 1. `