互動式教學網站模板

說明

互動式教學網站模板定義 IDEA Academy 課程在網站上的可操作工作台結構。它不是課程銷售頁，也不是單純把簡報放到網頁上，而是把課程流程、提示詞、素材、學員輸入、檢核與匯出整合成一個可重複使用的學習工具。

第一版參考「AI 短影音互動教學工作台」：用 React + Vite 建立純前端靜態站，支援流程導覽、課堂/課後模式、投影片播放器、提示詞生成器、localStorage 工作台與 JSON 匯出。

第一屏原則

互動式教學網站的第一屏要是可操作工作台，不是銷售頁，也不是簡報播放器。學員一進來就能沿著流程做出交付物。

Why

Notion 講義適合讓學員快速理解與複製提示詞，但當課程需要多步驟輸入、即時生成提示詞、保存成果或檢查作品時，互動式教學網站會更適合。

互動式教學網站的目標是降低學員操作成本：學員不用在簡報、Notion、ChatGPT、素材資料夾之間來回找東西，而是沿著網站流程完成一個具體交付物。

Template Structure

1. Site Metadata

每個互動式教學網站都要先定義：

課程定位

網站名稱、課程主題、IDEA Academy Stage。

內容對應

Notion 講義、AI Playbook 文件、來源素材。

部署設定

Live URL、build command、publish directory、環境變數。

網站名稱
課程主題
對應 IDEA Academy Stage
對應 Notion 講義
對應 AI Playbook 文件
Live URL
Build command
Publish directory
是否需要環境變數

範例：

網站名稱：AI 短影音互動教學工作台
課程主題：AI 短影音從 0 到 1
Build command：npm run build
Publish directory：dist
Live URL：https://ai-video-workflow.netlify.app/
環境變數：目前不需要

2. Learning Flow

用途：讓學員知道現在在哪個步驟，以及每一步要交付什麼。

路線

先看完整流程，知道每一步會產出什麼。

提示詞

依學員輸入生成可複製 Prompt。

工作台

保存學員輸入、AI 結果與最佳成果。

檢核與匯出

檢查成果、下載 JSON 或轉回 Notion。

建議欄位：

Step	Goal	Input	Tool	Output	Check
路線	理解完整流程	課程摘要	Flow rail	學習地圖	知道下一步
實作	完成自己的成果	學員素材	Workbench	專案輸出	可保存或匯出

短影音工作台範例流程：

路線：理解三種工作流。
角色：製作角色四視圖與表情動作。
場景：建立場景圖與關鍵物品。
提示詞：產生單鏡影片提示詞。
導演板：製作 6 格導演板。
混合：生成初版並重製關鍵鏡頭。
檢核：抽卡評估與修正。
實作：保存完整專案摘要。

3. Core Views

每個互動式教學網站至少包含以下視圖：

Flow Rail

顯示流程步驟、目前位置與進度。

Prompt Studio

把欄位輸入轉成可複製提示詞。

Workbench

保存、恢復、複製、刪除學員成果。

Resource Viewer

投影片、範例圖、素材與教學提示。

Export

下載 JSON、Markdown 或可貼回 Notion 的內容。

Header Actions

外部連結、匯出、模式切換與回到首頁。

Header：課程名稱、主要行動、外部連結、匯出。
Flow Rail：課程步驟與目前進度。
Main Work Area：目前步驟的內容與操作。
Resource Viewer：投影片、圖片、範例或教學素材。
Prompt Studio：提示詞生成器或可複製模板。
Workbench：學員暫存區、保存、恢復、複製、刪除。
Export：下載 JSON、Markdown 或可貼回 Notion 的內容。

4. Mode Design

建議至少支援兩種模式：

課堂模式：只顯示上課需要的重點流程與任務。
課後完整模式：顯示完整素材、補充說明與延伸提示詞。

若第一版時間有限，可以先只做課堂模式，但文件中要明確標記課後模式為下一步。

5. Data Model

第一版可使用純前端資料結構，不需要後端。

建議模型：

LearningStep
- id
- name
- goal
- input
- output
- relatedResources
- promptTemplate

ResourceItem
- id
- title
- section
- summary
- image
- tags

PromptTemplate
- id
- name
- category
- fields
- template
- teachingNote

WorkbenchItem
- id
- createdAt
- step
- projectName
- input
- promptText
- output
- relatedResources

6. State and Storage

第一版優先使用瀏覽器本機狀態。

localStorage 限制

localStorage 只適合保存非敏感學習資料。同一瀏覽器、同一裝置才會保留，不能當成正式雲端同步或學員資料庫。

可保存：

學員輸入
已產生提示詞
工作台項目
目前流程進度

預設儲存：

localStorage
匯出 JSON

必須提醒限制：

同一瀏覽器、同一裝置才會保留。
清除瀏覽器資料後會消失。
不適合保存 API key、token、客戶個資、財務資料或未公開素材。
若要跨裝置同步，需另行設計登入、資料庫與隱私條款。

7. README and Deployment

每個互動式教學網站都必須有 README。

README 必填：

專案用途
目前功能
專案結構
啟動方式
Build 方式
部署方式
環境變數
已知問題
下一步
Live URL

部署資訊必須與實際設定一致，不要憑印象填寫。

8. QA Checklist

每次完成或部署前至少檢查：

功能

流程切換、Prompt 生成、Workbench 與匯出都要可用。

內容

素材可載入，README 與 package scripts 一致。

體驗

手機不橫向溢出，Console 沒有主要錯誤，Live URL 可開啟。

首頁載入正常。
主要流程可切換。
主要素材可載入。
Prompt 生成或複製功能正常。
Workbench 可保存、恢復、複製、刪除。
匯出功能可下載檔案。
手機寬度沒有主要內容橫向溢出。
Console 沒有主要錯誤。
README 與 package scripts 一致。
Live URL 可開啟。

Do

工作台應該做到

第一屏可操作。
提示詞可複製。
成果可保存或匯出。

第一版先避免

不必要登入。
前端保存敏感資料。
只做成簡報瀏覽器。

把第一屏做成可操作工作台，不做行銷 landing page。
讓學員沿著流程完成一個具體交付物。
將 Notion 講義中的提示詞與任務轉成互動元件。
保留課堂模式與課後模式的設計空間。
使用 localStorage 前，清楚標註保存範圍與限制。
每個網站都要有 README、部署方式與 QA 紀錄。
部署後記錄 Live URL。

Don’t

不要把互動式教學網站做成簡報瀏覽器而已。
不要在第一版加入不必要的登入、資料庫或雲端同步。
不要把 API key、token 或學員敏感資料保存在前端。
不要讓所有提示詞混在同一個巨大文字區。
不要讓工作台輸出只能看，不能複製或匯出。
不要在沒有驗證 package scripts 前撰寫 README 部署指令。

Checklist

Prompt Example

請依互動式教學網站模板，將下列課程主題規劃成一個可實作的互動教學工作台。

課程主題：
{{course_topic}}

對應 Notion 講義：
{{notion_handout_summary}}

來源素材：
{{source_assets}}

請輸出：
- Site Metadata
- Learning Flow
- Core Views
- Mode Design
- Data Model
- State and Storage
- README and Deployment
- QA Checklist

限制：
- 第一屏必須是可操作工作台，不是行銷 landing page
- 第一版優先純前端靜態站
- localStorage 只能保存非敏感資料
- 必須支援提示詞複製或產生
- 必須支援學員成果保存或匯出
- 必須列出部署設定與已知限制