Vibe Coding 從新手到成品

Vibe Coding 從新手到成品

主辦: 五倍學院

學會讓 AI 幫你寫出「能運作的程式」的流程,從零開始,完成一個前、後端完整專案

活動時間
03/22 10:00 - 03/29 17:00
實體活動地點
實體:五倍學院 · 台北市中正區衡陽路七號五樓
線上活動
線上同步直播
收藏數
11 人收藏

課程內容

提醒:
1. 實體課程跟線上直播課程的內容是一樣的
2. 如果需要報帳的話,在結帳的最後一步可填寫公司抬頭及統編

想要有人在現場幫忙排除問題,選實體課程;想省通勤時間或是不在同一個城市,選線上直播課程。課程預計有以下三個場次,可以依照自己需求與時間安排,在右側報名欄位選擇合適的課程:

  • 實體課程:3/29(日)4/12(日)五倍學院教室現場授課(每班 30 人)

  • 線上直播:3/22(日)使用 Zoom 線上直播教學,連結會於課前寄到報名信箱

上課時間都是 10:00 ~ 12:30 以及 13:30 ~ 17:00 共計 6 小時(視情況可能會超時)。


Vibe Coding 很美好,但是...?

網路上跟 AI 一起寫程式的影片你可能看了不少,有些人用一句話就生出一個網站,也有人十分鐘做出一個 App,畫面很炫,看完之後你也想:「是不是我也可以?」。所以跟風訂閱了 ChatGPT、Claude,輸入了一段需求,AI 回了你一大段程式碼。過沒多久,網站做好了,好像真的不會寫程式可以做出東西來耶!

接下來呢?

我們想請 AI 改一個按鈕的顏色,結果 AI 可以改到別顆按鈕了;好不容易 AI 改好了,但另一個功能卻被改壞了...或是想加上會員註冊功能,過沒多久 AI 跟你說「好的,已經完成了」,但一般人可能不知道怎麼確認它到底有沒有做對或有沒有做完。花了幾個小時,最後可能得到一個看起來不錯看但不一定能運作的半成品,更不用講後續可能會遇到的資安問題了。

這不是 AI 的問題也不是你的錯,AI 可能會亂講話沒錯,但真正的問題是沒清楚告訴它「要做什麼」還有「做到什麼程度才算完成」,再加上沒有技術底子出問題可能也不知道怎麼解決,這就是現在大家在說的 Vibe Coding 最大的問題。憑感覺做事,感覺到了就收工。聽起來很酷,但做出來的東西可能也就那樣。

在動手之前,先定義什麼叫做「完成」

市面上教 AI 寫程式的課程不少,大部分在教怎麼寫 prompt。那些技巧可能有用,但只解決了部份的問題。重點是 AI 做出來的東西,你怎麼知道它是對的?

這門 Vibe Coding 課程不是教大家怎麼寫 prompt,只要用一般的對話跟 AI 一小步一小步的許願,就像堆樂高積木一點,最後就能把城堡蓋出來。這整套流程的核心是一個叫做 Spec-Driven Development(SDD)的方法,翻成中文是「規格驅動開發」。名字聽起來很難,但做法其實很簡單,就是在請 AI 動工之前,先把「我要什麼」和「怎樣算做好了」的規格先寫清楚,等我們確認之後就請 AI 動工,等 AI 做完之後我們再根據這些規格來驗收成果。

想想看,我們請師傅來裝修房子,應該不會就只丟一句「幫我弄漂亮一點」吧?通常會先給平面圖、指定建材、確認預算。AI 也是一樣的道理。我們給的指示越模糊,AI 自由發揮的空間就越大,做出來的東西跟想像的可能就差越遠。所以這門課跟只教怎麼寫 prompt 的課程差在哪?學 prompt 是學「怎麼叫 AI 做事」,學 SDD 是學「怎麼驗收 AI 的成果」,過程更像是在學著怎麼當一個 PM(專案經理),學著怎麼定義需求、驗收成果。

課程大綱

課程時長約 6 小時(視情況可能會超時),一邊動手實作、一邊建立觀念。

1. 網站是怎麼運作的?

我假設各位沒有任何程式背景,所以從零開始。我們先搞懂網站應用程式是怎麼變成你看到的網頁或 App 的?這裡不會要大家背什麼程式語法也不是要你當工程師,在大概介紹運作原理之後,後續動手實作的時候會更知道自己在做什麼,不會只是跟著按按鈕。

2. 上手 Claude Code!

這門課主要用的 AI 工具是 Claude Code。它跟你可能用過的 ChatGPT 不太一樣,不是在網頁上聊天,而是在終端機(就是那個黑黑的畫面)裡直接跟 AI 對話,讓它幫你建檔案、寫程式、甚至自己跑去測試。聽到「終端機」先不要緊張,操作方式很單純,就是你打字、它做事。這段會帶大家把 Claude Code 跑起來,熟悉基本操作,後面實作的時候才不會手忙腳亂。

3. Vibe Coding 初體驗

我們會先用 AI 來做一個小功能,體驗一下「用一個 prompt 就把東西做出來」的 Vibe Coding 爽感,然後看看有沒有什麼問題(說不定很完美然後就可以下課了)。也許我們會看到 AI 很有自信地說「完成了」,但其實根本沒完成,或是設計風格亂掉、需求漏掉、改 A 壞 B?這不是要嚇大家,而是讓大家知道問題在哪,後面才會懂為什麼需要不同的做法。

4. 使用者介面設計與調整

當我們跟 AI 說「幫我做一個好看的網站」AI 就會做出東西來,但不一定是你想要的那種好看。每個人的審美觀都不同,而且「好看」這兩個字太模糊了,所以 AI 就照它自己的標準來做,運氣好可能做的不錯,但運氣不好可能就得跟 AI 吵很久。這裡我會借用一些專案在做使用者介面(User Interface, UI)的工具,先做出來一點樣子之後再交給 AI 接手。大家不是要當設計師,而是在跟 AI 許願的時候,能講得出「我要的是什麼」,而不是丟一句「弄好看一點」然後賭運氣。

5. 簡單但夠用的 Git 操作

前面我們看到 AI 改 A 壞 B 的狀況,如果沒有「存檔」,寫到整個亂掉的時候可能只能整個砍掉重練。Git 是工程師在用的存檔工具,它可以幫我們記錄每一次的修改,隨時回到上一個「還沒壞掉」的狀態。我寫過 Git 書,我很清楚 Git 不好學,所以這裡我會用我最近開發的 Git 工具教大家怎麼存檔、怎麼回到上一步、怎麼在 AI 搞砸的時候全身而退。我沒打算把大家變成 Git 專家,但會讓在後面實作的時候有個安全網。

6. SDD 開發流程

這是整堂課的核心。你會學到:

  • 怎麼用白話文寫出「規格」(不是寫程式碼,是寫「我要 AI 做什麼、做到什麼程度」的說明書)

  • 怎麼設定「驗收標準」(就是怎樣才算做好了)

  • 怎麼把一個大需求拆成小任務,讓 AI 一步一步做,而不是丟一大段需求讓它自己發揮

專案實作

我會用 Claude Code 這款 AI 工具,搭配前面學的 SDD 流程,從零開始做出一個完整的專案。使用的技術預計是 JavaScript,預計會做一個線上預約系統,不過這個題目只是暫定,最終會看各位在問卷裡的的回答而決定。重點不在技術或是專案本身,而是你會學到怎麼用 SDD 這套流程來讓 AI 幫你做出一個能運作的東西。

FAQ

Q:實體班跟線上直播班有什麼差別?

內容是一樣的。差別在於實體班可以現場提問、跟旁邊的人討論,遇到問題講師或助教可以直接看你的螢幕幫你解決。線上直播班可以在聊天室提問,講師會即時回應,好處是不用通勤、在家就能參加。

Q:課程有錄影嗎?課後可以重播嗎?

有的。實體課程或直播課程都有錄影,課後會把錄影影片進行簡單的修剪,讓大家可以複習或是補看沒跟上的部分。

Q:學完之後我能做出什麼?

如果沒有意外的話,課堂上我們會完成一個前後端的小專案,不過因為 AI 的不確定性,很有可能大家做出來的樣子都不一樣。課後各位可以用同樣的流程做自己想做的東西,不管是個人網站、小工具、還是工作上需要的簡單系統。SDD 是一套通用的方法,不限定特定類型的專案。

Q:跟其他 Vibe Coding 課程有什麼不同?

差別一,我自己是 Claude Code 的重度課金者,從去年三月起每個月都是訂閱 200 元美金的額度而且很用力的燃燒 Token!

差別二,我已經寫了快三十年的程式,到現在都還幾乎是每天在寫,我的 GitHub 就是最好的證明:

Upload 20260309192251 Fab998f5187d590e

技術方面絕對比其它非技術背景的講師來說有比較正確的判斷力,事實上各位報名的這個系統 ezBundle 也是我跟 AI 一起協同開發出來的。

差別三,課程的核心是 SDD 流程,而且是我自己開發出來的 SDD 工具。其它講師可能是拿網路上的工具來教,我是基於一些設計的不錯的 SDD 框架再開發出適合新手的圖形介面工具,如果對流程或工具有什麼不滿意我都能直接自己再加上去。

Q:完全沒寫過程式,可以上這門課嗎?

應該可以,這課程原本就是為零基礎的人設計的,所以速度會放的比較慢。你不需要會事先學習程式語言,課程會從最基本的概念開始講起。你要做的不是自己寫程式碼,而是學會用比較有系統的方式來指揮 AI 幫你寫,中間會像工程師一樣學著用 Git 來做備份存檔,最後確認 AI 產出的成果。

後續如果想要走的更遠,建議可以在課程結束後再去學一些基礎的程式語言,這樣會更有能力去定義需求和驗收成果。

Q:需要自己帶電腦嗎?

不管是實體班或線上直播班,除非你只想看我表演,不然要跟著實作會需要準備好可以工作的電腦。Windows 或 Mac 都可以,課前會提供環境安裝指南,照著做就好。

Q:上課會用到什麼工具?

  1. 主要使用 Claude Code,需要訂閱費,它是一個可以在終端機(就是那個黑黑的畫面)裡跟 AI 對話、讓 AI 直接幫你寫程式的工具。

  2. 我自己開發的 SDD 工具,免費,幫你把 SDD 的流程圖形化,讓你更容易上手。

  3. 我自己開發的 Git 工具,免費,讓你在 AI 搞砸的時候可以全身而退。

  4. VS Code,免費,這是一款文字編輯器,但如果你看不懂或不想看程式碼的話也可以不安裝,我們就來感受一下 Vibe Coding 不看程式碼是什麼感覺。

課前會提供安裝教學跟下載連結。

Q:使用 Claude Code 需要額外付費嗎?

要的,Claude Code 需要訂閱 Anthropic 的服務才能使用。訂閱方案有 20 / 100 / 200 美金,第一次我建議大家可以訂閱 20 美金就好,先體驗一下這個工具的感覺,看看它適不適合你。20 元的額度應該差不多用一、兩個小時就會用完額度,需等 5 小時後才會重置。

重置階段可以做什麼?

  • 休息一下,或是看我表演就好

  • 如果有訂閱 ChatGPT 的話,可以用 Codex 頂一下。Google 的 Gemini 可能也行只是以寫程式來說效果會比較差一點點。

不用擔心 20 元的訂閱上課不夠用,重點並不是在於每個步驟都要跟到而是學習怎麼拆解任務以及如何轉換成規格,之後如果覺得不錯用,可以再考慮升級到 100 美金,不用一開始就訂閱太高的方案。

Q:課後遇到問題可以問誰?

課程有專屬的 Discord 頻道可以討論,我跟助教都會在上面。另外每週二晚上有默默會的活動,歡迎帶著你的專案一起來現場做,卡住了可以直接問人,很適合課後想繼續練習的人。

如果有其他問題,歡迎到五倍學院的 Discord 頻道 討論或到 Facebook 粉絲頁私訊。

講者與來賓

講師

高見龍
講師

高見龍

五倍學院

負責人

網站程式開發者 / 講師 / 遊戲宅 / 漫畫宅,喜愛非主流的新玩具,著有《為你自己學 Python》、《為你自己學 Git》以及《為你自己學 Ruby on Rails》等暢銷書籍。