Part 3 — Vibe Coding · Part 1
Vibe Coding：用 AI 客製你的平台
不寫一行 code，把你的 Realms 平台調成專屬品牌的外觀與功能。從本地開發環境到發布流程，一次搞懂。
這篇在幹嘛
這一章我要帶你做的事，叫做 Vibe Coding。
講白了，就是你不用自己寫 code——你把事情丟給 AI 工程師，他幫你改。你只要負責當一個會提需求、會給範例的「老闆」，剩下的交給 AI。
在這個流程裡，你會用到：
- AI 編輯器（像 Antigravity、Cursor、Claude Code、Codex 這類工具），扮演你的 AI 工程師
- Google Stitch，扮演你的 AI 設計師
- Zeabur，負責把你改完的版本推上線
00:00 我先講一個重要前提：這一章分享的 Vibe Coding 工作流，它們不屬於課程平台本身。我賣的是一整套完整程式碼，所以我順便告訴你，怎麼用 AI 把這套程式碼改成別人難以複製、專屬你自己品牌的樣子。
概念：把 AI 工程師當聰明的實習生
00:04 Vibe Coding 的核心，就是完全依賴 AI 工程師。
你要記住一件事——AI 工程師非常強大、非常聰明。把他當人，把他當一個聰明的實習生去使喚就對了。
02:19 他手上握有你網站的全部權限：
- 他知道你的資料庫，可以控制資料庫的所有資料
- 他可以控制你的程式碼、所有功能
- 基本上整個站他都能掌握
01:50 所以——你只要講得出來，他基本上都能實現。這句話我要講兩次，因為很多人會自我設限，覺得「這個會不會太難？」不會，講出來就對了。
實戰小技巧：不要把 AI 當黑盒子，也不要把他當全知全能的神。把他當一個有耐心、有能力、但需要清楚指示的實習生。
技巧一：每個新想法，開一個新對話
00:09 第一個習慣你一定要養成：每次有新的想法、新的設計，就開一個新的對話。
不要把十件事塞在同一個對話裡，那會讓 AI 上下文混亂，最後什麼都做不好。
01:05 另一個小訣竅——你可以一次開好幾個對話，讓 AI 同時處理多個任務。比如一個對話改首頁、一個對話改結帳頁、一個對話優化 email 模板，他會並行跑。
技巧二：給 AI 看參考，不要讓他通靈
00:41 如果你只丟一句「幫我重新設計首頁」，AI 只能通靈，做出來的東西成效通常不好。
正確做法是——給範例。
00:17 具體操作：
- 看到哪個頁面醜，直接截圖丟給 AI
- 跟他說：「幫我重新設計整個首頁，我要做的是 XXX 類型的課程」
- 再補一句：「請參考 [你喜歡的網站網址]」
00:49 比如我自己很喜歡 Anthropic 的首頁，我就會直接把 anthropic.com 的網址丟給 AI，跟他說「參考這個的風格」。
01:02 記住——AI 工程師真的能「看到」你丟給他的東西。截圖、網址、圖片，他都讀得到。你就把他當一個有眼睛的人，不用客氣。
實戰小技巧：一次給 2–3 個好範例，比給一句抽象描述有用十倍。
技巧三：用 Google Stitch 當你的 AI 設計師
01:30 第二個工具我強烈推薦——Google Stitch。
它和 Codex 這類 AI 工程師不一樣，Stitch 是 AI 設計師。專注在視覺設計，能幫你產出好看的頁面。
Stitch 操作流程
01:36 進到 Stitch 後：
- 直接跟他講：「幫我做一個身心靈課程的線上課程首頁」
- 把你參考的圖片丟進去
- 把你參考的網站網址貼進去
- 按送出
02:12 Stitch 產出設計後，你可以：
- 雙擊文字直接手動改
- 在下方對話框跟設計師聊天、要求調整
04:10 你會怎麼跟真人設計師溝通，你就怎麼跟 Stitch 溝通。你是老闆，不斷給 feedback、不斷強化，直到調成你要的樣子。
技巧四：把 Stitch 的設計交給 AI 工程師接手
04:22 設計滿意後，這一步是整個流程的關鍵銜接：
- 右上角點擊「匯出」
- 選擇要匯出的頁面
- 選 ZIP 格式
- 把壓縮檔下載下來
- 移到桌面，解壓縮
04:54 然後打開你的 AI 編輯器（Antigravity / Cursor / Claude Code / Codex 都可以），對 AI 工程師說：
我做了一個簡單的設計，我把它放在桌面的 Stitch 資料夾中，你可以直接讀取並應用到我們網站中的設計跟首頁。
05:08 AI 工程師真的會自己去讀那個資料夾，然後把設計應用到你的專案裡。就是這麼直白，把他當人用。
避坑提醒：一定要移到桌面再解壓縮。放在下載資料夾裡層層巢狀的路徑，AI 找起來容易出錯；桌面路徑最短、最好指認。
發布流程：推上 Zeabur
05:57 改完之後，怎麼讓整個網站正式更新？
一句話搞定：
改完以後幫我推送上 Zeabur。
06:00 正常情況下，AI 工程師會自動幫你處理。但如果你刷新網站發現沒更新，就手動補這句話叫他推。
06:13 大概 10 分鐘左右，整個系統就會正式上線。
實戰小技巧：養成「改完 → 驗收 → 推 Zeabur → 等 10 分鐘 → 開無痕視窗檢查」的節奏，避免被瀏覽器快取騙。
避坑心法總整理
把這幾條貼在你螢幕旁邊：
- 新想法 = 新對話。不要讓同一個對話背太多上下文。
- 同時開多對話處理不同功能，讓 AI 平行工作。
- 永遠給範例——截圖、網址、參考站，愈具體愈好。
- 設計歸 Stitch、實作歸 AI 工程師。不要硬叫工程師從零生設計。
- Stitch 匯出後放桌面。路徑乾淨，AI 不會迷路。
- 忘記推 Zeabur 就沒效果。沒更新時主動叫他推一次。
- 把 AI 當聰明實習生。你是老闆，不是程式員。
結語
以上就是一整套 Vibe Coding 的流程。
你不需要懂 code，你只需要：會描述需求、會挑參考、會驗收結果。剩下的事情——設計讓 Stitch 做，實作讓 AI 工程師做，部署讓 Zeabur 做。
接下來的章節，我們會把這套流程實際套用到 Realms 平台的不同模組上。先把這篇的心法吃下去，後面你會非常順。