使用者點選下單： HTML/CSS/React 呈現商品頁面；JavaScript 控制互動；前端透過 HTTP 呼叫 API；後端以 Node.js 或 Python 驗證庫存與付款；PostgreSQL 保存訂單；Cloudflare 或其他雲端平台提供執行環境；GitHub Actions 可以執行測試及部署。
如果加入 AI Agent：模型可以理解請求、提出工具呼叫或產生建議，但付款、刪除資料及權限核准仍須由可信賴的程式規則控制。
THE BEFORE YOU BUILD FIELD GUIDE
Vibe Coding 前，
先看懂軟體工程的地圖。
你可以不會從零寫程式，但不能把語言、框架、API、資料庫、部署與 AI Agent 混成一件事。這份繁體中文知識 Hub 將陌生工程名詞拆成七個主題，用案例建立完整系統觀。
7 個知識章節80+ 個概念與專有名詞0 工程背景門檻
先掌握完整的系統分層
這是為初學者整理的概念模型，而非所有專案都必須採用的固定堆疊。API、AI 與 DevOps 都可能跨越多層。
- 01UI / UX
使用者看到、操作與體驗的畫面
- 02Frontend
瀏覽器互動、頁面與狀態
- 03API / HTTP
系統之間交換資料及呼叫功能
- 04Backend
業務邏輯、資料驗證、服務端權限
- 05Database / Storage
保存結構化資料、檔案與記錄
- 06Cloud / Infrastructure
提供運算、網路與部署環境
- 07DevOps / Quality
版本、測試、發布與維運
七個主題，從陌生名詞到理解整體架構
建議依序閱讀；每頁均包含名詞表、具體例子、概念差異、實作檢查點與 FAQ。
CHAPTER 01
基礎全貌
從七層架構看懂 UI、前端、API、後端、資料、部署與 DevOps，理解 Language、Library、Framework、Runtime 與 Platform 的差異。
閱讀專題 → CHAPTER 02前端與介面
用網站與電商案例理解 UI、UX、HTML、CSS、JavaScript、TypeScript、React、Vue、Next.js、Vite、Responsive。
閱讀專題 → CHAPTER 03API 與後端
理解 GET、POST、Endpoint、JSON、Webhook、SDK，以及 Python、Node.js、FastAPI、Django 與 Serverless 的職責。
閱讀專題 → CHAPTER 04資料與安全
分辨 SQL、PostgreSQL、Redis、Object Storage、Vector Database、Supabase，以及 Authentication、Authorization、OAuth、JWT、RBAC。
閱讀專題 → CHAPTER 05部署與維運
理解 Server、VM、Container、Docker、Kubernetes、DNS、CDN、Git、GitHub、Commit、Branch、CI/CD 與 Rollback。
閱讀專題 → CHAPTER 06架構與測試
理解 Monolith、Microservices、Event-driven、MVC、Distributed Systems、Unit Test、Integration Test、E2E Test、Regression Test、Monitoring。
閱讀專題 → CHAPTER 07AI 與 Agent
分辨 LLM、Token、Context Window、Embedding、RAG、Tool Calling、MCP、AI Agent、Workflow、Fine-tuning、Inference。
閱讀專題 →用一個電商網站理解名詞的關係
開始 Vibe Coding 前的五個問題
- 使用者要解決什麼問題？完整操作路徑是什麼？
- 哪些事情由瀏覽器負責，哪些由後端負責？
- 哪些資料必須儲存，誰可以存取與修改？
- 程式在哪裡執行，失敗時如何發現與回復？
- 如何證明新功能真的能運作，而不是只有 Demo 畫面？
常見問題 FAQ
Vibe Coding 前一定要會寫程式嗎？
不一定要先熟練寫程式，但至少需要理解前端、後端、API、資料與權限，並驗證部署、測試及安全性。
Vibe Coding 和傳統軟體工程有何不同？
Vibe Coding 強調透過自然語言與 AI 協作產生及調整程式；需求、架構、測試與營運責任仍然存在。
這份教學適合哪些人？
適合第一次用 AI 寫程式的創業者、產品經理、企業經營者、行銷人與非技術背景的專案負責人。