115 OJT 創新專案

OJT 小組會議準備專案

閱讀時間約 11 分鐘

OJT 小組會議準備專案

目標：為 OJT A 組第一次小組會議準備技術展示簡報 + live demo + 討論議題 為什麼現在做：耀弘預告下週開第一次小組會議（時間未定），需要在會前完成準備 專案路徑：~/Documents/ojt-deck/（從 animated-deck 複製框架） 部署目標：Cloudflare Pages（animated-deck.pages.dev），會議時投影

背景知識

會議場景

  • 形式：實體會議，借有投影設備的會議室，A 組全員面對面
  • 聽眾：耀弘（影片）、亜旻（數據）、于庭（行銷）、圓一（待確認）、振維（AI/DevOps/Scrum）
  • 我的角色：技術面的實做者。展示技術現況和邊界，不主導方向決策
  • 會議主持：耀弘或 Enoch（不是我）

我要推動的兩件事

  1. RAG 現實：龍騰 RAG 目前不存在。Enoch 只開過一次說明會講 RAG 概念，沒有任何 benchmark、沒有實體可測試。正一要大家根據模糊的 RAG 概念構想商模，但沒有東西可以驗證。組員需要知道這個事實，才能做務實的決策（例：先用自建知識庫驗證？等 Enoch 建好再動？）
  2. Landing Page 共識：目前已有兩版 LP 上線（暗色版 + 亮色版），但測試什麼、給誰看、怎麼追蹤都沒有團隊共識。這些決策應該由團隊一起做，不是我一個人定

我不要做的事

  • 不要變成 leader：分工、方向、預算由團隊（耀弘/Enoch）主導。我提供技術事實和展示，不提方向建議
  • 不要獨斷決策：LP 測試、商模方向等需要團隊共識的事，帶到會議上討論
  • 不要自掏腰包：NT$6,000 預算怎麼用需要團隊決定

現有技術資產

資產URL / 路徑狀態
Physics KB Demohttps://physics-kb.fly.dev/線上，密碼保護
Landing Page（暗色）https://knowbase-landing.pages.dev線上
Landing Page（亮色）https://knowbase-landing-light.pages.dev線上
Agent CLI~/Documents/physics-kb/agent/本機可跑
OJT Gardenhttps://ojt-garden.pages.dev線上

簡報框架

複用 ~/Documents/animated-deck/ 的框架：

  • Tech stack：React 19 + Framer Motion 12 + Vite 7 + TypeScript
  • 核心機制：useStep(n) 控制投影片內的逐步揭露，←/→/Space 導覽
  • Presenter mode：按 p 開第二視窗顯示講者筆記 + 計時器（BroadcastChannel 同步）
  • 動畫預設：fadeUp、fadeLeft、scaleIn、stagger() 等（src/components/presets.ts）
  • 共用元件：FeatureGrid、CompareTable、AnimatedList、Quote 等
  • 主題：CSS 變數控制色調，深色/淺色切換內建

複用方式：複製整個專案 → 清空 src/slides/ → 寫新投影片 → 更新 App.tsx 的 import + notes

簡報結構設計（5 頁）

#投影片步數內容目的
1S01_Title1OJT A組・技術現況報告開場
2S02_TechAssets43 張可點擊卡片（KB Demo + 密碼 / LP / OJT Garden）+ 技術核心提示讓組員知道手上有什麼
3S04_LandingPage2暗色/亮色版同時出現（含 cover 截圖）+ 目前缺什麼帶出 LP 共識議題
4S05_RAGReality4基本款 vs 進階款（Google 搜尋 vs 真人家教）→ 差別 → 現狀 → 結論用白話解釋 AI 問答等級差異
5S06_Discussion4四個議題：①先驗證還是先做 ②LP 給誰看 ③CTA 問什麼 ④分工時程把球交給團隊

總步數：~15 步，預估 15 分鐘展示 + 剩餘時間討論

已刪除的投影片：S03_KBDemo（使用者判斷不需要獨立投影片，KB Demo 在 S02 卡片直接連結即可）

講者筆記要點

S2 技術資產總覽：

  • 強調「有部署到雲上，但目前只是技術展示」
  • 每個資產說明技術能做什麼 + 限制在哪
  • KB Demo 卡片有密碼顯示（點擊複製），方便現場操作

S04 Landing Page：

  • 兩版 LP 同時展示（暗色/亮色），都有 CTA 表單 + confetti 動畫
  • 帶出缺什麼：LP 給誰看、追蹤機制、表單要問什麼 → 都需要團隊決定

S05 AI 問答等級：

  • 用「Google 搜尋」vs「真人家教」的比喻，讓非技術人員理解 RAG 等級差異
  • 不批評任何人，客觀陳述：做一章已吃掉 AI 額度，擴展需要預算
  • 結論：要做什麼等級的產品，決定了預算和時間

S06 討論議題：

  • 四個議題（已移除 RAG 策略和預算議題，因為 Cloudflare 免費、RAG 在 S05 已涵蓋）
  • 每個議題列出選項但不推薦答案
  • 明確說「這些需要大家一起決定」

Phase 1：建立簡報專案

目標：從 animated-deck 複製框架，清空內容，建立新投影片骨架

  • 1.1 複製 animated-deck 框架 ✅
  • 1.2 安裝依賴 ✅
  • 1.3 清空舊投影片 → 建立 6 個新投影片 ✅
  • 1.4 更新 App.tsx（含 6 頁 import + 完整講者筆記）✅

Phase 驗證：vite build 成功，零錯誤

Phase 2：製作投影片內容

目標：6 頁投影片全部完成，含動畫和講者筆記

  • 2.1 S01_Title — 標題頁 ✅（fadeUp + fade 動畫）
  • 2.2 S02_TechAssets — 技術資產總覽 ✅（useStep(4)：3 張可點擊卡片 + 技術核心提示）
    • 卡片可點擊開新分頁、KB Demo 有密碼顯示（click-to-copy）
  • 2.3 S03_KBDemo — 已刪除（使用者判斷不需要獨立投影片）
  • 2.4 S04_LandingPage — LP 技術展示 ✅（useStep(2)：兩版 LP 同時出現含 cover 截圖 + 缺什麼）
  • 2.5 S05_RAGReality — AI 問答等級 ✅（useStep(4)：基本款 vs 進階款比喻 + 差別 + 現狀 + 結論）
    • 完全重寫：用 Google 搜尋 vs 真人家教的比喻，非技術聽眾也能理解
  • 2.6 S06_Discussion — 討論議題 ✅（useStep(4)：四個議題，移除 RAG 策略和預算）
  • 2.7 講者筆記 ✅（App.tsx notes Record，每頁含完整講稿提示）
  • 2.8 LP 增強：CTA 表單 + confetti 動畫（暗色版 + 亮色版）✅
    • 表單角色中立設計（我是：老師/學生/家長/其他）
  • 2.9 Storyset 插圖加入簡報（ill-ai.svg, ill-team.svg, ill-presentation.svg）✅
    • 嘗試過 section-break 插圖但太刻意，改為標題旁小插圖
  • 2.10 LP hero doodles 嘗試 → 失敗，已移除
    • 手寫 SVG 無法達到設計品質，需 AI 生圖工具（如 Nano Banana）

Phase 驗證：build 成功，共 ~15 步

Phase 3：準備 Live Demo 環境

目標：會議當天能順暢切換到 live demo

  • 3.1 確認 Physics KB Demo 可用 ✅
  • 3.2 確認 Landing Page 可用 ✅（CTA 表單 + confetti 正常）
  • 3.3 確認 OJT Garden 可用 ✅
  • 3.4 準備 demo 問題（會前準備）
  • 3.5 規劃螢幕切換流程（會前準備）

Phase 驗證：使用者已自行測試所有 demo 環境

Phase 4：部署

目標：簡報和 LP 部署到 Cloudflare Pages

  • 4.1 部署簡報 ✅ → animated-deck.pages.dev（複用既有 Cloudflare 專案）
  • 4.2 部署暗色 LP ✅ → knowbase-landing.pages.dev（含 CTA 表單）
  • 4.3 部署亮色 LP ✅ → knowbase-landing-light.pages.dev（含 CTA 表單）
  • 4.4 更新簡報 S04 cover 截圖 ✅（重新截圖反映最新 LP 狀態）

Phase 驗證：所有站點已上線，使用者已測試

Phase 5：會議當天準備

目標：到會議室前一切就緒

  • 5.1 會前 15 分鐘到會議室

    • 做法：連投影設備、開 ojt-deck.pages.dev、按 p 開 presenter 視窗（筆電看筆記、投影看簡報）
    • 驗證：投影畫面正常、presenter 視窗同步

  • 5.2 開好 demo 頁面

    • 做法：新分頁開 physics-kb.fly.dev（已登入）、新分頁開兩版 LP
    • 驗證：三個分頁都已載入

  • 5.3 測試網路

    • 做法：確認會議室 WiFi 穩定、KB demo 能正常回應
    • 備案：如果網路不穩，用手機熱點

Phase 驗證：坐在會議室座位上，操作一次完整流程

全域變更紀錄

跨 step 的架構決策、全局影響的變更記在這裡。 單一 step 的試錯過程和洞察記在該 step 底下。

格式：- [日期] 變更描述（影響：Phase X, Y）

  • [3/8] 刪除 S03_KBDemo，簡報從 6 頁改為 5 頁（影響：Phase 2）
  • [3/8] S05 完全重寫：RAG 技術說明改為「Google 搜尋 vs 真人家教」白話比喻（影響：Phase 2）
  • [3/8] S06 議題從 5 個精簡為 4 個：移除 RAG 策略和預算（影響：Phase 2）
  • [3/8] LP 加入 CTA 表單 + confetti + 角色中立設計（影響：Phase 2, 4）
  • [3/8] LP hero doodle 嘗試失敗（手寫 SVG 品質不足），已移除（影響：Phase 2）
  • [3/8] 部署用 animated-deck.pages.dev（非 ojt-deck.pages.dev，複用既有專案）（影響：Phase 4）

注意事項

  • 措辭：RAG 現況的描述要客觀事實，不帶批評或情緒。「目前還在規劃中」而非「根本沒做」
  • 角色邊界：展示技術事實 + 列出需要決定的議題。不推薦方向、不主導討論
  • demo 風險：Fly.io 有 auto-sleep，首次請求可能要等 5-10 秒喚醒。會前先 ping 一次
  • 截圖備案：所有 live demo 都有截圖版，網路掛了也能講
  • 時間控制：簡報 15-20 分鐘，剩下全留給討論。不要講太久

連結

關係圖譜