Vibe Coding 是什麼？
先看你會做出什麼

1. PHASE 01認識 Vibe Coding 和工具
2. PHASE 02第一次做出東西
3. PHASE 03規劃你的產品
4. PHASE 04做出小店預約
5. PHASE 05上線前要懂的事
6. PHASE 06換成你的點子
7. PHASE 07往商用產品前進

你現在在這裡：第 1 階段的第 01 課，全部 24 課從這裡出發。這一課不用裝任何東西。

Vibe coding 是什麼？

Vibe coding 是用平常說話的方式告訴 AI 你想做什麼，由 AI 寫程式，你負責看結果、說哪裡要改的做法。你不必會寫程式，但要會把需求說清楚、會判斷做出來的東西對不對。這門課就用這個方法，帶沒有程式背景的人做出一個有網頁、App 和管理後台的完整產品雛形。

這個詞從哪裡來

Vibe coding 是 AI 研究者 Andrej Karpathy 在 2025 年 2 月的一則貼文裡提出的：放手讓 AI 寫，專心說你要什麼，連程式碼長什麼樣子都不必管。他當時說，這很適合週末做著玩的小專案。原始貼文 ↗同年 11 月，Collins 英語詞典把 vibe coding 選為 2025 年度詞彙，這個說法從工程師圈傳到了一般人。Collins 公告 ↗

這門課的 vibe coding，多做了一件事

週末做著玩的小專案，壞了就算了；要給客人用的產品不行。所以這門課一樣不要你寫程式，但會教你當驗收的人：每一課都有成果檢查，告訴你做對時長什麼樣、沒做好時長什麼樣；第 05 課起用 VS Code 看 Codex 改了哪些檔案、結構合不合理；第 17 課請 Codex 寫自動測試，改壞東西時馬上知道。

你負責什麼，AI 負責什麼

Codex 是 OpenAI 做的 AI 寫程式工具，這門課在 ChatGPT 桌面 App 裡使用它。為什麼選它、還有哪些工具可以選，第 02、03 課會說明。

先看終點：這門課會做出什麼

整門課用同一個示範產品：一家小店的線上預約系統，我們叫它「小店預約」。做完示範，你會有下面這一整套，而且都在自己的電腦上跑得起來。

1. 1 客人用手機打開預約網頁，選服務項目和時段；額滿的時段看得出來。

2. 2 填姓名、電話、Email 送出，看到預約成功的畫面；填錯會有提示。

3. 3 收到確認信，信裡有取消預約的連結。課程裡的信寄到自己電腦上的測試收信匣，不會寄出真信。

4. 4 店家登入管理後台，看到剛剛那筆預約，可以取消或標記完成。

5. 5 店家自己改服務項目、價格、營業時間和公休日，客人的網頁馬上跟著變。

6. 6 在 iPhone 模擬器裡打開 App，完成同樣的預約。

看不到的地方也做好了：兩個人同時搶同一個時段，只有一個人會成功；專案附有自動測試，改完請 Codex 跑一次，就知道有沒有弄壞原本的功能。

做完示範之後，第 20–22 課用同樣的順序，把你自己的點子做出來。

兩種完成：網頁路線與完整 MVP

MVP 是「最小可用產品」：功能不多，但真的能用、能拿給人試。這門課有兩種完成方式：

第 13、15、16 課可以先跳過，之後再回來補。跳過第 13 課的人，產品就少了防重複預約；第 17 課的自動測試會提醒你，之後回來補做就好。

上課前：你的電腦跑不跑得動

電腦

Apple 晶片（M1 以後）的 Mac。ChatGPT 桌面 App 的 Mac 版只提供 Apple 晶片版本官方下載頁 ↗，第 15–16 課要用的 Xcode 也需要 M1 以後的 Mac。App Store ↗

系統

更新到最新版 macOS。Xcode 27 需要 macOS 26.6 以上Apple 系統需求 ↗；開發環境用的 Docker Desktop 支援最新和前兩個大版本的 macOS。Docker 官方說明 ↗

空間

建議先清出 40 GB 以上。Xcode 在 App Store 標示的下載大小是 3.1 GB，裝好後再加上 iPhone 模擬器和 Docker 要下載的服務，會用掉更多空間。走網頁路線不必裝 Xcode，需要的空間少很多。

時間與網路

第 07 課準備開發環境、第 15 課準備 App 環境時，要下載好幾 GB 的檔案。挑網路穩定、可以慢慢等的時段做。

帳號

一個 ChatGPT 帳號。Codex 要搭配哪一種方案，第 02 課說明。

用 Windows 電腦也可以上：ChatGPT 桌面 App 有 Windows 版官方說明 ↗，第 15–16 課以外的內容都做得完，走網頁路線畢業。第 15–16 課的 iPhone 模擬器只能在 Mac 上執行Flutter 官方說明 ↗；App 用的 Flutter 也能在 Android 模擬器上跑，這門課不另外教。

這幾步要你自己按

這一課還不用開 Codex。下面三步是檢查你的 Mac，只有你自己能做。

步驟 1看你的 Mac 是哪一種晶片

1. 點螢幕左上角的蘋果選單，選「關於這台 Mac」。
2. 看「晶片」那一行。

做完應看到：「晶片」寫著 Apple M1、M2、M3 這類以 Apple M 開頭的名稱。

如果看到的是「處理器」和 Intel：這台是 Intel 晶片的 Mac，請看下方「卡住時怎麼辦」。

步驟 2看還剩多少空間

1. 蘋果選單 →「系統設定」→「一般」→「儲存空間」。
2. 看這台 Mac 還有多少可用空間。

做完應看到：可用空間在 40 GB 以上；走網頁路線可以少一些。

如果不夠：先把用不到的大檔案、舊的 App 移掉；「儲存空間」頁面會依類別列出哪些東西最佔空間。

步驟 3把 macOS 更新到最新版

1. 蘋果選單 →「系統設定」→「一般」→「軟體更新」。
2. 有更新就按下更新，等它下載、安裝、重新開機。

做完應看到：「軟體更新」顯示這台 Mac 已經是最新版本。

如果更新不上去：更新要下載好幾 GB，會花一段時間，更新時電腦要接著電源。如果沒有更新可裝、系統卻不是最新版，代表這台 Mac 太舊，請看下方「卡住時怎麼辦」。

Windows：「設定」→「系統」→「儲存空間」看可用空間；「設定」→「Windows Update」更新系統。

成果檢查

• 我能用自己的話說出 vibe coding 是什麼、我負責哪一段、Codex 負責哪一段。
• 我知道這門課最後會做出什麼，也知道網頁路線和完整 MVP 差在哪。
• 我的 Mac 是 Apple 晶片、macOS 已經更新、空間夠；或者我決定用 Windows 電腦走網頁路線。

三項都打勾，就可以進下一課。第三項過不了，先看下面的「卡住時怎麼辦」。

卡住時怎麼辦

我的 Mac 是 Intel 晶片

ChatGPT 桌面 App 的 Mac 版只提供 Apple 晶片版本，這門課沒辦法在這台 Mac 上照著做。手邊有 Windows 電腦的話，可以改用它走網頁路線。

系統更新不到最新版

更新不到 macOS 26.6，就裝不了 Xcode 27，第 15–16 課的 App 沒辦法做；只要系統還在最新三個大版本之內，網頁路線可以照常上。再更舊的系統，Docker Desktop 不支援，網頁路線也跑不起來。

空間不夠

先走網頁路線。不裝 Xcode 可以省下大部分空間，之後要做 App 時再清出空間。

看不懂某個名詞

先跳過沒關係。這門課每個技術名詞第一次出現時，都會先用生活比喻說明，後面的課會一個一個補齊。

練習：寫下你想做的點子

常見問題