我用 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 應用規劃師備考平台 看看，題庫練習、術語解析、概念圖譜都是免費的。

網站搬遷公告：原備考平台網址 twipas.lovable.app 已停止使用，所有題庫、術語解析、概念圖譜都已全部搬到新網站 aiterms.tw/ipas，請改用新網址繼續備考。

也可以加入 LINE 備考社群，跟大家一起學習進步，讓學習不再痛苦！

---

推薦閱讀

iPAS AI 應用規劃師是什麼？台灣唯一官方 AI 證照完整攻略

Vibe Coding 是什麼？AI 寫程式的新方式，不會寫 Code 也能開發產品

iPAS AI 應用規劃師怎麼準備？只靠刷題不如有效率學習

---

參考資料

經濟部產業人才能力鑑定推動網 (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