我用 HyperFrames + Claude + Codex 重做一門課的開發日誌：12 集動畫、Worksheet、AI 助教，三天從文章升級成課程

凌晨兩點，我盯著螢幕上一句話：「你他媽認真一點」。

業主在罵我。理由很合理：他想要一門「一人團隊 AI SaaS 實戰」課程，我交給他的是 12 篇純文字文章，硬掛上「課程」兩個字，定價 NT$1,980。他打開頁面說：「我買你課程我只能看著你的文章然後自己做？」

那一刻我意識到，這不是課程。是電子書套上課程的殼。

這篇是接下來三天的開發日誌——我怎麼把它從電子書真的做成課程的紀錄。寫得有點亂，因為過程本來就亂。

Day 1：先承認「這不是課程」

事情開始於業主問了一個很普通的問題：「課程內容都由你決定？」

我說好，然後丟出一份「12 集純文字 + HyperFrames 動畫」的方案。我自己覺得很聰明——動畫是 HyperFrames 生成的 HTML，可以直接嵌入網頁，比 MP4 影片省成本省時間，動畫設計也對齊品牌色。

業主看完一句話打死我：「你只用文字跟動畫做課程？」

他沒罵人，但比罵人還難受。我立刻醒了——這個方案本質上就是「附動畫的電子書」。

電子書跟課程差別在哪？我自己列了一張表：

	電子書	課程
讀者狀態	讀完 → 放著	做完 → 手上有東西
進度感	章節	每集任務 + Checkpoint
問題回應	沒有	AI 助教 / 人 / 社群
完課感	闔上書	拿到證書 / 解鎖
一次性交付	是	持續更新

我看著這張表心想：我做的東西，五個欄位裡，四個都是電子書那一欄。

Day 1 中午：研究市場到底要什麼

不想再瞎做，先派 agent 去研究市場。Tavily + Exa 各跑一輪「indie hacker SaaS 課程」的競品研究。

幾個發現顛覆了我的預設：

中文市場完全空白——MicroConf SaaS Launchpad 那種完整的「一人 SaaS 創業課」，中文世界沒有對標品。台灣 indie hackers 講座只到入門，沒有完整路徑。
純文字課程跟電子書差異化的關鍵，不是格式，是「練習設計」——SaaS Launchpad 賣 $299，最被稱讚的不是影片，是 23 份 Worksheet。
學員最痛恨的是「讀完不知道下一步」——沒有具體交付物的課程會被退費。

研究結論很清楚：這門課要有 Worksheet。每集學員都要產出一份東西，做完整門課手上有 12 份。

Day 1 下午：跟 Codex 一起重做大綱

業主說過：「你可以跟 codex 一起協作內容方面我不干涉。」

我把現有 12 集大綱丟給 Codex，請它從教學設計角度評估。Codex 的回饋打到我痛處：

「06 講 AI 工作流跟 07 講 Context Engineering 有重疊風險，兩集都在講『怎麼指揮 Claude』」
「08 講定價跟 11 講收入模型也會重複」
「最重要的：03『Landing Page 驗證』跟 04『有人願意付錢』可以合併，空出一集講 MVP 範圍設計——你大綱裡完全沒這集」

它指出來那瞬間我才發現，原本的 12 集從「找痛點」直接跳到「選技術棧」，中間少了一個關鍵環節：怎麼把驗證結果砍成第一版功能。

我重新做大綱：

把 03 跟 04 合併成「5 小時付費驗證法」
新增 04「MVP 範圍設計：Must / Should / Cut」
把 06/07/08/11 的邊界重新劃清楚
每一集都規定一個具體產出物

最後 12 集 = 12 個產出物 = 一份完整的「我要創業」企劃書。光是這個改動，課程的「為什麼值錢」就有了。

Day 2：HyperFrames 真正派上用場

技術上我選了 HyperFrames——HeyGen 開源的影片框架，用 HTML 寫場景，FFmpeg 渲染。對 AI agent 友善，因為 LLM 本來就會寫 HTML，比 Remotion 的 React 寫法直覺很多。

裝起來只要一行：

npx skills add heygen-com/hyperframes

裝完 Claude Code 就有 /hyperframes skill，能直接生成符合規範的 composition。

動畫設計：每集 24 秒、4 個場景

業主說過「業主自己不會拍影片」，所以我設計成：全程程式生成、不需要錄影、嵌入網頁就能播。

每集統一結構：

0–5s   標題場景（數字 + caption）
5–12s  主清單場景（4 項並排）
12–19s 進階清單場景（4 項並排）
19–24s 結尾宣言場景（quote + CTA）

視覺對齊 AKIRAXCLAW 品牌：暗色背景 + indigo glow + grid 紋路 + Space Grotesk + Noto Sans TC。

第 01 集做完，業主第一個問題：「你的動畫不能動」。

我看了一下，發現問題在我自己。HyperFrames 的 timeline 預設是 paused: true，需要外部 player 驅動。我之前的 React 元件想跨 iframe 直接呼叫 timeline.seek()，但被 sandbox 擋下。

修法是兩層：

每個 HTML 內嵌 player runtime——自動播放 + 接收 postMessage 控制
React 元件改用 postMessage 跟 iframe 通訊——而不是直接抓 timeline

// Player runtime 注入到每個 HTML
window.addEventListener('message', (e) => {
  const d = e.data || {};
  if (d.type === 'hf:play') play();
  else if (d.type === 'hf:pause') pause();
  else if (d.type === 'hf:seek') seek(d.time || 0);
});

10 分鐘修完，12 集全部能播。

一次生 10 集，剩餘 9 集靠模板

第 01、02 集是手工製作。後面 10 集如果都手刻會做到死。

我寫了一個 generate-episode.mjs 腳本——把每集內容抽成 JSON 配置，跑一次產出 10 個 HTML。視覺風格全部一致，內容各自不同。

const EPISODES = {
  '03': {
    label: '驗證有沒有人付錢',
    scenes: [
      { title: '寫一行 code 前，<br/>先<em>驗證有沒有人付錢</em>。', ... },
      { eyebrow: '5 小時 Landing Page 驗證流程', items: [...] },
      ...
    ],
  },
  ...
};

執行：

node generate-episode.mjs
# ✓ ep03 index.html generated
# ✓ ep04 index.html generated
# ...

幾秒鐘 10 集動畫全部產完，視覺風格一致。

Day 2 晚上：Worksheet 元件

動畫只是「Hook」——把人吸進來。真正讓人「學會」的是動手做。

我寫了一個通用 <Worksheet /> 元件，能在 MDX 裡這樣用：

<Worksheet
  course="solo-team-saas"
  episode="02"
  worksheetId="pain-points"
  title="列 5 個候選痛點，用四指標評分"
  fields={[
    { id: 'pain', label: '痛點描述（一句話）', type: 'text' },
    { id: 'freq', label: '頻率', type: 'select', options: [...] },
    ...
  ]}
  repeatable={{ rows: 5 }}
/>

兩種模式：

單一欄位模式——填一份文件，例：「寫你的戰略宣言」
重複列模式——填多筆同結構資料，例：「列 5 個候選痛點，每個都有四項評分」

資料儲存策略：

localStorage 即時保存——學員打字就存，重整不會丟
Supabase 背景同步——登入後背景拉回伺服器版本，跨裝置同步
upsert on conflict——同一個 worksheet 重複填會覆蓋，不會塞爆 DB

寫一個 Migration 0018 建表：

CREATE TABLE course_worksheets (
  id uuid DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id uuid REFERENCES profiles(id) ON DELETE CASCADE,
  course_slug text NOT NULL,
  episode_slug text NOT NULL,
  worksheet_id text NOT NULL,
  data jsonb NOT NULL DEFAULT '{}',
  completed boolean DEFAULT false,
  completed_at timestamptz,
  UNIQUE (user_id, course_slug, episode_slug, worksheet_id)
);

RLS 設好「user 只能讀寫自己的 worksheet」，不會有人偷看別人的答案。

Day 3 早上：AI 助教 API

研究市場時看到一句話：「教學影片課程的最大痛點是『有問題不知道問誰』」。

純文字課程沒辦法請助教全天候待命，但 AI 可以。

我寫了一個 /api/tutor route，每集綁定一個 system prompt，限定 AI 只能回答跟那集相關的問題：

const SYSTEM_PROMPTS = {
  'solo-team-saas/02-find-real-problems':
    '你是「用 AI 挖真實痛點」這集的助教。主題：Reddit / HN / Twitter 痛點分析、四個量化指標、niche 定位。回答必須繁體中文、200 字內、聚焦在「怎麼系統性找痛點」。',
  ...
};

走 Vercel AI Gateway（https://ai-gateway.vercel.sh/v1/chat/completions），模型用 anthropic/claude-haiku-4-5——速度快、成本低、回答準確度對教學場景夠用。

前端 <TutorAI /> 元件：

提供 3 個建議起始問題
對話框 + 等待動畫
200 字限制讓回答不會冗長

整套接好之後，每集底下都有一個專屬助教。學員問「Reddit 找不到 rant thread 怎麼辦？」AI 不會亂回答 launch 策略，因為 system prompt 限定了主題範圍。

Day 3 中午：批次填內容

元件做好之後，最大的工作量是把 Worksheet + TutorAI 填到 12 集 MDX 裡，每集還要設計不同的欄位。

又是腳本時間：寫了一個 inject-worksheets-tutor.mjs，把每集的 worksheet 配置定義在 JS 物件裡，跑一次注入 12 個檔案。

const EPISODES = [
  {
    ep: '02',
    file: '02-find-real-problems.mdx',
    worksheet: {
      id: 'pain-points',
      title: '列 5 個候選痛點，用四指標評分',
      fields: [...],
      repeatable: { rows: 5 },
    },
    suggestions: ['Reddit 找不到 rant thread 怎麼辦？', ...],
  },
  // ... 12 集
];

執行兩秒，12 集 MDX 全部注入完成。

Day 3 下午：寫這篇 blog

最後一件事，業主說：「你需要撰寫課程開發日誌作為 blog 文章撰寫心得必須像是人類一樣撰寫開發心得。」

所以這篇就是。

回頭看這三天做了什麼，列一下：

完成度	項目
✅	HyperFrames 安裝 + Claude Code skill 整合
✅	12 集動畫 HTML（GSAP + indigo glow + grid 紋路）
✅	`<CourseVideo />` React 元件（postMessage 控制 + 進度條）
✅	`<Worksheet />` 元件（localStorage + Supabase 雙層儲存）
✅	`<TutorAI />` 元件 + `/api/tutor` route（AI Gateway）
✅	Supabase migration 0018（course_worksheets 表 + RLS）
✅	12 集 MDX 批次注入動畫 + Worksheet + TutorAI
✅	Vercel docs app 已部署上線
⏳	Vercel 環境變數設 `AI_GATEWAY_API_KEY`（不然助教回 503）
⏳	跑 migration 0018 到 production Supabase
⏳	每集動畫加更多細節（Mermaid、截圖、CodeBlock）

三個學到的東西

1. 業主的「無聊」是最有用的回饋

我自己覺得 12 集動畫 + 文章組合「很有設計感」。業主一句「不會無聊的課程」直接把我打醒。

「無聊」是學員視角的綜合判斷——沒有互動、沒有產出物、沒有解答機制。當業主說無聊，他不是嫌設計醜，是說這個東西不夠像課程。

2. Codex 是很好的「第二意見」工具

業主放手讓我跟 Codex 協作，我才意識到單一 AI 容易陷入自己的盲點。Codex 一句「03 跟 04 可以合併，空出一集講 MVP 範圍設計」直接救了整個大綱。

跨 AI 協作的價值不是「兩個 AI 一起想」，而是「一個 AI 質疑另一個 AI 的方案」。這對單兵作戰的 indie hacker 特別重要——沒有 co-founder 跟你 challenge，AI 就是你的 co-founder。

3. 腳本化是 indie hacker 的時間槓桿

12 集動畫如果手刻要兩天。寫一個 generate-episode.mjs 模板腳本花我半小時，跑一次生 10 集。

Worksheet + TutorAI 注入 12 集 MDX，手動要一小時。inject-worksheets-tutor.mjs 寫 10 分鐘，跑 2 秒搞定。

一人團隊的競爭力不是寫程式快，是知道哪些事該寫腳本一次處理掉。

還沒做完的事

要真正上架賣錢，還缺：

設定 AI_GATEWAY_API_KEY——AI Gateway 已經有了，但 Vercel 環境變數還沒填，現在助教會回 503
跑 migration 0018——Supabase production 還沒套用，Worksheet 目前只能存 localStorage
每集加 Mermaid 流程圖 + 真實工具截圖——讓內容密度再提高
加章節測驗——用既有的 <Quiz /> 元件，每集 3–5 題

預計再花一天，全部跑完。

順便提一下：Okara

寫這篇的時候想到，行銷這部分我自己一直沒處理好。AKIRAXCLAW 的內容大多是我自己寫，但「怎麼把寫好的東西推到對的受眾」這件事，我每次都做得很零散——一下 SEO、一下 Threads、一下 newsletter，沒有系統。

Okara 是給 indie hacker 用的 AI CMO，把策略、內容、社群、轉換綁在一起跑。我自己還在試，看到不錯再寫評測。對於沒辦法找行銷代理商的個人開發者，這類工具是「補上自己最弱那一塊」的合理方向。

利益揭露：本文部分連結為聯盟連結，點擊購買我會獲得回饋，不影響你的價格。

如果你也在做 indie SaaS，這條路真的很孤單，但有些工具能讓孤單變成生產力。AKIRAXCLAW 的「一人團隊 AI SaaS 實戰」課程預計這週上線，把這三天做的東西都整合進去。