Design System

Design System

說明

AI Playbook 的設計系統以文件閱讀、資訊查找與 Agent 解析為核心。第一版不追求華麗介面，而是建立穩定的資訊架構與可擴充的版面規則。

目前 Design System 分成兩層：

• 品牌識別系統：CIS、Logo、色彩、字體、圖像風格與跨載體視覺規則。
• 跨載體設計系統：Blog、Course、Notion、互動式教學網站、PDF 與 AI Playbook 的資訊架構與內容模組。

設計目標：

• 讓人類快速找到規範。
• 讓 AI Agent 容易解析章節與任務邊界。
• 讓未來內容增加時仍維持一致。
• 讓 Starlight 預設能力先發揮價值，再做必要客製。

Why

這個網站會累積品牌、設計、元件、版型、Prompt、Workflow 與案例。如果沒有設計系統，文件會逐漸變成一堆格式不一致的頁面，Agent 也會難以判斷哪些是規則、哪些是範例、哪些是待辦。

設計系統的第一責任是降低認知負擔。

Information Architecture

第一版使用 Starlight sidebar 作為主要導覽。

導覽層級：

1. Start Here：首頁與專案文件。
2. Playbook：Brand、Design System、Components、Layouts、Prompt Library、Workflow、Examples、Resources。
3. Content Product System：享哥個人品牌、跨載體設計系統、課程內容產品地圖。

每個章節的 index.md 是該章節的入口，不應只是空清單。它要說明：

• 章節用途
• 適用對象
• 使用規則
• 後續拆分文件

Layout

文件頁採固定閱讀欄位，不做滿版長行文字。

版面原則：

• 左側導覽用於全站資訊架構。
• 右側目錄用於頁內掃讀。
• 主內容專注於文字、清單、範例與檢查清單。
• 不在文件正文中塞入大型裝飾卡片。

Typography

字級階層以 Starlight 預設為基準。

• H1：頁面主題，只出現一次。
• H2：七區塊主結構。
• H3：章節內補充結構。
• Inline code：路徑、命令、設定鍵、檔名。
• Code block：可複製範例、Prompt、設定片段。

Components

第一版元件策略：

• 優先使用 Starlight 內建元件與 Markdown。
• 避免自製 UI 元件，除非重複需求已出現。
• 未來若新增元件，必須先寫入 src/content/docs/components/。

可考慮的後續元件：

• Decision Record
• Agent Checklist
• Prompt Example
• Do / Don’t Callout
• Workflow Step

Interaction

互動應該服務搜尋與閱讀。

• 搜尋必須能找到主要章節。
• 導覽狀態要清楚。
• 行動版選單要能快速打開。
• 不使用會干擾閱讀的動畫。
• 不使用需要 JavaScript 才能理解內容的核心區塊。

Do

• 先套用品牌識別系統，再設計單一頁面。
• 優先設計清楚的導覽與閱讀體驗。
• 使用穩定的排版、間距與標題層級。
• 讓文件內容成為畫面主體。
• 使用 Starlight 預設能力完成第一版。
• 讓每個頁面維持七區塊格式。
• 把可重複的 UI 規則寫回元件文件。

Don’t

• 不要忽略 Logo、色彩、字體與圖像風格，直接進入頁面設計。
• 不要過度動畫。
• 不要使用與內容無關的視覺特效。
• 不要讓設計壓過文件可讀性。
• 不要把文件網站做成行銷 landing page。
• 不要在沒有明確需求時新增自訂 component library。
• 不要用圖片承載核心文字內容。

Checklist

• 定義資訊架構
• 定義版面原則
• 定義字級階層
• 定義元件策略
• 定義互動原則
• 建立品牌識別系統
• 建立跨載體設計系統
• 建立 Decision Record 元件規範
• 建立 Prompt Example 元件規範
• 建立 Workflow Step 元件規範

Prompt Example

請依 AI Playbook 的設計系統，為下列章節產生一個適合文件網站的頁面結構。

要求：
- 使用 Starlight 文件頁邏輯
- 保留七區塊格式
- 不建立行銷式 hero
- 不新增不必要的互動元件