Study Scriber.

問題背景

身為持續學習的設計師，經常下班後參加研討會跟線上課程。但長期下來遇到幾個反覆出現的困擾：

1. 下班後上課容易恍神，導致筆記不完整
2. 老師語速太快，來不及同時聽跟記錄
3. 事後需要重聽錄音來補筆記，額外花費大量時間

這不是偶爾的問題，而是每次上課都會遇到。既然市面上沒有適合的工具，那就自己做一個。

競品分析

在動手之前，先把市場上可能的解法都看過一輪：

Good Tape — 有即時轉錄功能，但價格高昂，不適合個人長期使用。
Superwhisper — 適合短語音輸入（像是口述筆記），但不適用於長時間課程錄音。
MacWhisper — 支援本地端 STT，但只能事後轉錄，沒有即時逐字稿功能。

每個工具都解決了一部分問題，但沒有一個能在上課時同時做到「錄音 + 即時轉文字 + 寫筆記」。所以自己做。

核心價值

「一個上課時能邊錄音邊轉文字的筆記工具。」

錄音、即時逐字稿、Markdown 筆記、匯出，全部在同一個畫面完成。上課時專心聽，恍神了就看逐字稿補回來，課後直接匯出整理好的筆記，不需要重聽錄音。

功能規劃

MVP 限制在一個月內完成，只用 Azure OpenAI 的資源。在這個限制下，定義出五個核心功能：

1. Markdown 筆記編輯器 — 與逐字稿並排顯示，上課時可以同時看逐字稿跟寫筆記
2. 錄音功能 — 一鍵開始錄音，課程結束後自動儲存
3. 即時語音轉文字 — 錄音同時產生逐字稿，恍神了回頭看就好
4. 匯出筆記與逐字稿 — 支援匯出到 Notion、Heptabase 等知識管理工具
5. 模型設定 — 可選擇 Whisper 或 gpt-4o-transcribe，依據需求切換精準度跟速度

PRD 與技術規格

因為是獨自開發，PRD 同時也是跟 AI（Cursor）溝通的技術文件。裡面定義了每個功能的工作流程、支援的 STT 模型規格、以及前後端的分工邏輯。

系統架構

前端使用 React + Next.js 搭配 Tailwind CSS，後端使用 Python FastAPI，透過 WebSocket 即時傳輸音訊串流到 Azure OpenAI API（Whisper / gpt-4o-transcribe）做語音轉文字。音檔儲存在 Cloudflare R2，逐字稿與筆記資料存在 Supabase。

整個開發流程使用 Cursor 搭配 AI — 規劃階段用 o3 / Opus 4 做架構分析，實作階段用 Sonnet 4 / Cursor Auto 寫程式碼，遵循 TDD 跟 Tidy First 原則。

這個專案證明了什麼

一個設計師可以獨立走完「定義問題 → 競品分析 → PRD → Prototype → UI → 開發」的完整流程。

但同時也學到了一件重要的事：規劃品質跟開發品質很難同時兼顧。當你一個人要扛所有角色的時候，品質一定會在某個環節打折。這反而更加驗證了即使在 AI 時代，PM 跟設計師的專業分工依然必要 — 你需要有人專心釐清需求、做正確的判斷，而不只是寫 Code。

也透過這個專案，學會了如何跟「RD = AI」溝通後端邏輯的技術細節，也就是「好好說話」＆「把設計意圖轉換成 AI 能理解的技術規格」。