Agent Skill Lecture Builder — Documentation skill for Claude Code

Course Page Generator

[!NOTE] 📺 **搭配影片觀看效果更佳** — [YouTube 完整教學](https://youtu.be/0pZri5f_tfk)

❝Vibe Coding 速度很快，但用完就丟的東西，永遠不會變成你的！❞

這句話，是我用 Vibe Coding 做了幾十個網頁後的感悟。

• 👉 AI 生成的網頁很漂亮，但細節與架構很難調整
• 👉 每次生成結果都很隨機，風格、排版無法完全掌控
• 👉 做完的東西無法重複使用，下次又要從零開始

這支影片將透過實戰，帶你用「模板思維 + Agent Skills」解決以上痛點：

1. 登入 ChatGPT 免費體驗 Codex
2. 終端機 vs 編輯器，自由選擇操作模式
3. 把 AI 隨機的輸出，變成可用 Markdown 維護的模板
4. 將模板封裝成 Agent Skill，建立完整工作流
5. 一鍵部署到 GitHub Pages，讓講義網頁上線

AI 時代下，Vibe Coding 的價值不在於生成速度 ── 而在於你能不能把成果從「免洗餐具」變成「長期工具」

---

提供主題 or Markdown 講稿，透過 Agent Skills 單一 HTML 課程頁面。

目錄

• Quick Start
• 專案結構
• 新增一門課程
• Config 機制
• Markdown 語法

Quick Start

# 安裝依賴（OG 縮圖產生需要 puppeteer）
npm install

在 AI 對話窗輸入「幫我生成課程頁面」這類指令，AI 會自動觸發 `course-page-generator` Skill 完成所有步驟。

情境一：給主題，從零生成

只提供主題，AI 自動生成完整課程內容：

扮演一位擅長用實際案例解說的資安專家，設計"生成式 AI 資訊安全"的講義並生成網頁，完成後直接啟動

AI 會依序：生成 `content.md` + `config.yaml` → build `index.html` → 產生 OG 縮圖 → 啟動本地預覽

情境二：給講稿，輔助轉換

提供現有的講稿、筆記或大綱，AI 將其轉換為結構化課程頁面：

幫我把這份講稿轉成課程頁面（貼上講稿內容，或指定檔案路徑）

AI 會依序：萃取重點轉為結構化 `content.md` → 建立 `config.yaml` → build `index.html` → 產生 OG 縮圖

專案結構

agent-skill-lecture-builder/
├── .agents/
│   └── skills/
│       └── course-page-generator/
│           ├── scripts/
│           │   ├── build.mjs        # 建置課程頁
│           │   ├── dev.mjs          # 本機預覽
│           │   └── generate-og.mjs  # 產出 1200x630 OG 圖
│           └── reference/
│               ├── base.html
│               ├── components.md
│               └── config-example.yaml
├── config/
│   ├── global.yaml          # 全域設定（講者、社群、頁尾）
│   └── assets/              # 共用圖片（avatar 等）
├── example/                 # 課程目錄示意（建立後會包含下列檔案）
│   ├── config.yaml          # 課程專屬設定（覆蓋 global）
│   ├── content.md           # 結構化 Markdown 講稿
│   ├── index.html           # build 產出
│   └── assets/
│       └── og-*.jpg         # generate-og.mjs 產出
├── package.json
└── README.md

新增一門課程

`