如果你問過去的我：「要不要用網頁技術做一個完整的應用？」
我大概會搖頭，因為我本身是一名長期專注於 桌面應用程式開發 的上班族工程師。

對於 React、Firebase、PWA 這些技術，我以前只聽過名字，完全沒碰過。
甚至想說：

「這種東西應該不是我能做的。」

但因為 AI 開發工具 的出現，事情完全不一樣了。
靠著 ChatGPT、Cursor、Augment 這些幫手，我開始動手嘗試，想把最近的自身需求
「一個能讓孩子透過遊戲化方式養成好習慣的工具」，慢慢拼湊出來。

整個過程其實就像在邊走邊探索：

• 我先提出需求以及想法和 AI 討論
• AI 提出建議，幫忙生出程式碼或架構
• 接著由我檢查、修正，決定要不要採用

就這樣反覆來回，最後也把 PWA 兒童任務管理平台 完成了，而且還能跨平台使用。

技術選擇：AI 幫我排除雜訊

面對陌生領域時，最困難的可能不是寫程式，而是 決策。
框架百百種，工具眼花撩亂，對新手來說根本無從下手。

幸好，我把這些難題交給了 AI，並從 AI 給出的建議中進行「比較與取捨」。

最後確立了這樣的技術組合：

• React + TypeScript：當前 AI 最熟悉的領域，降低犯錯機率，穩定開發
• PWA 架構：支援跨平台使用，體驗接近原生 App
• Firebase：雲端資料庫 + Hosting，免維護伺服器
• Google Cloud 語音：念出任務或題目內容，幫助小孩快速理解
• Resend 與綠界金流：寄送報表 & 贊助機制

AI 可以提供框架、套件和工具建議，幫助新手排除雜訊，但提供的建議不一定完美，因此仍需要工程師判斷。對於大型或複雜系統，效能、擴充性、架構耦合等問題都需要人工考量。

功能演進：從小清單到完整任務世界

我的起點是一個基礎任務管理功能：做一個能夠 新增任務、完成勾選 的工具。
隨著和 AI 的討論推進，功能逐漸擴充，平台慢慢演變成一個結合任務、冒險地圖、知識學習的小世界。

1. 基礎任務管理

• 家長登入後，可以協助新增「刷牙、收拾書包」等例行任務
• 兒童友善風格介面，適合小孩使用
• 可愛的泡泡任務，激發執行任務的慾望
• 透過語音機制，幼兒園小孩也能完全自行操作
• Firebase 確保資料即時同步，透過手機也能查看

2. 遊戲化設計

• 冒險地圖：用 amCharts5 打造互動地圖，ChatGPT幫我產生大量國家和動物素材
• 挑戰與獎勵：動物碎片蒐集、成語題庫、單字學習，完成任務後還能看到星星動畫
• 視覺化的獎勵商店：勾起孩子兌換獎勵的慾望

3. 習慣養成工具

• 睡前檢查表：建立晚間儀式感，協助培養親子互動關係
• 每週報告：以週為單位統計報告，可透過 Resend 寄送統計報表
• 每週成就抽獎：周末限定，有趣的抽獎輪盤和隨機的驚喜獎項

4. 跨平台發佈

• PWA 完全支援跨平台使用
• AI 教我把 PWA 包裝成 TWA 上架 Google Play (時間和需求考量，目前卡在封閉測試暫停推進)

上班族開發者的收穫

• 零碎時間變高效：
  以前常覺得一兩個小時做不了什麼，但有了 AI 協助後，這段時間往往就能完成一個小功能，累積起來效果很驚人。
• 從「學技術」到「做產品」：專注於使用體驗，而非技術實現
  不再是先苦讀技術文件，而是帶著需求直接動手。雖然技術理解不深，但能更專注在 「怎麼讓產品好用」，而不是被實作卡住。
• 成就感翻倍：孩子真的使用，並期待遊戲化的獎勵
  當孩子真的在用這個平台，並期待遊戲化的獎勵時，會覺得這些下班後的努力真的有價值。

Vibe Coding：邊聊邊做的開發方式

我完全使用「Vibe Coding」開發整個專案。
簡單來說，就是邊和 AI 聊天，邊把想法慢慢變成真的產品。

不像以前，我們需要先寫一堆設計文件 (包含 UI/UX)，或研究技術細節才能開始。
現在我只要丟一句話給 AI，就能看到初步結果。

例如：
「我想要一個可愛的泡泡任務」
「能不能加個語音提示？」
適時附上一些圖案參考，AI 就會馬上給我一個版本，然後我負責審核和提出問題、再丟回去修改。

有時候它給的方案太複雜，可能就修正提示詞，直接請他重來；
很多時候 AI 給出的結果超出我的預期，讓我覺得提示詞不用太死板，適當給 AI 一點發揮空間，反而會有意想不到的好效果。

這種感覺很像跟一個永遠不嫌麻煩的夥伴一起腦力激盪，
不只是幫我寫程式，還能幫我過濾掉很多錯誤選項，讓我更快找到適合的解法。

在這個過程中「學習」和「創造」是同時進行的。我學到的不是每行程式碼的底層原理，而是「什麼時候該用什麼方案」，以及如何快速把想法落地。

Vibe Coding 讓產品開發變得更親近、隨時都能開始嘗試，不必等到技術完全熟練才動手。而推進開發順利前進的關鍵，則在於持續的驗證與審核，以及對於專案全局的掌握度。

我的小小體會

這次的嘗試，讓我有一個感想：

AI 不一定會取代工程師，但它確實正在改變我們的學習方式和開發模式。

我能完成這個平台，並不是因為自己突然精通了網頁技術，
而是因為有了 AI 的協助，讓我能在「邊學邊做」的過程中逐步跨過門檻，
雖然過程中沒有深入掌握太多技術細節，但至少對於 在什麼情境下該採用哪種方案，開始有了一些概念。

當然，目前 AI 還無法獨立完成一個複雜的大型產品，
在架構設計、需求決策與細節把關上，仍然需要工程師的判斷與協作。
AI 更像是一個隨時待命的夥伴，能加快我們的嘗試與學習，但方向仍需要有經驗的開發者來掌舵，並持續驗證結果。

最後附上我的平台連結： 👉 https://taskyventure.com

如果你對我的開發過程感興趣，前面的文章章節有更多我在學習與實作中踩過的坑、嘗試過的解法。也許能給你一些靈感。