1-3 解鎖系統觀背景知識、實作案例路徑圖

系列章節

1｜序章

• Vibe Coding 是什麼？為什麼你應該要學習？
• 你以為差 Prompt？其實是差背景知識

2｜工具地圖

• 三神器：ChatGPT / Cursor / Claude Code
• ChatGPT 實戰：五分鐘做一個小工具
• Cursor 快速入門：AI 原生的程式編輯器
• Cursor 核心功能詳解：掌握 AI 編程的精髓
• Claude Code 基礎練習：最聰明的 AI 開發助手
• Git / GitHub 基礎：程式碼的時光機與雲端備份

3｜Claude Code 進階

• Claude Code SDK：打造專屬 AI 開發工作流程
• 用 Claude Code 平行代理讓工作流程飛起來
• Subagents：打造你的 AI 開發團隊
• 斜線指令完全指南：用一個 / 掌控一切
• Claude Code Hooks：打造自動化開發工作流程
• Claude Code 輸出風格：讓 AI 成為任何類型的助手
• 用 MCP 連接外部工具：打造超級開發環境

4｜網頁基礎

• 基本背景知識：HTML 生存必修
• 基本背景知識：CSS 生存必修
• 基本背景知識：JavaScript 生存必修
• Debug：F12 DevTools 開發者工具完全指南

5｜系統觀

• 前端 / 後端 / Database / API 的分工

6｜前端框架

• Framework 為什麼存在？React / Vue / Next.js
• Claude Code 進階開發環境建置
• Debug：React / Next.js
• 升級計算機小工具（React 元件化）

7｜Claude Flow

• Claude Code 下 Prompt 的精髓與 AI 開發 Flow（PRD 驅動）
• 15 個讓 Claude Code 效率飆升 10 倍的專業技巧

8｜資料與儲存

• 資料儲存方式：LocalStorage / Database
• Claude Code Firebase 設定教學
• 做一個可以儲存資料的網站

9｜API 與整合

• 實作一個 ChatBot 網站

10｜身份驗證

• OAuth2 登入機制解析
• Claude Code 實作登入網站

11｜即時同步

• WebSocket 即時同步

12｜金流

• Buy Me A Coffee 簡易金流

13｜部署

• 基礎部署：GitHub Pages
• 進階部署：Zeabur 全端應用

14｜自動化

• Google Apps Script 入門
• Gmail 自動化
• Google Sheets 自動化
• Google Calendar 自動化

15｜資源库

• 資料庫選擇指南：找到最適合你專案的儲存方案
• 專業術語詞彙表：讓你聽懂工程師在講什麼
• 設計模式與風格指南：寫出讓人讚嘆的程式碼
• Prompt 工程範本庫：讓 AI 更懂你的需求
• 常用程式碼片段庫：複製貼上就能用的高品質程式碼
• 第三方服務整合指南：站在巨人肩膀上建造
• 疑難雜症解決方案：開發路上的急救包

16｜綜合實作案例演練

• 待辦事項管理 App：React + Firebase 全端開發
• 個人部落格系統：Next.js + 內容管理
• 電商網站：購物車 + 金流整合
• 即時聊天室：WebSocket + 使用者認證
• 個人作品集網站：設計 + 部署完整流程

下一步

接下來的每一篇文章，都會循序漸進地：

1. 講解系統概念：你需要知道的背景知識與基礎概念
2. 教你用 AI 操作：如何使用 ChatGPT、Claude Code 等工具實作
3. 提供範例 Prompt：可以直接複製使用的高品質 Prompt 模板
4. Debug 技巧：遇到問題時的解決方法與除錯工具
5. 實作案例與 Demo：每個重要章節都有專案讓你動手做

透過這個學習方式，你不只是在看教學，而是真的在打造屬於自己的作品。每完成一個章節，你的作品集就會多一個項目。

最後，我將會教你將作品部署上線，讓全世界的人都可以使用你的產品或工具！