~/vibe-coding $ 為「完全不懂程式的人」設計
看得懂，才學得會。用圖解理解寫程式這件事。
不教語法、不背 API。我們用流程圖、架構圖與生活化比喻，帶你理解網站、SaaS 與 AI 產品背後到底發生什麼事——國中生也能懂。
- 知識主題
- 52+
- 互動圖解
- 113+
- 語言支援
- 4
Build
你想做出什麼？
選一個目標，我們直接給你一條從零到上線的學習路線。
Why
我們為什麼不一樣
市面上的教學在教你「打字」，我們在教你「看懂整個系統」。
圖解優先
每個概念都配架構圖與流程圖，先看懂全貌，再看細節。
白話文優先
用生活化比喻取代術語，把「快取」說成「便利商店」，把「API」說成「點餐櫃台」。
系統思維
我們教你前端、後端、資料庫怎麼串起來，而不是某個框架的某個函式。
AI Coding 導向
教你怎麼跟 Claude Code、Cursor、Codex 合作，把想法變成可上線的產品。
Roadmap
你的學習路線圖
從完全不懂，到能規劃並做出自己的產品——一步一步來。
- 01 /
看懂世界
建立系統直覺：知道網站、App、SaaS 背後大概由哪些零件組成。
- 02 /
學會選擇
面對眾多平台、語言、工具，能依需求與預算做出合理選擇。
- 03 /
與 AI 協作
學會用 AI Coding 工具與標準流程，把規格變成可運作的程式。
- 04 /
做出產品
理解 SaaS 與多租戶架構，把作品部署上線並持續維運。
Gallery
架構圖庫
8 種最常見的系統架構，用一張圖看懂它長什麼樣、適合做什麼。
- 架構圖庫
單頁網站
一份靜態檔案放到 CDN，全球都讀同一份，最快也最便宜。
- 架構圖庫
前後端分離
前端負責畫面，後端透過 API 提供資料，各自獨立部署。
- 架構圖庫
SaaS 應用
可付費訂閱的雲端軟體，含登入、金流、資料儲存與通知。
- 架構圖庫
多租戶 SaaS
多家客戶共用同一套系統，但資料嚴格隔離，互看不到。
- 架構圖庫
Cloudflare 架構
全部跑在 Cloudflare 邊緣：Pages 前端、Workers 後端、D1 資料庫。
- 架構圖庫
Fly.io 架構
把容器化的後端部署到多個地區，資料庫就近讀取。
- 架構圖庫
Serverless 架構
沒有常駐伺服器，請求進來才執行函式，用多少付多少。
- 架構圖庫
Microservice 架構
把大系統拆成多個小服務，各自獨立開發、部署與擴展。
常見問題
關於 Vibe Coding 與本平台，你可能想知道的事。
我完全不會寫程式，也能看懂嗎？
可以。本站不教語法，用圖解與生活化比喻解釋系統如何運作，設定的理解門檻是「國中生能懂」。
Vibe Coding 到底是什麼？
它是一種與 AI 協作的開發方式：你負責描述需求與判斷方向，AI 負責把程式寫出來。重點從「會打字」轉向「會思考系統」。
學這個需要花錢嗎？
本平台內容免費。實作時我們優先示範 $0 起步的方案（如 Cloudflare 免費額度），需要付費時會明確標示。
我該用哪個 AI 工具？
看需求。想要會規劃、能跑長任務、會做安全審查的，Claude Code 很強；想要在編輯器裡邊看邊改，Cursor 最直覺。可看 AI 工具比較頁。
網站支援哪些語言？
繁體中文、English、日本語、한국어，預設為繁體中文，可在右上角切換。