iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Vibe Coding

《我與 AI 的奇幻漂流:30 天,把「能跑」變成「能上線」》 系列

AI 幫你把網站做出來了。然後呢?

「能跑」和「真的能上線」之間,還隔著資料、權限、效能、部署、安全與成本。這 30 天,我會從一個小小的念頭開始,打造一個 Web 產品,把那段常常被跳過的路一步一步走完——包括那件最容易被忽略的事:AI 說完成了之後,你要怎麼確認它真的完成了。

不預設你有完整的工程背景,寫給想用 Vibe Coding 做出真正產品,而不只是 Demo 的人。

參賽天數 22 天 | 共 22 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

【Day 01|漂流啟航】AI 幫你把網站做完之後,然後呢?

引言:「然後呢?」 當生成式 AI 開始走進日常開發,很多人都曾經這樣試過:跟 AI 說一句話 —「幫我做一個可以記帳的網站」、「做一個查詢客戶名單工具」— 然...

2026-09-15 ‧ 由 Leo 分享
DAY 2

【Day 02|清點救生艇】把「AI」拆開來看:它其實不只一個東西

引言 「我用 AI 做了一個網站。」 這句話現在已經很常見了。但如果再往下問一句「你是用什麼 AI?」,答案可能會變成: 「我用 ChatGPT。」 「我覺得...

2026-09-16 ‧ 由 Leo 分享
DAY 3

【Day 03|工作的甲板】App、IDE、CLI… 我到底該在哪裡開發?

引言 昨天我們認識了一些 AI 開發中常見的名詞,也稍微看了幾家模型供應商和它們旗下的產品。 但問題也跟著來了:這麼多 AI 產品,到底哪一種適合拿來開發? 有...

2026-09-17 ‧ 由 Leo 分享
DAY 4

【Day 04|第一頁日誌】一個生活中的小麻煩,怎麼變成一個專案?

引言 昨天,我們把開發環境搭好了。 Cursor 看得到專案,Codex CLI 也可以直接讀取、修改資料夾裡的檔案。換句話說,從今天開始,我們其實已經可以真的...

2026-09-18 ‧ 由 Leo 分享
DAY 5

【Day 05|劃定疆界】AI 要自己做,還是先問我?

引言 昨天,我們把一個生活中的小麻煩慢慢整理成了 idea.md。 現在方向有了,也知道第一版想先做什麼。接下來,AI 就不只是陪我們討論,而是真的會開始碰專案...

2026-09-19 ‧ 由 Leo 分享
DAY 6

【Day 06|認識這片海】網站是怎麼運作的?前端、後端、資料庫是什麼?

工具裝好了,方向也想清楚了,安全繩也繫上了。照理說,已經可以開始動手了。但在那之前,我想先花一天回答一個很基本、卻常常被跳過的問題: 一個網站,到底是由哪些東...

2026-09-20 ‧ 由 Leo 分享
DAY 7

【Day 07|挑選材料】React、Vue、Next.js⋯⋯這些名字到底差在哪?

昨天我們把網站拆成前端、後端、資料庫。今天要進第二幕,從前端開始。講到前端,你可能聽過一大串名字: JavaScript、TypeScript、React、V...

2026-09-21 ‧ 由 Leo 分享
DAY 8

【Day 08|看懂航海圖】「這邊怪怪的」,到底要怎麼說給 AI 聽?

還記得 Day 1 開頭那幾句話嗎? 「這個不太對,你再調整一下」「我要那種比較有質感的」 這種話對你來說很清楚,因為你看著畫面。但對 AI 來說,它不知道...

2026-09-22 ‧ 由 Leo 分享
DAY 9

【Day 09|清點物資】資料模型與 TypeScript 型別:能顯示,不代表資料是對的

昨天我們把畫面上的東西講清楚了。今天要打開畫面背後的東西:資料。 先看 AI 目前寫給我們的版本,點開其中一張專輯的詳情,會發現「發行版本」那一排只是幾個標籤,...

2026-09-23 ‧ 由 Leo 分享
DAY 10

【Day 10|標上座標】動態路由與 404:為什麼我傳出去的網址,只會回到首頁?

昨天重整完資料之後,專輯詳情已經可以點版本、看各自的內容物了。 但如果我們點了aespa 的 Armageddon,展開它的詳情,關掉,再點 New Jeans...

2026-09-24 ‧ 由 Leo 分享