Layouts

Layouts

說明

AI Playbook 的 Layouts 定義不同類型頁面的資訊排列方式。第一版以文件頁、章節入口頁與工作流程頁為主，不優先建立行銷 landing page。

Layouts 的任務是讓內容容易讀、容易找、容易被 Agent 解析，而不是讓每個頁面看起來都不同。

Why

不同 Agent 會生成不同類型的內容：規範、Prompt、Workflow、案例、部署筆記、決策紀錄。如果沒有版型規則，內容會逐漸變成結構不一致的文件集合。

Layouts 文件的目的，是把頁面骨架穩定下來，讓內容擴充時仍能維持可預期的閱讀與維護成本。

Layout Principles

第一版版型原則：

• 使用 Starlight 預設文件頁作為基礎。
• 每個頁面只解決一個主要任務。
• H1 必須清楚指出頁面主題。
• H2 優先對應七區塊格式。
• 頁面內容要能在沒有特殊互動的情況下被理解。
• 不使用行銷式 hero 作為預設版型。

Page Types

Home

用途：說明 AI Playbook 是什麼、給誰用、從哪裡開始。

建議結構：

1. H1：AI Playbook
2. 說明
3. Why
4. Do
5. Don’t
6. Checklist
7. Prompt Example

首頁不需要大型視覺 hero。它應該像入口文件，而不是產品官網。

Section Index

用途：作為每個主章節的入口，例如 Brand、Design System、Components、Layouts。

建議結構：

1. 說明：本章節管理什麼
2. Why：為什麼需要這個章節
3. 核心原則或子分類
4. Do
5. Don’t
6. Checklist
7. Prompt Example

每個 index.md 都要能獨立說明章節用途，不只是連結清單。

Spec Page

用途：定義一項規範，例如某個元件、版型、Prompt 或 Workflow。

建議結構：

1. 說明
2. Why
3. Required Structure
4. Do
5. Don’t
6. Checklist
7. Prompt Example

Workflow Page

用途：描述可重複執行的工作流程。

建議結構：

1. 說明
2. Why
3. Inputs
4. Steps
5. Outputs
6. Verification
7. Prompt Example

Workflow 頁必須能被 Agent 當成操作流程使用。

Example Page

用途：展示符合規範的範例。

建議結構：

1. 說明
2. Why
3. Example
4. What Works
5. What To Avoid
6. Checklist
7. Prompt Example

範例不能取代規範，必須連回對應規則。

Notion Handout

用途：作為 IDEA Academy 課程的學員工具箱首頁，讓學員快速選擇需求情境、進入工具頁、複製提示詞、貼上工具應用，並在課堂實作區完成自己的素材。

建議結構：

1. 封面與一句話定位
2. 使用方式
3. 今天想做什麼
4. 工具分類卡
5. 工具頁模板
6. 課堂實作區
7. 核心觀念
8. 安全提示詞與注意事項
9. 內部維護欄位

Notion 講義不應只是 PDF 的轉貼版，也不應一開始就做成複雜資料庫。第一版應遵守 KISS 原則，首頁像工具箱目錄，細節放在各工具頁或 toggle 裡。

Interactive Teaching Site

用途：作為課程的互動式教學工作台，讓學員沿著流程完成輸入、提示詞產生、素材檢查、工作台保存與匯出。

建議結構：

1. Site Metadata
2. Learning Flow
3. Core Views
4. Mode Design
5. Data Model
6. State and Storage
7. README and Deployment
8. QA Checklist

互動式教學網站的第一屏應是可操作工作台，不是行銷 landing page。第一版可採純前端靜態站，使用 localStorage 保存非敏感資料，並提供匯出功能。

Decision Page

用途：記錄重要決策。

建議結構：

1. Decision
2. Context
3. Options Considered
4. Reason
5. Consequences
6. Checklist
7. Review Trigger

Responsive Rules

行動版應優先確保：

• Header 與 menu 可操作。
• 內容不水平溢出。
• Code block 可水平捲動。
• Checklist 與清單保持可讀。
• 頁面不依賴 hover 才能理解。

Navigation Rules

• Sidebar 是主要跨章節導覽。
• 右側目錄是頁內導覽。
• 頁面標題要能在搜尋結果中單獨成立。
• 檔案路徑與 URL slug 要穩定，避免任意改名。

Do

• 先說明版型適用情境。
• 明確定義頁面區塊順序。
• 讓版型支援文件內容，而不是取代內容。
• 讓每個版型都能支援七區塊格式。
• 讓頁面在純文字閱讀時仍有完整語意。
• 讓 URL 與檔名反映內容主題。

Don’t

• 不要把版型寫成固定文案。
• 不要為了視覺效果犧牲可讀性。
• 不要建立不符合 Playbook 定位的行銷式頁面。
• 不要把首頁做成一般 SaaS landing page。
• 不要為每個章節發明不同導覽邏輯。
• 不要使用只有視覺效果、沒有資訊功能的版型區塊。

Checklist

• 定義版型原則
• 定義 Home 版型
• 定義 Section Index 版型
• 定義 Spec Page 版型
• 定義 Workflow Page 版型
• 定義 Example Page 版型
• 定義 Notion Handout 版型
• 定義 Interactive Teaching Site 版型
• 定義 Decision Page 版型
• 定義 responsive rules
• 定義 navigation rules
• 建立 section-index.md
• 建立 workflow-page.md
• 建立 decision-page.md
• 建立 notion-handout-template.md
• 建立 interactive-teaching-site-template.md

Prompt Example

請依 AI Playbook 的 Layouts 規範，為下列內容選擇合適版型並產生文件骨架。

內容類型：
目標讀者：
輸入資料：
預期輸出：

限制：
- 優先使用 Starlight 文件頁
- 保留七區塊格式
- 不使用行銷式 hero
- 不新增不必要互動