我用 AI 三天蓋了一個 iPAS 備考平台，Vibe Coding 完整紀錄
我們本業是一名導演，在這之前從來沒有碰過 React、TypeScript，或任何前端框架。
但我在備考 iPAS AI 應用規劃師的同時，同步架設了一個備考平台，前幾天最密集的時候超過 80 個 commit，最後做出來的東西有 517 題題庫、122 個 AI 術語白話解析、互動式知識圖譜、FSRS 間隔重複演算法、LINE Bot，還有 507 個術語的 Programmatic SEO 頁面。
這篇文章是我完整的開發紀錄，包括設計理念、用什麼工具、遇到哪些問題、以及從這個過程裡學到了什麼。
為什麼要一邊備考，一邊做平台？
做中學是我最有效率的學習方式
我沒有辦法靠讀書記住東西，但我可以靠做東西記住東西。
備考 iPAS 的時候，讀到「間隔重複演算法」這個概念，看文字看了三遍還是不太懂。但當我必須把 FSRS 演算法實際整合進平台，讓它計算每道題下次該在什麼時候複習，這個概念突然就清楚了，理解不是靠背定義，是靠實際操作。
做平台不是備考的分心，而是最深入的備考方式，我必須真的搞懂每一個概念，才能把它做進產品裡。
iPAS 備考資源的三個問題
準備 iPAS 的過程中，我遇到的最大困擾不是內容太難，而是資源太散。
官方有公布考試範圍，但題目散落在不同 PDF 跟書本裡，格式不統一，有的是書本，有的是純文字。想反覆練習，只能自己找出來或盯著 PDF 一題一題看，沒有即時回饋，沒有錯題統計，什麼都沒有，而且有大量重複內容Ｍ，很浪費時間。
更深的問題是，現有的備考資源只有「刷題」，沒有「理解」，答錯了你知道答案，但不知道為什麼，下次還是會錯。
我想解決的就是以上這些問題。
設計理念：一次理解，不再刷題
我們網站的定位是「一次理解，不再刷題」，不是傳統的題海戰術，而是透過診斷找出知識缺口，用三種角度解釋概念，再用間隔重複確保長期記憶。
診斷測試：先找缺口，再針對補強
平台的起點是診斷測試，20 題，從最常錯的題目開始篩，目標是讓正確率落在 50% 左右，這樣才能找到真正的知識缺口，不是一開始就給你簡單題目讓你有安全感。
診斷結果直接告訴你哪個知識區域最弱，然後學習路徑就從這裡開始，不浪費時間在你已經會的地方。
三角度學習法：比喻、對比、因果
每一個核心概念，平台都提供三種理解角度。
比喻法：用你熟悉的事物類比，讓抽象概念有畫面感。對比法：把容易混淆的概念並列，說清楚差別在哪裡。因果法：解釋為什麼這個技術是這樣設計的，背後的邏輯是什麼。
考試前我最怕的就是精確率（Precision）和召回率（Recall）這兩個概念，用三角度把它們拆開來看，才真正弄清楚差別，之後遇到相關題目就不會再混淆。
FSRS 間隔重複演算法：跟 Anki 一樣的記憶引擎
背了就忘是學習最大的浪費，平台內建 FSRS（Free Spaced Repetition Scheduler）演算法，這是 Anki 現在使用的同一套記憶引擎，比舊版 SM-2 更準確地預測你什麼時候會遺忘。
每道題答完，系統會根據你的答題表現計算下次最佳複習時間，存進 Supabase 資料庫，下次開啟平台就會提醒你哪些題目該複習了。不是讓你每天無腦刷100題，而是確保你今天花的時間，一個月後還記得。
用什麼工具做到的：Lovable 加 Claude Code
Lovable 是什麼
Lovable 是一個 AI 全端開發平台，你用自然語言描述你要的功能，它幫你生成完整的前端介面和後端整合，用的是 React + TypeScript + Tailwind CSS + shadcn/ui，不是玩具等級的 prototype，是可以直接部署上線的產品。
對我這種完全沒有前端基礎的人來說，Lovable 讓我跳過最難的入門門檻：搞定框架、設定路由、串接資料庫。
Day 1 我就直接有一個可以運作的 Supabase 後端 + React 前端。
Claude Code 處理細節邏輯
但只靠 Lovable 不夠。功能越複雜，自然語言描述越難精確，生成出來的 code 需要手動調整的地方越多。
這個時候我用 Claude Code，一個在終端機裡運作的 AI Coding 工具。可以讀整個專案的程式碼，理解上下文，針對特定功能做精準的修改。FSRS 演算法整合、LINE Bot 架構設計、Programmatic SEO 的結構化資料，這些比較複雜的部分，都是 Lovable + Claude Code 配合做出來的。
Lovable 負責快速把架構立起來，Claude Code 負責把細節做對，兩個工具的組合是我開發效率的來源。
完全沒有程式背景的人能做到什麼
說清楚我的起點：我不會寫 React，不懂 TypeScript，沒有碰過 Supabase 或 Cloudflare Workers。
但我知道我要解決什麼問題，我知道使用者需要什麼功能，我知道怎麼描述清楚，這在 AI 開發工具時代，已經是夠用的起點了。
| 工具 | 負責什麼 | 優勢 |
|---|---|---|
| Lovable | UI 架構、元件生成、Supabase 整合、快速部署 | 自然語言生成完整前後端，無需手動設定 |
| Claude Code | 複雜邏輯（FSRS、LINE Bot、SEO Schema） | 理解整個 codebase 上下文，精準修改 |
| Supabase | PostgreSQL 資料庫、Auth、Realtime | 與 Lovable 原生整合，25 個 migration 管理 |
| Cloudflare Workers | LINE Bot 後端 | 低延遲 Edge Function，搭配 KV 做暫存 |
| GitHub Actions | LINE Bot 每日推播排程（取代 Cloudflare Cron） | 穩定的定時任務，UTC 04:00 = 台灣12點 |
開發實況：最密集的那幾天
整個專案前三到五天是最密集的時期，之後持續迭代了將近兩週，以下是最關鍵的開發階段。
Day 1：從模板到有517題的題庫
第一天的節奏快到有點嚇自己。
Lovable 給了一個 React + shadcn/ui 的基礎模板，當天就完成 Supabase 後端整合、紫色主題的 UI 大改版、左側導航架構，然後開始匯入題庫，初級科目一二共 180 題，中級科目一二三共 100 題，當天全部進 DB。122 個 AI 術語白話解析也同一天建好。
這在傳統開發流程裡大概要兩週。AI 開發工具的速度優勢在第一天就表現出來了。
Day 2：功能爆炸與白畫面大危機
第二天是整個專案最混亂的一天，超過 80 個 commit，速度快但 bug 也多。
這一天同時完成了：診斷測試、概念知識圖譜（React Flow 互動式有向圖）、三角度學習卡片、間隔重複系統、離線模式（PWA + Service Worker）、深色/淺色主題切換、手機版底部 Tab Bar，還有管理後台。
然後白畫面出現了。
使用者打開網站看到空白，重新整理還是空白，這種 bug 最難 debug，因為沒有 error message，什麼都看不到。花了好幾個 commit 才找到根本原因：程式碼分割（code splitting）搭配 Vite 的 `manualChunks` 設定，在模組載入時就觸發 `localStorage` 等 browser API，造成循環依賴。
找到之後，修法反而很乾淨：把所有模組層級的 browser API 呼叫改成函式內延遲執行。
這個 bug 後來出現了第二次，理由一樣，第二次我直接知道去哪裡找。
Day 3：LINE Bot 與 Cloudflare Cron 的教訓
LINE Bot 是從零開始建的，部署在 Cloudflare Workers，功能包含每日一題（從題庫裡挑最難的題目推播）、隨機練題、連勝系統（streak）、排行榜。
第一個版本用 Cloudflare Workers 的原生 Cron 觸發每日推播，設定了台灣中午 12 點推題，結果發現 Cloudflare Cron 在某些情況不可靠，該觸發的時候沒有觸發。這種 bug 非常難 debug，因為你不知道它什麼時候會發生，只能等。
後來改用 GitHub Actions 的 cron job，設定 UTC 04:00（台灣 12:00），每天定時跑一個 workflow 打 Cloudflare Workers 的 API。GitHub Actions 的可靠度明顯比 Cloudflare 原生 Cron 高，推播開始穩定。
答題追蹤的部分，原本想用 Supabase 新增一張 table，但後來改用 Cloudflare KV 做暫存，避免 DB schema 複雜化，順帶解決了 RLS policy 的問題，這個架構決策在後來證明是對的。
後續優化：507 頁 Programmatic SEO
第二週開始，開發重心從功能轉到 SEO 和長期流量。每一個 AI 術語都有獨立的 URL（例如 `/term/深度學習`），讓 Google 可以收錄長尾關鍵字。507 個術語頁面，全部動態生成，每頁有獨立的 meta tags 和 JSON-LD 結構化資料。
還做了 `llms.txt` 和 `llms-full.txt`，針對 AI 爬蟲（Perplexity、ChatGPT Search、Claude）提供結構化版本的術語辭典，`robots.txt` 主動允許 GPTBot、PerplexityBot、ClaudeBot 爬取，這在 2026 年不是標準做法，但 AI 搜尋的流量比重正在快速提升。
平台功能全覽
| 功能 | 說明 |
|---|---|
| 診斷測試 | 20 題從最難的題目篩起，找到知識缺口，目標正確率 50% |
| 題庫練習 | 517 題（376 官方考古題 + 141 趨勢延伸題），標記來源 |
| 三角度學習 | 比喻法 + 對比法 + 因果法，同一概念三種解釋角度 |
| FSRS 間隔重複 | Anki 同款演算法，計算最佳複習時間，持久化到 Supabase |
| AI 術語辭典 | 122 個術語，白話解析 + 生活化比喻 |
| 概念知識圖譜 | React Flow 互動式有向圖，視覺化知識概念之間的關聯 |
| 模擬考試 | CBT 環境模擬，計時、自動判分、考後弱點分析 |
| LINE Bot | 每日一題（從最難題目挑）、隨機練題、連勝系統、排行榜 |
| PWA 離線支援 | Service Worker 快取，無網路環境也能練習 |
| 程式化 SEO | 507 個術語各有獨立 URL，JSON-LD 結構化資料 |
結論：做平台是最深入的備考方式
備考 iPAS 和架設平台同時進行，這個決定本來可能很蠢，時間一樣多，但要做的事變成兩倍。
但實際結果是：因為要做平台，我對 AI 概念的理解比純粹讀書深得多，FSRS 是因為要整合進去才真正搞懂的，三角度學習法是我在整理題目解析的時候自然演化出來的架構，知識圖譜是我把考綱結構視覺化的過程中，才真正看清楚各個知識點之間的關係。
用 AI 工具做開發，有想法的人和有技術的人之間的距離縮短了，但沒有消失。
你還是需要想清楚要解決什麼問題，你還是需要判斷什麼方案是對的，你還是需要在 bug 出現的時候知道從哪裡找原因。
AI 開發工具不是讓你不用思考，而是讓你把思考的時間花在真正重要的地方。
如果你在準備 iPAS AI 應用規劃師考試，歡迎到 iPAS AI 應用規劃師備考平台 看看，題庫練習、術語解析、概念圖譜都是免費的。
也可以加入 LINE 備考社群，跟大家一起學習進步，讓學習不再痛苦！
推薦閱讀
iPAS AI 應用規劃師是什麼？台灣唯一官方 AI 證照完整攻略
Vibe Coding 是什麼？AI 寫程式的新方式，不會寫 Code 也能開發產品
參考資料
經濟部產業人才能力鑑定推動網 (2026). “iPAS 經濟部產業人才能力鑑定”
Lovable (2026). “Lovable: Your superhuman full stack engineer”
Supabase (2026). “Supabase Documentation”
LINE Developers (2026). “LINE Messaging API Documentation”
Open Spaced Repetition (2025). “FSRS Algorithm — Free Spaced Repetition Scheduler”
Cloudflare (2026). “Cloudflare Workers Documentation”
FAQ
iPAS AI 應用規劃師備考平台是免費的嗎？
是的，題庫練習、術語解析、診斷測試、概念知識圖譜和 LINE Bot 目前都是免費使用的，我做這個平台的初衷就是讓 iPAS 備考資源更容易取得。
完全沒有程式背景可以用 Lovable 和 Claude Code 做出這種東西嗎？
可以，但你需要知道自己要解決什麼問題，能夠清楚描述功能需求，以及在東西出錯的時候有耐心找原因。工具的門檻確實低了，但「想清楚要做什麼」這件事沒有辦法被工具取代。
FSRS 演算法是什麼，跟 Anki 有什麼關係？
FSRS（Free Spaced Repetition Scheduler）是 2022 年發布的新一代間隔重複演算法，現在是 Anki 的預設演算法。它根據你的答題表現預測最佳複習時間，比舊版 SM-2 更準確。aiterms.tw 把 FSRS 整合進題庫，每道題的複習排程持久化存在 Supabase，讓你的學習投資不會因為遺忘而白費。
LINE Bot 怎麼加入？
到 iPAS AI 應用規劃師備考平台首頁可以找到 LINE 社群加入連結，可以使用『/幫助』查看機器人功能，在群組裡直接點選答案就能作答，連勝紀錄和排行榜會即時更新。
開發這個平台遇到最難的問題是什麼？
白畫面 bug 是最難 debug 的，因為沒有 error message，使用者打開就是空白頁面。根本原因是 Vite code splitting 搭配模組層級的 browser API 呼叫造成循環依賴，找到原因後修法反而很乾淨。這個 bug 出現了兩次，第二次直接知道去哪找。另一個是 Cloudflare Cron 不可靠，LINE Bot 推播不穩定，後來改用 GitHub Actions 才解決。
一邊準備考試一邊做平台，時間夠用嗎？
時間確實很緊，但做平台本身就是一種備考。整合 FSRS 演算法讓我真正搞懂間隔重複的原理，整理三角度學習法的時候讓我把考試範圍的概念關係看得更清楚。如果只是讀書，我不確定能有這樣的深度，對我來說反而是很有幫助的變做邊學習，而不是單純刷題。
