課程網站組裝說明書
與 AI 合作製作課程網頁的操作步驟
AA-2026-10 · 1/81
開始之前
AI 負責組裝,人負責看說明書
只丟一句「幫我做課程網站」:AI 不知道主題、地點、角色,產出會很空。
先備齊零件,一次給 AI 一步;每一步的產出都由你檢查、修改,再進下一步。
零件清單
動手前請確認零件齊全
A1×
給AI的提示詞設計參考.docx(遊戲設計規則+人物功能設定)
B1×
課程主題之佛法義理
Cn×
各樁站實景照片
D1×
樁站動線說明與設計
E1×
Sonia 老師的特師啦學習單範本(FB 粉專下載)
Fn×
NPC 人物配音檔(如 VoAI 絕好聲創)
G1×
打開並登入 AI 平台
共 3 個步驟
1
產出劇本2
產出 NPC 學習單3
產出互動網頁1
產出劇本
規則+義理+場地 → 劇本
A遊戲設計規則
B佛法義理
C實景照片
D樁站動線
劇本
D一站 = 一個網頁,到指定號碼的樁掃 QR code 開啟
第 1 站網頁前往第 1 號樁 · 掃 QR code
互動1→互動2→互動3
第 2 站網頁前往第 2 號樁 · 掃 QR code
互動1→互動2→…
第 3 站網頁前往第 3 號樁 · 掃 QR code
互動1→…
第幾站是遊戲的關卡;第幾樁是引導玩家前往的樁位點號碼。玩家在樁位掃 QR code,跳出這一站的網頁;每個網頁裡有好幾個遊戲互動頁面。
C實景照片:答案要在現場才看得到
請 AI 先讀照片裡的畫面細節(匾額文字、植物、建築、數量、方位),再用這些細節出題。
題目設計成玩家必須走到現場、親眼觀察實景才找得到答案,而不是光看網頁就能作答。
ANPC 人物與任務人數、任務自由設計
範例:docx 裡的三位 NPC
馬花妹引導者|童心幽默,拉近距離
惠敏和尚智慧點撥者|把所見昇華為佛法
蓮花童子陪伴者|開場、串場、給提示
製造懸念自由設計
範例:每一站都出現
- 馬花妹的訊息
- 馬花妹剛留下的足跡
- NPC 的陪伴
快追上她了→又錯過了→下一站一定遇得到
敘事包裝層數自由設計
範例:三層
- 表象任務:玩家看到任務
- 體驗過程:抽象佛法化為環境觀察與解謎
- 核心轉化:遇見自己。沿途寫給朋友的六則回訊,終點反轉成寫給玩家自己的生命解答
每一站的遊戲化學習迴圈自由設計
範例:四步
STEP 1情境觸發
STEP 2實體觀察
STEP 3知識解謎
STEP 4輸出轉化
↺ 掃 QR code 出現地圖 → 新的地點、新的煩惱 → 下一站重新開始
提示詞範例 · 步驟 1
請先閱讀附件【填入你的檔案名稱】中的遊戲設計規則與 NPC 的人物功能。 NPC 人物與任務:【自訂人數、名字與任務】。 課程主題的佛法義理是:【在此填入】。 遊戲共有【N】站,附上各樁位實景照片與動線說明:【第1站→第1號樁…第2站→第2號樁…】。 請以「每一站是一個網頁,玩家到指定號碼的樁位掃 QR code 開啟該站網頁,每個網頁裡有好幾個遊戲互動頁面」的架構建立劇本。 請先仔細讀取每張實景照片的畫面細節,出題時要讓玩家必須到現場觀察實景才能找到答案。 製造懸念的方式:【自訂】。敘事包裝:【自訂層數與內容】。每一站的遊戲化學習迴圈:【自訂步驟】。 設計每一個互動題目時,都要考量:如何指引玩家前往樁位點、對應的教學內容與線索提示、題目與作答形式、答案如何審核、答對答錯或毫無頭緒時如何回應讓遊戲繼續推進。
1+
出題原則
設計每一個互動題目時,AI 都要考量這五點
答對給新的地點、新的煩惱,推向下一站
答錯NPC 提問、請玩家再觀察一次,不說教
毫無頭緒提供提示、文字說明、影音或網頁連結
引路人機制:捨棄單向說法,把引導權交給「提問」、「觀察」與「智慧」。
AA-2026-10 · 5/852
產出有 NPC 人物的學習單
改好的劇本+人物圖+範本 → 學習單
修改後劇本
NPC 人物圖(去背 PNG)動態去背 GIF 也可以
E學習單範本
有 NPC 人物的學習單
有 NPC 人物的學習單,請 AI 生成兩個版本
版本 A|紙本版有引導前往第幾號樁的提示文字,印出來闖關用
版本 B|網頁用版沒有任何引導樁位的文字,給步驟 3 做網頁
!範本是黑白的?記得提醒 AI 換成彩色
Sonia 老師的學習單多半是可列印的黑白線稿。告訴AI只借它的版型:大標題、編號區塊、連連看、勾選框、自我評量;內容換成你的劇本與 NPC。
學習單上要有
- 站名與這一站的任務
- NPC 頭像+對白泡泡
- 觀察題、解謎題(多種形式)
檢查
- NPC 說話的口吻符合各自個性
- 字是否清楚、沒有錯字或亂碼
提示詞範例 · 步驟 2
以下是修改後的劇本:【貼上劇本】。 請參考附件學習單範本的版面結構(標題、編號區塊、題型框、自我評量),為每一站製作一張學習單,並放入附件的 NPC 人物圖與對白。 範本是黑白的,請改成彩色的學習單。 請做兩個版本: A. 紙本版:加上引導玩家前往第幾號樁位的提示文字。 B. 網頁用版:不要有任何引導前往樁位的文字,下一步要拿來做互動網頁。
3
產出互動網頁
學習單+配音 → 互動網頁
網頁用版 NPC 學習單
FNPC 配音檔
互動網頁
!
請檢查這個版本是不是有引導下一樁位的文字內容,如果有,互動網頁就會產生提示
AI 輸出互動網頁後,請檢查網頁裡千萬不要有引導去哪一個樁的按鈕或提示引導玩家前往下一個樁位的提示,只放在紙本學習單上;每一站的網頁只負責這一站的互動。
F配音
把每位 NPC 的對白貼進語音工具(例如 VoAI 絕好聲創),為每個角色選不同聲線,存成 mp3,檔名照「角色_第幾站_序號」命名,例如 馬花妹_第1站_01.mp3。
每一站網頁裡要有
- 告訴AI哪些學習單上 NPC 說話的地方要換成配音播放按鈕(也就是說,NPC 對白泡泡裡的文字要換成按鈕的圖案與功能)
- 可點選的題目與對話選項
- 答對/答錯/提示三種回應
!按鈕程式裡的檔名 = 音檔的檔名
馬花妹_第1站_01.mp3mahuamei_s1_01.mp3
=
<audio id="a1" src="mahuamei_s1_01.mp3"></audio> <button onclick="a1.play()">▶ 播放</button>
請 AI 自動把中文檔名換成英文檔名,再插入按鈕程式裡,並將改好英文檔名的音檔給你提供下載。下載後,把音檔和網頁放在同一個資料夾。音檔的檔名與程式中的要一樣,否則點按鈕就沒聲音。
!
任何檔案(網頁、音檔、圖檔)命名時,不要在檔名裡再加上副檔名,改名時如果再打上 .mp3 或 .html,檔名就會變成重複(電腦常會隱藏副檔名看不到,所以建議預設打開「顯示副檔名」,如果不小心重複了就會發現)。例如:✗ ○○○.html.html✗ ○○○.mp3.mp3
HTML 和 mp3 放在同一個資料夾
這樣用滑鼠「左鍵連按兩下」打開 HTML,按下播放就會有聲音,不用先上傳。
千萬不要把音檔、圖片嵌進 HTML
這種做法叫 base64,網頁會變得很大,有可能無法上傳到網頁平台。
試玩一次,再上傳網站平台
- 用手機實際走一遍動線,每站都點過
- 每個播放鍵都有聲音;沒聲音先核對檔名
- 錯了請 AI 只改那一處,不要整頁重做
提示詞範例 · 步驟 3
請把附件的「有 NPC 人物的學習單(網頁用版,沒有引導樁位的文字)」、各 NPC 的配音檔,做成互動網頁: 1. 每一站做成一個網頁,網頁裡有好幾個遊戲互動頁面。 2. 以下學習單上 NPC 說話的地方,請換成對應的配音檔,並加上播放按鈕:【逐一列出要換的對白與音檔,例如:第1站 馬花妹「……」→ 馬花妹_第1站_01.mp3】 3. 請自動把音檔的中文檔名換成英文檔名(例如:馬花妹_第1站_01.mp3 → mahuamei_s1_01.mp3),再插入按鈕程式碼裡,並提供改好英文檔名的音檔讓我下載。 4. 題目可點選作答(選擇、配對、填空),答對、答錯、需要提示時,由 NPC 以提問方式回應,不說教。 5. 網頁裡不要有引導玩家前往哪一個樁位的按鈕、地圖或提示文字(這些只放在紙本學習單上)。 6. 手機直式畫面優先,字要大、按鈕要好按。 7. 不要把音檔、圖片用 base64 嵌進 HTML,請直接用檔名引用,我會把它們和 HTML 放在同一個資料夾。
完成
三步驟總覽
1 劇本
2 NPC 學習單
3 互動網頁
每一步都是「零件+零件 = 成品」。上一步的成品,就是下一步的零件。