我的開發背景與 Vibe Coding 初探
從事桌面應用開發多年的軟體工程師,對網頁技術一直不太熟悉。直到最近一年,開始接觸多款 AI 開發工具,像是 Cursor、GitHub Copilot、Windsurf 等,透過 Vibe Coding 開發兒童任務管理平台的經驗分享。
這是平台開發者參加 2025 iThome 鐵人賽的完整系列,分享以 Vibe Coding 開發 TaskyVenture,與 AI 協作開發的實戰經驗。
從事桌面應用開發多年的軟體工程師,對網頁技術一直不太熟悉。直到最近一年,開始接觸多款 AI 開發工具,像是 Cursor、GitHub Copilot、Windsurf 等,透過 Vibe Coding 開發兒童任務管理平台的經驗分享。
在上篇文章中,簡單介紹了背景和兒童任務管理平台的開發契機,以及透過 Vibe Coding 的方式開發整個專案。今天,聚焦在這段開發旅程中陪伴的 AI 協作夥伴,分享開發過程中的分工、觀察與反思。
選定平台主題之後,並沒有立刻投入開發,而是花了幾天時間與 AI 深入討論,釐清開發前的各項技術細節。這段「準備期」對專案方向的確立極為關鍵,也讓完全沒有網頁開發經驗的開發者能順利進行技術決策。
做好事前準備後,開始著手產出第一版應用,並請 AI 夥伴協助進行開發。原本以為這只是把整理好的需求交給 AI 處理,讓它產出一個初步版本,實際操作後才發現,這個過程比想像中更有趣且具挑戰性。
作為一位完全沒有網頁開發經驗的桌面應用工程師,在這次 PWA 平台的開發中,嘗試讓 AI 擔任主力設計師的角色。與其一開始就投入所有頁面的開發,選擇先聚焦在核心功能的設計風格與 UI 細節溝通。
「讓孩子的每一天,都像一場冒險」- 在上一篇文章中,分享了如何與 AI 有效溝通,來協助釐清設計風格與 UI 細節。這篇文章將更聚焦於近期打造的 PWA 兒童任務管理平台,如何用 AI 設計 Logo 與命名的實作與思考。
在開發一個具備「使用者登入」與「個別資料紀錄」的應用時,傳統作法通常需要自行設計登入系統、處理使用者驗證、建立資料庫結構,甚至還要配置檔案儲存空間與伺服器。透過 AI 協助用 Firebase 打造兒童任務管理平台的經驗分享。
在上一篇文章中,分享了如何在毫無 Firebase 經驗的情況下,透過 AI 的協助完成了平台的基礎建設,包括身分驗證與資料庫存儲。這些功能雖然已經足夠支撐基本運作,但要打造一個真正適合兒童使用的任務管理平台,還需要更多設計考量。
在前兩篇文章中,已經介紹了如何透過 Firebase 提供的服務,建立並配置好運作環境,讓專案可以開始使用 Firestore 來實作資料存取功能。接下來要分享透過 Vibe Coding 方式,讓行程管理功能輕鬆落地的過程。
上一篇文章中,分享了兒童任務管理平台的雛形,已經能夠順利新增任務與列出任務清單。雖然功能已經達到基本需求,但真正的目標,是打造一個讓小孩願意主動使用的平台。透過 AI 助攻,設計讓孩子主動完成作業的關鍵功能。
在完成了平台的基礎核心功能後,很快發現一個問題:基礎功能雖然齊備,但畫面和體驗對小孩來說依然有些單調。身為一個以「兒童任務管理」為核心的專案,當然希望能讓孩子在使用過程中感受到樂趣,而不只是完成任務而已。
在上一篇文章中,已經成功用 amCharts5 建立了一個互動世界地圖,讓孩子們能在地圖上看到不同國家的位置與形狀。接下來的挑戰,就是把這張「全球地圖」變成一個真正有趣的「冒險地圖」,讓孩子在完成任務的過程中體驗探索的樂趣。
在完成冒險地圖功能並部署上線後,立刻讓自己的孩子開始試用平台。雖然原本設計了完成任務可以蒐集拼圖碎片、解鎖動物的機制,孩子確實很喜歡,但總覺得還有改進空間。透過 AI 驅動的漸進式挑戰,讓孩子愛上成語學習。
在目前的設計中,孩子已經能透過兩大核心功能探索學習的樂趣:成語挑戰讓他們在闖關中累積語文能力,動物冒險地圖將每一次的學習進度化為一段旅程。設計成就抽獎系統,讓孩子在期待中培養堅持的力量。
在前幾天的紀錄中,分享了目前開發的兒童任務管理平台,已經具備了基本任務管理、獎勵系統,還有冒險地圖與成就抽獎等趣味功能。這些設計的初衷,是希望孩子能在完成日常任務的過程中感受到成就感與樂趣。和 AI 一起打造睡前檢查表,建立孩子安心入睡的溫馨儀式。
在完成兒童任務管理平台的核心功能後,又在 AI 的協作下,快速打造了「每週報告」:彙整任務完成率、活動紀錄與獎勵兌換等等。接著,想到的一個適合的常見功能是「回饋系統」。AI 幫我打造信件報告與回饋系統,從 Gmail、SendGrid 到 Resend 的選擇過程。
因為這個平台希望能透過輕度遊戲化的方式幫助引導孩子完成每天的任務,例如收拾書包、刷牙、整理房間,讓「例行公事」變得更有趣、更具成就感。同時,因為家長是陪伴孩子的重要角色,平台也需要提供家長相關的功能支援。AI 幫我從網頁到 App,重塑兒童任務管理平台體驗。
到目前為止,平台的功能其實已經算是完整,自己的孩子也都能獨立操作使用;也有邀請過幾位家長試用,得到了一些正面的回饋。對我來說,這已經算是一個重要的里程碑。但想讓平台更完整,需要一個專業的入口網站。
當網站正式上線的那一刻,還蠻開心的,因為整個平台終於有了完整的樣子。但冷靜下來之後又想,現在的網站其實有點空洞,整個網站看起來也要有「內容感」才行。畢竟使用者進到網站,除了註冊使用平台之外,也會想了解更多相關資訊。
從開發初期到現在,兒童任務管理平台一直以 PWA(Progressive Web App)的形式存在。PWA 的好處很明顯:只要一個網址,就能在大多數裝置上運行,不需要透過應用商店下載安裝。但隨著平台功能越來越完整,開始思考是否該進一步將它包裝成真正的「App」。
在上一篇文章中,透過 AI 的協助,把一個原本只是網頁型態的 PWA(Progressive Web App)包裝成 Android App,並利用 TWA(Trusted Web Activity)技術成功上架到 Google Play。延續上集,深入探討 TWA 上架過程中遇到的挑戰與解決方案。
把腦中想像的育兒工具慢慢做成能用的平台,這一路上 AI 幫了很多忙。到目前為止,平台已經有任務管理、每週報告、成就系統以及其他更多核心功能,小孩能自己操作,家長也能透過報告了解孩子的學習狀況。AI 幫我設計「免費升級方案 + 贊助金流」的運作實驗。
在產品開發的世界裡,上線並不是結束,而是新的起點。一個系統能否長久被使用,不僅取決於功能是否完整,還取決於它的維護性、彈性,以及回應使用者需求的速度。這些因素,往往比初期的功能設計更加重要。任務管理再升級,AI 協助下的月曆、週期與匯入功能。
在上一篇文章裡,分享了透過 AI 來改善使用者對任務管理功能的回饋意見,進而推動平台功能與 UI 細節持續優化的過程。這篇文章,則要延續這個主題,分享更多實際的回饋驅動進化案例。回饋驅動的進化:小細節、大體驗 — AI 協助下的 UI 優化之路。
在這段收集使用者回饋的時間裡,除了平台使用上的一些小問題之外,孩子的媽也提出了一個新的需求:能不能在平台裡加入單字學習的功能?確實,既然孩子每天都會透過任務管理平台來完成各種學習任務,如果能在平台內直接提供學習資源,會更加便利。
雖然平台中的任務管理功能已經算是完整,也經過多次調整,但仍有用戶回饋:「能不能提供一些任務建議?因為不知道要新增什麼。」任務管理是整個平台最核心的功能,如果新手用戶在這個環節卡住,就很難體驗到平台的價值。快速上手任務管理,AI 幫忙設計的任務模板。
這段時間因為投入 iThome 鐵人賽文章的撰寫,平台的更新暫時停了下來。為了避免思路斷掉,決定在網站上增加一個「開發日誌」頁面,專門記錄平台的開發過程與背後的思考。正好最近有機會體驗 Kiro 這個 AI 開發工具,就用它來實作這個功能。
關於平台的開發經驗,分享到此暫告一段落。接下來,將主要分享平台未來的發展思考,以及這段時間與 AI 協作的開發心得與總結。這個平台的目標,是希望能幫助孩子把日常任務變得更有趣、更有動力去完成。下一步發想:AI 與八角框架,為孩子設計一個更有動力的任務世界。
如果你問過去的我:「要不要用網頁技術做一個完整的應用?」我大概會搖頭,因為我本身是一名長期專注於桌面應用程式開發的上班族工程師。對於 React、Firebase、PWA 這些技術,我幾乎是零基礎。但透過 VIBE CODING 與 AI 的協作,成功打造了 PWA 兒童任務管理平台。
這篇鐵人賽最後一篇文章想聊聊這段時間在 Vibe Coding 的一些體驗與心得,也順便分享對 AI 時代下,作為軟體工程師該如何看待自身能力和未來角色的一些隨想。Vibe Coding 的一些經驗與心得,以及對軟體工程師未來的一些隨想。
Vibe Coding:一種結合直覺、創意與技術的開發方法論
分享與 AI 協作開發的實際經驗,包括工具使用、分工策略與反思
從 TaskyVenture 開發過程中萃取的真實案例與心得分享
歡迎到 iThome 給我們按讚、留言,或是分享給更多對 AI 協作開發有興趣的朋友!