iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
生成式 AI

VIBE CODING 全紀錄:0 經驗用 AI 打造 PWA 兒童任務管理平台》 系列

我是一位桌面應用軟體工程師,對網頁開發幾乎毫無經驗。
因為看見 AI Coding 的快速發展,我決定投入嘗試,運用近期備受關注的 Vibe Coding ,打造屬於自己的個人專案。

從題目發想、技術選型、UI 設計、實際開發,到上架與優化,
我全程與 AI 協作,透過對話推動專案進行,讓 AI 成為真正的開發夥伴。
這不只是「請 AI 寫幾段程式碼」而已,而是一場完整的產品開發體驗!

本系列將完整記錄這段過程,分享我如何在沒有網頁開發經驗的情況下,
一步步透過 AI 打造出一個完整的平台(https://taskyventure.com/),並成功讓它上線。

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 11

(Day 11)從任務清單到動物冒險地圖:AI 輔助下的兒童互動設計(上集)

在完成了我平台的基礎核心功能後,我很快發現一個問題: 基礎功能雖然齊備,但畫面和體驗對小孩來說依然有些單調。 身為一個以「兒童任務管理」為核心的專案,我當然希望...

DAY 12

(Day 12)從任務清單到動物冒險地圖:AI 輔助下的兒童互動設計(下集)

在上一篇文章中,我已經成功用 amCharts5 建立了一個互動世界地圖,讓孩子們能在地圖上看到不同國家的位置與形狀。接下來的挑戰,就是把這張「全球地圖」變成一...

DAY 13

(Day 13)讓孩子愛上成語學習:AI 驅動的漸進式挑戰

在完成 冒險地圖功能 並部署上線後,我立刻讓自己的孩子開始試用平台。 雖然原本設計了 完成任務可以蒐集拼圖碎片、解鎖動物 的機制,孩子確實很喜歡,但我總覺得還有...

DAY 14

(Day 14)成就抽獎系統:讓孩子在期待中培養堅持的力量

在目前的設計中,孩子已經能透過兩大核心功能探索學習的樂趣: 成語挑戰:讓他們在闖關中累積語文能力 動物冒險地圖:將每一次的學習進度化為一段旅程,孩子能一步...

DAY 15

(Day 15)和 AI 一起打造睡前檢查表:建立孩子安心入睡的溫馨儀式

在前幾天的紀錄中,我分享了目前開發的兒童任務管理平台,已經具備了 基本任務管理、獎勵系統,還有 冒險地圖 與 成就抽獎 等趣味功能。這些設計的初衷,是希望孩子能...

DAY 16

(Day 16)AI 幫我打造信件報告與回饋系統:從 Gmail、SendGrid 到 Resend 的選擇

在完成兒童任務管理平台的核心功能後,我又在 AI 的協作下,快速打造了「每週報告」:彙整任務完成率、活動紀錄與獎勵兌換等等;接著,我又想到的一個適合的常見功能&...

DAY 17

(Day 17)從網頁到 App:AI 幫我重塑兒童任務管理平台體驗

因為這個平台希望能透過輕度遊戲化的方式幫助引導孩子完成每天的任務,例如收拾書包、刷牙、整理房間,讓「例行公事」變得更有趣、更具成就感。同時,因為家長是陪伴孩子的...

DAY 18

(Day 18)讓平台更完整:AI 打造專業入口網站(上集)

到目前為止,平台的功能其實已經算是完整,我自己的孩子也都能獨立操作使用;也有邀請過幾位家長試用,得到了一些正面的回饋。對我來說,這已經算是一個重要的里程碑。 但...

DAY 19

(Day 19)讓平台更完整:AI 打造專業入口網站 (下集)

當網站正式上線的那一刻,我還蠻開心的,因為整個平台終於有了完整的樣子。但冷靜下來之後我又想,現在的網站其實有點空洞,整個網站看起來也要有「內容感」才行。畢竟使用...

DAY 20

(Day 20)AI 幫我上架 Google Play:從 PWA 到 TWA 的實驗(上集)

從開發初期到現在,我的兒童任務管理平台一直以 PWA(Progressive Web App) 的形式存在。 PWA 的好處很明顯:只要一個網址,就能在大多數裝...