iT邦幫忙

2026 iThome 鐵人賽

DAY 30
0
Vibe Coding

從 Prompt 到成品:30 天 Vibe Coding 入門與實作系列 第 30 篇

Day 30|完賽!從 Prompt 到成品的 30 天 Vibe Coding 之旅

  • 分享至 

  • xImage
  •  

終於來到第 30 天了!

從第一天決定以「從 Prompt 到成品:30 天 Vibe Coding 入門與實作」作為這次鐵人賽的主題,到今天正式完賽,不知不覺也寫了整整一個月。

回頭看看 Day 1,當時其實只是想弄清楚一件事:

現在的 AI,到底能幫我們把程式開發做到什麼程度?

以前使用 ChatGPT 時,大多是遇到不會寫的程式,就把問題貼上去請它幫忙。拿到答案之後,還是得自己複製程式碼、修改檔案,再執行看看有沒有問題。

但這 30 天下來,才發現現在的 AI Coding 工具已經不只是單純回答問題,而是開始能夠參與整個開發流程。

回頭看看這 30 天做了什麼

這次的系列大致可以分成幾個階段:

天數 主題 學習內容
Day 1~4 Vibe Coding 基礎 認識 Vibe Coding、傳統開發方式與 LLM
Day 5~8 Prompt 與 Context 描述需求、逐步修改、提供專案資訊
Day 9~13 AI Coding 工具 Cursor、Claude Code、Gemini CLI
Day 14~16 Coding Agent Agent 概念、實際操作、Rules
Day 17~20 AI 輔助開發 Debug、Code Review、README、Git
Day 21~22 MCP 認識 MCP 並嘗試連接外部工具
Day 23~28 小專案實作 從需求開始完成網站收藏管理器
Day 29~30 回顧與總結 整理使用心得與學習成果

一開始的內容比較偏向觀念介紹,像是 Prompt 到底要怎麼寫、Context 為什麼重要,以及 Vibe Coding 跟傳統寫程式有什麼不同。

接著開始接觸各種 AI Coding 工具,從圖形介面的 Cursor,到使用 Terminal 操作的 Claude Code 和 Gemini CLI。

雖然工具不同,但核心概念其實很接近:把需求描述清楚,讓 AI 協助完成開發工作。

而 Coding Agent、Rules 和 MCP,則讓我們進一步理解 AI 是怎麼從「回答問題」慢慢變成「執行任務」。

從一句話開始的小專案

如果要選這次系列裡最有代表性的一段,我覺得還是最後六天的 BookmarkManager。

Day 23 的時候,我們只有一個很簡單的想法:

我想做一個可以收藏常用網站的網頁。

沒有事先設計完整畫面,也沒有準備一大份需求文件。

而是先讓 AI 幫忙整理需要哪些功能,再一步一步把想法變成實際的程式。

整個過程大概是這樣:

Day 23|整理需求
    ↓
Day 24|產生第一版 UI
    ↓
Day 25|新增、刪除、搜尋功能
    ↓
Day 26|LocalStorage 保存資料
    ↓
Day 27|Debug 修復問題
    ↓
Day 28|Code Review 與重構
    ↓
BookmarkManager 完成!

最後做出來的東西其實很單純,就是一個可以新增、分類、搜尋和刪除網站收藏的小工具。

沒有會員系統、沒有後端,也沒有使用什麼特別複雜的技術。

但對這次的系列來說,我覺得這樣反而剛剛好。

因為我們真正想展示的不是「AI 能做出多厲害的網站」,而是一個原本只有模糊想法的專案,怎麼透過 Prompt 和 AI Agent 慢慢完成。

而且在這個過程中,也實際用到了前面介紹的 Context、Debug、Code Review 等技巧。

至少這次不是學完一堆名詞之後,就再也沒有用到它們。

這 30 天最大的收穫

如果要說這次學到了什麼,我覺得最重要的反而不是某一個工具怎麼操作。

畢竟 AI 工具更新得很快,今天介紹的介面或功能,可能過一段時間又會變得不一樣。

但有幾件事情應該不太會變。

首先是需求要講清楚。

AI 再厲害,也不代表它能直接知道我們腦袋裡想的是什麼。與其給一句很模糊的 Prompt,然後期待它一次做對,不如先把目標和限制整理好。

其次是不用期待一次就完成。

這次的收藏管理器就是從畫面開始,再慢慢加入功能、修正問題。當 AI 做出來的東西不符合預期時,也可以繼續透過對話調整。

最後則是不要忘記檢查結果。

AI 能幫忙寫 Code,也能幫忙 Debug,但不代表它給出的每個答案都正確。

程式能不能正常使用、修改有沒有影響其他功能,這些事情還是需要自己確認。

這也是為什麼這次沒有把 Vibe Coding 當成「完全不用懂程式就能做出任何東西」的魔法。

它確實讓開發變得更容易開始,但要把作品做好,仍然需要理解需求、判斷結果,以及處理可能發生的問題。

最後

說起來,當初選擇 Vibe Coding 當主題,就是因為 AI Coding 這個領域變化很快,也想趁這次機會把相關概念整理得更完整一點。

沒想到從最基本的 Prompt,一路寫到 Coding Agent、MCP,最後還真的安排了一個小專案把前面的內容串起來。

雖然這 30 天沒有研究什麼特別深入的技術,也沒有做出規模很大的作品,但至少讓我對 Vibe Coding 的開發方式有了更完整的認識。

如果未來又有什麼新的 AI Coding 工具出現,我想也不用急著追求每一個都學會。

比起工具本身,更重要的應該是知道自己想完成什麼,以及怎麼讓 AI 成為開發過程中的助力。

最後,就用這次系列的名稱替這 30 天畫下句點:

「從 Prompt 到成品」不只是讓 AI 把程式寫出來,而是從一個想法開始,透過不斷溝通、修改與驗證,慢慢把它變成真正能使用的作品。

那麼,這次的 30 天 Vibe Coding 入門與實作,就正式完賽啦!

感謝看到這裡的大家,我們下次有機會再見!


上一篇
Day 29|用了 28 天後,Vibe Coding 到底好不好用?
系列文
從 Prompt 到成品:30 天 Vibe Coding 入門與實作 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言