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 1

(Day 1) 我的開發背景與 Vibe Coding 初探

我是從事桌面應用開發多年的軟體工程師,對網頁技術一直不太熟悉。直到最近一年,我開始接觸多款 AI 開發工具,像是 Cursor、GitHub Copilot、W...

DAY 2

(Day 2)我的 AI 協作夥伴:開發過程中的分工、觀察與反思

在上篇文章中,我簡單介紹了我的背景和這個兒童任務管理平台的開發契機,以及我如何透過 Vibe Coding 的方式開發整個專案。今天,我想聚焦在這段開發旅程中陪...

DAY 3

(Day 3) 我如何選定開發技術:AI 協助下的技術決策

選定平台主題之後,我並沒有立刻投入開發,而是花了幾天時間與 AI 深入討論,釐清開發前的各項技術細節。這段「準備期」對專案方向的確立極為關鍵,也讓我這個完全沒有...

DAY 4

(Day 4)好的開始是成功的一半:AI 助我走出第一步

做好事前準備後,我開始著手產出第一版應用,並請 AI 夥伴協助進行開發。原本以為這只是把整理好的需求交給 AI 處理,讓它產出一個初步版本,實際操作後才發現,這...

DAY 5

(Day 5)如何與 AI 有效溝通設計風格與 UI 細節

作為一位完全沒有網頁開發經驗的桌面應用工程師,我在這次 PWA 平台的開發中,嘗試讓 AI 擔任主力設計師的角色。與其一開始就投入所有頁面的開發,我選擇先聚焦在...

DAY 6

(Day 6)用 AI 設計 Logo 與命名:實作與思考

讓孩子的每一天,都像一場冒險 在上一篇文章中,我分享了如何與 AI 有效溝通,來協助釐清設計風格與 UI 細節。這篇文章將更聚焦於我近期打造的 PWA 兒童...

DAY 7

(Day 7)AI 助我用 Firebase 打造兒童任務管理平台 (上集)

在開發一個具備 「使用者登入」 與 「個別資料紀錄」 的應用時,傳統作法通常需要自行設計登入系統、處理使用者驗證、建立資料庫結構,甚至還要配置檔案儲存空間與伺服...

DAY 8

(Day 8)AI 助我用 Firebase 打造兒童任務管理平台 (下集)

在上一篇文章中,我分享了自己如何在毫無 Firebase 經驗的情況下,透過 AI 的協助完成了平台的基礎建設,包括 身分驗證 與 資料庫存儲。這些功能雖然已經...

DAY 9

(Day 9)Vibe Coding 真香:行程管理功能輕鬆落地

在前兩篇文章中,我已經介紹了我如何透過 Firebase 提供的服務,建立並配置好運作環境,讓專案可以開始使用 Firestore 來實作資料存取功能。 接下來...

DAY 10

(Day 10)AI助攻:讓孩子主動完成作業的關鍵設計

上一篇文章中,我分享了兒童任務管理平台的雛形,已經能夠順利新增任務與列出任務清單。雖然功能已經達到基本需求,但我真正的目標,是打造一個讓小孩願意主動使用的平台。...