安安，我是 ChiYu！

昨天，我們扮演了「造物主」，理解了構成數位生命的三大基本元素：HTML (骨骼)、CSS (皮囊) 與 JavaScript (肌肉)。

我們的生命體現在有了基本的構造，但它還沒有「氣質」與「個性」。它的膚色、瞳孔顏色、說話的語氣（字體）都尚未被定義。如果我們現在就開始隨心所欲地為它上色、化妝，最終很可能會創造出一個風格混亂、不忍直視的「四不像」。

因此，在我們動手寫任何一行 CSS 之前，我們要再次回到我們最信賴的工作流程——文件驅動。今天，我們將化身為「 首席視覺設計師」，與我們的 AI 夥伴 Gemini 深度對談，為我們的 App 定義一套獨一無二的視覺風格，並將其記錄成一份專業的**「風格指南 (Style Guide)」**文件。

Part 1：什麼是「風格指南」？為什麼它是設計的「DNA」？

「風格指南」是一份定義了專案所有視覺元素（顏色、字體、間距、圖示、按鈕樣式等）使用規則的「設計聖經」。它就是我們數位生命的 「基因圖譜 (DNA)」。

為什麼我們需要它？

• 確保一致性 (Consistency)：一份好的風格指南，能確保你網站上的每一個按鈕、每一段文字，看起來都像是來自同一個「家族」。這種視覺上的一致性，會給使用者帶來專業、可靠、值得信賴的感覺。
• 提升開發效率 (Efficiency)：它能將設計師與工程師從無盡的「這個藍色深一點還是淺一點？」、「這個標題用多大字體？」的決策地獄中解放出來。我們不再需要每次都重新發明輪子，只需要遵循 DNA 的指示即可。
• 賦予 AI 清晰的指令：這對我們 Vibe Coding 的流程至關重要！當我們有了這份文件，未來就可以直接對 Gemini 說：「請用我們的 primary-color 設計一個按鈕」，AI 就能立刻理解並產出符合我們整體風格的程式碼。

Part 2：定義我們 App 的「Vibe」- 專案的個性

在挑選顏色和字體之前，我們得先回答一個更根本的問題：我们希望這個 App 給人什麼樣的「感覺 (Vibe)」？

回顧我們 Day 5 的專案章程，我們的願景是「賦予使用者力量，建立正向習慣並擁抱更健康的心態」。基於這個願景，我們可以提煉出幾個關鍵詞來定義我們 App 的個性：

• Calm (平靜)：介面應該是簡潔、無干擾的，讓使用者能專注於紀錄與反思。
• Encouraging (鼓勵)：視覺元素應該帶有溫度，給人一種積極、正向的感覺。
• Clean (乾淨)：佈局要清晰，留有足夠的呼吸空間 (留白)，避免資訊過載。
• Trustworthy (可靠)：設計要專業、一致，讓使用者願意將他們的個人數據託付給我們。

这几个关键词，就是我们接下来与 Gemini 溝通時的「通關密語」。

Part 3：實戰開始：讓 Gemini 成為我們的視覺設計師

好了，讓我們打開終端機，指揮 Gemini 為我們進行專業的視覺設計。

【魔法詠唱：生成風格指南】

# 角色 (Role)
你是一位頂尖的 UI/UX 設計師與設計系統架構師。你不僅對色彩心理學、字體排印學有深入研究，更擅長將抽象的品牌氛圍轉化為具體、可執行的設計規範。你尤其熟悉健康、正念與個人成長類 App 的設計趨勢，並重視無障礙設計 (Accessibility, WCAG) 原則。

# 目標 (Objective)
請根據下方提供的專案上下文與核心氛圍，為我們的 App 設計一套完整、專業且具備前瞻性的「風格指南 (Style Guide)」。這份文件將作為前端開發的唯一視覺真理來源，確保所有 UI 元素都具備一致性、可用性與品牌辨識度。

# 上下文與關鍵資訊 (Context & Key Information)
* **核心文件**:
    * **專案願景**: `@docs/PROJECT_CHARTER.md` (請務必深度理解我們的核心目標、價值主張與目標使用者輪廓)。
* **品牌核心氛圍 (Core Vibe)**:
    * 你的所有設計決策，都必須圍繞並強化以下四種感覺：
        1.  **平靜 (Calm)**: 介面應簡潔、無干擾，引導使用者專注。
        2.  **鼓勵 (Encouraging)**: 視覺元素應帶有溫度，給人積極、正向的支持感。
        3.  **乾淨 (Clean)**: 佈局清晰，留有充足的呼吸感 (留白)，避免資訊過載。
        4.  **可靠 (Trustworthy)**: 設計專業、一致，讓使用者願意託付他們的個人數據。
* **主要目標為Web APP**

# 產出格式與要求 (Output Format & Requirements)
請生成一份結構清晰的 Markdown 文件，並**嚴格遵循**以下所有大綱與要求，在每個設計決策後，簡要闡述其如何連結至我們的「品牌核心氛圍」。

### 1. 總覽 (Overview)
* **文件版本**: `v1.0.0`
* **引言**: 用一小段話，說明這份風格指南的目的與重要性。

### 2. 色彩搭配 (Color Palette)
* **定義**: 包含 `主色 (Primary)`、`輔色/強調色 (Accent)`、`成功色 (Success)`、`危險色 (Danger)`，以及一組至少 4 個層級的 `中性色 (Neutrals)`。
* **格式**: 以 Markdown 表格呈現，欄位包含「用途」、「色彩名稱 (例如：靜謐藍)」、「HEX 色碼」及「簡要用途說明」。
* **無障礙考量 (Accessibility)**: 請確保主要文字顏色與背景色之間具有足夠的對比度，以符合 WCAG AA 標準。
* **設計理念**: 在表格後，用一段話**詳細說明**選擇此顏色組合背後的「設計理念」與「色彩心理學」考量。

### 3. 字體排印 (Typography)
* **字體組合**: 推薦一組 Google Fonts 上的「標題 (Headings)」與「內文 (Body)」字體搭配。
* **推薦理由**: 闡述為何這組字體適合我們的「品牌核心氛圍」。
* **字體層級 (Typographic Scale)**: 以 Markdown 表格定義一套清晰的字體層級，至少包含 `h1` 到 `h3`, `p`, `small`。表格欄位需包含「層級」、「`font-size` (rem)」、「`font-weight`」及「`line-height`」。

### 4. 間距系統 (Spacing System)
* **原則**: 說明我們將採用基於 `8px` 的網格系統來規範所有元件的內外間距，以確保視覺上的一致性與和諧感。
* **單位**: 以 Markdown 表格定義一套間距單位 (例如 `spacing-xs`, `spacing-s`, `spacing-m`, `spacing-l`) 及其對應的 `rem` 和 `px` 值。

### 5. 核心元件風格 (Core Component Styles)
* **按鈕 (Buttons)**:
    * 定義至少兩種按鈕樣式：`Primary` (主要操作) 和 `Secondary` (次要操作)。
    * 描述它們在不同狀態 (Default, Hover, Disabled) 下的視覺表現 (背景色、邊框、文字顏色)。
* **輸入框 (Input Fields)**:
    * 描述輸入框在不同狀態 (Default, Focus, Error) 下的視覺表現 (背景色、邊框顏色)。

### 6. 溝通語氣 (Tone of Voice)
* **原則**: 定義 App 中的文字風格 (Microcopy) 應反映我們的核心價值：支持、清晰、溫和且賦予力量。
* **範例**: 提供 2-3 個「我們這樣說 (Do)」和「我們不這樣說 (Don't)」的對照範例，以具體情境呈現。

### 7. 最終產出
* 將以上所有內容，生成一個名為 `STYLE_GUIDE.md` 的單一 Markdown 檔案。

Part 4：審核與分析 AI 的設計提案

在你與 AI 經過幾輪的迭代優化後，最終你會得到一份高品質的定稿文件。讓我們來深度剖析一下這份由 AI 設計的「基因圖譜」：

【AI 生成文件範例】

# MindTrack App - Style Guide

### **版本 (Version)**: `v1.0.0`

---

## 1. 總覽 (Overview)

本文件是「心境軌跡 (MindTrack)」應用的官方風格指南。它定義了構成我們使用者介面 (UI) 的所有核心視覺元素與互動模式。遵循此指南旨在確保我們的產品在所有平台上都擁有一致、專業、且具備高度品牌辨識度的使用者體驗。這份文件是設計與開發團隊之間溝通的橋樑，是打造一個 **平靜 (Calm)**、 **鼓勵 (Encouraging)**、 **乾淨 (Clean)** 且 **可靠 (Trustworthy)** 產品的唯一真理來源。

## 2. 色彩搭配 (Color Palette)

我們的色彩系統旨在創造一個寧靜且引人專注的數位環境。主色調提供穩定感，而強調色則用於引導使用者並給予積極的回饋。

| 用途 | 色彩名稱 | HEX 色碼 | 簡要用途說明 |
| :--- | :--- | :--- | :--- |
| **主色 (Primary)** | 靜謐藍 (Serene Blue) | `#4A90E2` | 用於主要按鈕、連結、焦點狀態，代表穩定與專注。 |
| **輔色/強調色 (Accent)** | 暖陽橙 (Warm Sunrise) | `#F5A623` | 用於特別需要強調的元素，如成就徽章、正面圖表數據。 |
| **成功色 (Success)** | 新芽綠 (Sprout Green) | `#7ED321` | 用於操作成功後的提示、完成狀態的確認。 |
| **危險色 (Danger)** | 珊瑚紅 (Coral Red) | `#D0021B` | 用於刪除操作的確認、錯誤提示，顏色醒目但不過於刺激。 |
| **中性色 (Neutral)** | 深灰 (Text) | `#333333` | 主要內文顏色，確保最佳可讀性。 |
| **中性色 (Neutral)** | 中灰 (Subtle) | `#9B9B9B` | 用於輔助文字、未啟用狀態的圖示、輸入框提示文字。 |
| **中性色 (Neutral)** | 淺灰 (Border/Line) | `#EAEAEA` | 用於邊框、分隔線，創造柔和的視覺區隔。 |
| **中性色 (Neutral)** | 極淺灰 (Background) | `#F9F9F9` | 頁面與卡片的主要背景色，提供呼吸感。 |

#### **無障礙考量 (Accessibility)**
主文字顏色 `#333333` 與背景色 `#F9F9F9` 之間的對比度為 **12.55:1**，遠超 WCAG AA 級要求的 4.5:1，確保了極佳的可讀性。所有行動呼籲 (Call-to-Action) 的顏色組合都經過對比度檢查，以服務最廣泛的使用者。

#### **設計理念**
這組色彩搭配的靈感源於清晨的天空——從靜謐的藍色逐漸過渡到溫暖的橙色。
*   **靜謐藍** 作為主色，奠定了產品**平靜**與**可靠**的基調，如同廣闊天空給人的信賴感。
*   **暖陽橙** 作為點綴，象徵希望與能量，為使用者的每一步進展提供**鼓勵**。
*   整體的**中性色**階梯則確保了介面的**乾淨**與整潔，讓內容本身成為主角，避免了視覺干擾，幫助使用者專注於自我覺察的旅程。

## 3. 字體排印 (Typography)

我們選擇的字體組合旨在提供清晰易讀的體驗，同時傳達出一種溫暖、友善的感覺。

*   **字體組合**:
    *   **標題 (Headings)**: [Nunito](https://fonts.google.com/specimen/Nunito)
    *   **內文 (Body)**: [Lato](https://fonts.google.com/specimen/Lato)

*   **推薦理由**:
    *   `Nunito` 的圓潤邊角使其看起來非常友善且平易近人，適合用作標題，能夠有效地傳達**鼓勵**的氛圍。
    *   `Lato` 則是一款極為清晰、結構均衡的無襯線字體，即使在小字號下也具備出色的可讀性，確保了介面的**乾淨**與資訊傳遞的**可靠**性。

*   **字體層級 (Typographic Scale)**:

| 層級 | `font-size` (rem) | `font-weight` | `line-height` |
| :--- | :--- | :--- | :--- |
| `h1` | `2.5rem` (40px) | `700` (Bold) | `1.2` |
| `h2` | `2rem` (32px) | `700` (Bold) | `1.3` |
| `h3` | `1.5rem` (24px) | `700` (Bold) | `1.4` |
| `p` | `1rem` (16px) | `400` (Regular) | `1.6` |
| `small`| `0.875rem` (14px) | `400` (Regular) | `1.5` |

## 4. 間距系統 (Spacing System)

*   **原則**: 我們採用基於 **8px** 的網格系統來統籌所有元件的 `padding`、`margin` 和 `gap`。這個系統性的方法是實現視覺**乾淨**與和諧佈局的基石，並體現了設計的**可靠**性與一致性。

*   **單位**:

| 單位 | `rem` | `px` |
| :--- | :--- | :--- |
| `spacing-xs` | `0.25rem` | `4px` |
| `spacing-s` | `0.5rem` | `8px` |
| `spacing-m` | `1rem` | `16px` |
| `spacing-l` | `1.5rem` | `24px` |
| `spacing-xl`| `2rem` | `32px` |
| `spacing-xxl`| `3rem` | `48px` |

## 5. 核心元件風格 (Core Component Styles)

### 按鈕 (Buttons)

| 樣式 | 狀態 | 背景色 | 邊框 | 文字顏色 | 說明 |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **Primary** | Default | `#4A90E2` | `none` | `#FFFFFF` | 用於最主要的行動呼籲，提供清晰的引導。 |
| | Hover | `#357ABD` | `none` | `#FFFFFF` | 提供明確的互動反饋，增強**鼓勵**感。 |
| | Disabled | `#EAEAEA` | `none` | `#9B9B9B` | 清晰地表明該操作目前不可用。 |
| **Secondary**| Default | `transparent` | `1px solid #4A90E2` | `#4A90E2` | 用於次要操作，保持介面**乾淨**。 |
| | Hover | `#F0F8FF` | `1px solid #357ABD` | `#357ABD` | 提供柔和的互動反饋。 |
| | Disabled | `transparent` | `1px solid #EAEAEA` | `#9B9B9B` | 與 Primary 按鈕的禁用狀態保持一致。 |

### 輸入框 (Input Fields)

| 狀態 | 背景色 | 邊框顏色 | 說明 |
| :--- | :--- | :--- | :--- |
| **Default** | `#FFFFFF` | `#EAEAEA` | 提供一個**乾淨**、無干擾的輸入區域。 |
| **Focus** | `#FFFFFF` | `#4A90E2` | 使用主色高亮，幫助使用者**平靜**地專注於當前任務。 |
| **Error** | `#FFF6F8` | `#D0021B` | 使用危險色和淡紅色背景，提供清晰但不過度的錯誤警示。 |

## 6. 溝通語氣 (Tone of Voice)

*   **原則**: App 內的所有文字 (Microcopy) 都應是**支持、清晰、溫和且賦予力量**的。我們的語氣是使用者的夥伴，而非指導者。這建立了一種**可靠**的關係，並在互動中持續地**鼓勵**使用者。

*   **範例**:

    *   **情境：首次引導**
        *   **我們這樣說 (Do)**: "準備好開始你的自我探索之旅了嗎？讓我們從建立第一個習慣開始。"
        *   **我們不這樣說 (Don't)**: "你必須先設定一個習慣才能繼續。"

    *   **情境：空白狀態**
        *   **我們這樣說 (Do)**: "這裡將會展示你的心情與習慣關聯圖。開始記錄，發現屬於你的洞察吧！"
        *   **我們不這樣說 (Don't)**: "無數據。"

    *   **情境：操作成功**
        *   **我們這樣說 (Do)**: "做得真棒！今天的你又向目標邁進了一步。"
        *   **我們不這樣說 (Don't)**: "操作成功。"

【文件重點分析】

• 超越美學的設計：這份文件不只是挑了幾個好看的顏色，它為每一個設計決策都提供了**「理由」**。例如，主色 Serene Blue 是為了「建立信任感」，輔色 Warm Coral 是為了在平靜中「帶來激勵」。這代表我們的設計是有策略、有思考的。
• 建立設計「系統」：注意到「間距系統」了嗎？這代表我們思考的不再是單一頁面，而是一個可重複使用、可擴展的**「設計系統 (Design System)」**。這是一個極其專業且重要的概念，能大幅提升未來開發的效率與一致性。
• 完整的感官體驗：最精彩的是，這份指南甚至定義了 「溝通語氣 (Tone of Voice)」！這意味著我們的設計是全方位的，從視覺的顏色、字體，到文字的溫度，都緊密地圍繞著我們的核心 Vibe，共同為使用者創造一個沉浸式的正向體驗。

Part 5：將設計 DNA 存檔

1. Commit 訊息: docs: Create comprehensive style guide for UI
2. Commit & Push！

結語：從感覺到規範

太棒了！今天，我們將抽象的「感覺」，成功地轉化為了一套具體、可執行的「設計規範」。這份風格指南，就是我們專案的審美 DNA，它將指導我們接下來所有的前端開發工作。

有了這份設計圖，明天，我們就要來當真正的「建築師」了！我們將繼續待在終端機裡，指揮 Gemini 根據我們的使用者故事和風格指南，規劃出網站的 「頁面骨架」與「元件拆分」！