unbias38 互動課程講義網頁
把一門「跟著做」的實作課程，做成講師可投影講解、學員可跟著操作的單檔 HTML 講義， 發布為 Artifact。機制固定、內容抽換——不要重新發明機制。
範本用法：assets/template.html 是完整成功案例（《君子動口不動手・排座位篇》）。
內容收集完、開始產出時，先把它整份複製到 scratchpad，再逐區塊替換內容（標題、單元、
提示詞、驗收、證書詞庫、MD_TEXT），機制程式碼原樣保留。不要憑記憶重寫整頁——重寫
容易遺漏備援與修過的 bug；也不用為了了解機制先通讀整份範本，下方規格表就是機制摘要。
起點：三種情境都能做
- 已有完成的專案＋提示詞（最佳）：直接進入內容收集，講義忠實還原實際建構過程。
- 只有課程主題或構想：先陪使用者把成品做出來（在對話中實際建構一次），過程中自然產生提示詞、預期錯誤、踩坑點——這些是驗收清單的素材；成品做完再產講義，並產出可分享的成果參考連結。不要憑空杜撰提示詞和驗收項：沒實測過的驗收清單會在課堂上翻車。
- 只有專案程式碼、沒有提示詞（逆向還原）：讀懂程式 → 列出功能清單 → 按教學節奏分部（骨架 → 資料 → 參數化 → 輸出 → 保存 → 交付）→ 每部反推一句提示詞。反推時用學員的「需求語言」寫（畫面上看得到的行為、使用情境），不要寫成從程式碼翻譯出來的技術規格。反推的提示詞務必試跑驗證：開新對話實測一輪，確認能長出功能相近的成品、記下實際跳出的錯誤訊息當驗收素材；跳過驗證就交付，講義會在課堂上翻車。
- 非 AI 實作課（Excel、Canva、任何分部驟教學）：泡泡裡放的不一定是提示詞，可以是指令、操作步驟或設定值；「複製按鈕＋驗收清單＋證書」的機制完全通用。
第一步：向使用者收集內容
缺什麼問什麼，能推斷就不要問：
- 課名（短、有記憶點）＋副標／篇名（如「排座位篇」）＋ 20 字內課程介紹（可幫忙擬幾個讓使用者挑）
- 成果參考連結（可選）：完成品的體驗連結（如 Google 試算表 /copy 連結）
- 單元拆解：課程分幾部（建議 4–8 部），每部包含——
- 目標（一句話）
- 給 AI／給工具的操作內容（提示詞、指令或步驟）
- 操作步驟（學員實際要做的事）
- 驗收清單（2–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-designskill；深淺色雙主題（token 化，媒體查詢＋data-theme 雙保險） - 字級為投影場景放大版：內文 22px、泡泡 21px、h1 50px、h2 34px；內容寬 1120px
- 依課程主題選配色與字型（範例用黑板墨綠＋LXGW WenKai TC 呼應教室；換主題就換世界觀），證書維持金色紙感不隨深色模式反轉
- 提示詞泡泡：左粗邊框＋聊天氣泡圓角；操作＝藍底、驗收＝綠底、技巧＝琥珀底，三色區塊全篇一致
內容寫作原則
- 視角定位：講義是給學員看的——講師看著能講、學員自己也能照著操作到底。全文對學員說話，不寫講師視角的心裡話（「方便你講課」「這裡當節奏點」）、不寫課程安排；講師現場示範過的功能不在講義裡重複介紹，講義只聚焦「怎麼做出來」
- 開頭放「AI 產出每次不同是正常的」提醒＋「向 AI 要完整檔案，不收片段」的應對句
- 提示詞裡固定加兩條通用規則（如適用）：①每次修改都給完整檔案讓我全選貼上取代 ②我只在成品介面操作，不回程式碼改參數
- 驗收後才進下一部；每部技巧欄點出一種提示詞句型（領域資訊、講需求不講作法、描述現象報 bug、問號句、說出擔心、短指令吃上下文、收尾確認理解）
交付
- 寫到 scratchpad，用 Artifact 發布（favicon 選一次後不再換；title 用課名本身）
- 常見後續微調：字級、預設收合狀態、詞庫、色票——都是小 edit，不要重寫整檔
- 提醒使用者：頁面預設私人，從分享選單開給學員