# Course Handout

> 互動課程講義網頁產生器——把任何「分部驟實作」的課程做成單檔 HTML 講義（Artifact）：單元收合、提示詞一鍵複製、可打勾驗收清單、術語浮動說明、五色畫筆標註、結業證書、Markdown 下載。只要使用者想把課程、教學流程、工作坊、研習、實作步驟「做成網頁／講義／教材頁」，或提到 講義、教材、handout、workshop、上課用的頁面、學員跟著做，即使沒有明說「講義」也應使用本 skill；使用者只有課程構想、只有專案程式碼（要逆向反推教學步驟）、或教的不是 AI（Excel、Canva 等分步驟教學）時同樣適用。

- Skill: `unbias38/course-handout` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add unbias38/course-handout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/unbias38/course-handout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: unbias38 (https://skillmd.com/u/unbias38)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/unbias38/course-handout

---


# 互動課程講義網頁

把一門「跟著做」的實作課程，做成講師可投影講解、學員可跟著操作的單檔 HTML 講義，
發布為 Artifact。機制固定、內容抽換——不要重新發明機制。

**範本用法**：`assets/template.html` 是完整成功案例（《君子動口不動手・排座位篇》）。
內容收集完、開始產出時，先把它整份複製到 scratchpad，再逐區塊替換內容（標題、單元、
提示詞、驗收、證書詞庫、MD_TEXT），機制程式碼原樣保留。不要憑記憶重寫整頁——重寫
容易遺漏備援與修過的 bug；也不用為了了解機制先通讀整份範本，下方規格表就是機制摘要。

## 起點：三種情境都能做

1. **已有完成的專案＋提示詞**（最佳）：直接進入內容收集，講義忠實還原實際建構過程。
2. **只有課程主題或構想**：先陪使用者把成品做出來（在對話中實際建構一次），過程中自然產生提示詞、預期錯誤、踩坑點——這些是驗收清單的素材；成品做完再產講義，並產出可分享的成果參考連結。不要憑空杜撰提示詞和驗收項：沒實測過的驗收清單會在課堂上翻車。
3. **只有專案程式碼、沒有提示詞**（逆向還原）：讀懂程式 → 列出功能清單 → 按教學節奏分部（骨架 → 資料 → 參數化 → 輸出 → 保存 → 交付）→ 每部**反推一句提示詞**。反推時用學員的「需求語言」寫（畫面上看得到的行為、使用情境），不要寫成從程式碼翻譯出來的技術規格。反推的提示詞務必**試跑驗證**：開新對話實測一輪，確認能長出功能相近的成品、記下實際跳出的錯誤訊息當驗收素材；跳過驗證就交付，講義會在課堂上翻車。
4. **非 AI 實作課**（Excel、Canva、任何分部驟教學）：泡泡裡放的不一定是提示詞，可以是指令、操作步驟或設定值；「複製按鈕＋驗收清單＋證書」的機制完全通用。

## 第一步：向使用者收集內容

缺什麼問什麼，能推斷就不要問：

1. **課名**（短、有記憶點）＋**副標／篇名**（如「排座位篇」）＋ **20 字內課程介紹**（可幫忙擬幾個讓使用者挑）
2. **成果參考連結**（可選）：完成品的體驗連結（如 Google 試算表 /copy 連結）
3. **單元拆解**：課程分幾部（建議 4–8 部），每部包含——
   - 目標（一句話）
   - 給 AI／給工具的操作內容（提示詞、指令或步驟）
   - 操作步驟（學員實際要做的事）
   - 驗收清單（2–5 項可打勾、可實測的項目）
   - 技巧點評（一句話，該部的方法論）
4. **開始之前**：準備清單＋工作區介紹＋反覆出現的循環動作（做成術語浮動說明）
5. **結尾**：帶走的原則（3 條左右）＋回家挑戰題

## 固定機制（template.html 已全部實作，直接沿用）

| 機制 | 規格要點 |
|------|----------|
| 單元收合 | `.unit.closed` 預設全收起；點 h2 展開（▸/▾）；單元底部「▲ 收起本單元」按鈕，收起後 scrollIntoView 回標題；h2 有 tabindex=0 支援鍵盤 |
| 提示詞複製 | 泡泡右上角「複製」鈕；**三層備援**：navigator.clipboard → execCommand('copy') → 自動選取文字提示按 Ctrl+C（Artifact 沙箱常擋新 API，此備援必要） |
| 驗收清單 | 真核取方塊，勾選後文字轉灰；驗收項必須「可實測」，含刻意設計的預期錯誤（「跳出 Error 是正常的！」）與暖身幽默項（「會呼吸、會眨眨眼」） |
| 術語浮動說明 | 反覆出現的循環動作包 `.cyc` span，hover/focus 浮出深色步驟框；**只包 HTML 內文，不要動到 MD_TEXT 字串**（批次取代時特別小心） |
| 畫筆標註 | 全頁 canvas，**文件座標**（筆跡跟內容捲動）；五色（紅橘藍綠黑）＋橡皮擦（destination-out）＋全部清除；筆跡存 strokes 陣列，ResizeObserver 監聽頁高變化重繪；收起畫筆後筆跡保留、頁面恢復互動；ESC 清空並離開 |
| 結業證書 | 姓名必填（空白擋下、紅框提示）→ 檢查所有 .check 勾選狀態 → 未完成列「哪部差幾項」；全過跳金雙邊框證書：隨機頭銜（形容詞 25 × 稱號 25，**依課程主題重寫兩個詞庫**）、可重抽、民國紀年落款。文案順序：茲證明→姓名→已完成→獲頒榮譽頭銜→特頒此狀 |
| Markdown 下載 | 全文打包成 `MD_TEXT` 字串（驗收用 `- [ ]`），彈窗＋複製全文；**不宣告 downloads capability**（與公開分享互斥），但保留 claude.use('downloads') 偵測 |
| ESC 優先序 | 有彈窗開著先關彈窗，其次才清畫筆筆跡 |
| 成果搶先看 | 頁首橫幅＋按鈕連到成品連結（target=_blank），文案定位為「體驗成品」不是「比對程式」 |

## 設計規範

- 發布前載入 `artifact-design` skill；深淺色雙主題（token 化，媒體查詢＋data-theme 雙保險）
- 字級為投影場景放大版：內文 22px、泡泡 21px、h1 50px、h2 34px；內容寬 1120px
- 依課程主題選配色與字型（範例用黑板墨綠＋LXGW WenKai TC 呼應教室；換主題就換世界觀），證書維持金色紙感不隨深色模式反轉
- 提示詞泡泡：左粗邊框＋聊天氣泡圓角；操作＝藍底、驗收＝綠底、技巧＝琥珀底，三色區塊全篇一致

## 內容寫作原則

- **視角定位：講義是給學員看的**——講師看著能講、學員自己也能照著操作到底。全文對學員說話，不寫講師視角的心裡話（「方便你講課」「這裡當節奏點」）、不寫課程安排；講師現場示範過的功能不在講義裡重複介紹，講義只聚焦「怎麼做出來」
- 開頭放「AI 產出每次不同是正常的」提醒＋「向 AI 要完整檔案，不收片段」的應對句
- 提示詞裡固定加兩條通用規則（如適用）：①每次修改都給完整檔案讓我全選貼上取代 ②我只在成品介面操作，不回程式碼改參數
- 驗收後才進下一部；每部技巧欄點出一種提示詞句型（領域資訊、講需求不講作法、描述現象報 bug、問號句、說出擔心、短指令吃上下文、收尾確認理解）

## 交付

1. 寫到 scratchpad，用 Artifact 發布（favicon 選一次後不再換；title 用課名本身）
2. 常見後續微調：字級、預設收合狀態、詞庫、色票——都是小 edit，不要重寫整檔
3. 提醒使用者：頁面預設私人，從分享選單開給學員