# 專案介紹

2025年，被很多人視為AI程式設計的元年。越來越多的人開始用AI寫程式碼，但往往做出來的還停留在玩具層面——不知道如何用Vibe Coding組織開發流程，不知道該選哪些工具，更不清楚從原型到上線中間還差哪些關鍵步驟。

我們採用循序漸進的**三階段實戰路徑**：新手入門階段透過小遊戲快速上手AI程式設計，第一階段掌握Vibe Coding工作方式並完成Web應用原型，第二階段學習全棧開發與部署上線，第三階段構建跨平臺複雜應用。

每個階段都配有完整專案實戰，讓你在真實挑戰中從玩具走向產品，最終具備**將任何想法落地為可用應用**的能力。

我們相信，掌握Vibe Coding並配合系統化訓練，你一個人就能成為**集前後端開發、AI能力整合、產品設計於一身的全能開發者**。

本專案主要面向三類學習者：

- **新手（普通人 / 產品與運營側）**：幫助非技術背景角色和入門學習者聽懂關鍵概念，完成第一個 AI 小工具或產品原型。
- **初中級開發者（有一定基礎的學生和開發者）**：系統掌握 vibe coding 與原生 AI 應用開發。
- **高階開發者（公司與初創、開源與獨立開發者）**：支援團隊和個人快速搭建、驗證與迭代原生 AI 應用。

## 📖 內容導航

### 總附錄

[AI 能力詞典：常見 AI 核心概念與名詞、場景解釋](/zh-tw/appendix/8-artificial-intelligence/ai-capability-dictionary)

### 零、幼兒園

| 章節                                                                                   | 關鍵內容                               | 狀態 |
| :------------------------------------------------------------------------------------- | :------------------------------------- | :--- |
| [新手入門：學習地圖](/zh-tw/stage-1/learning-map/)                                 | 整體學習路徑導覽                       | ✅   |
| [新手入門：AI 時代，會說話就會程式設計](/zh-tw/stage-1/ai-capabilities-through-games/) | 透過貪喫蛇等案例初步感受 AI 程式設計的能力 | ✅   |

### 一、AI 產品經理

| 章節                                                                          | 關鍵內容                                                 | 狀態 |
| :---------------------------------------------------------------------------- | :------------------------------------------------------- | :--- |
| [初級二：認識 AI IDE 工具](/zh-tw/stage-1/introduction-to-ai-ide/)        | 學會使用 IDE，掌握介面結構和高效提示方式                 | ✅   |
| [初級三：動手做出原型](/zh-tw/stage-1/building-prototype/)                | 從產品分析拆解，到多頁面產品原型實現的完整閉環           | ✅   |
| [初級四：給原型加上 AI 能力](/zh-tw/stage-1/integrating-ai-capabilities/) | 理解並完成常見 AI 能力（文字圖片影片）的 API 接入        | ✅   |
| [初級五：完整專案實戰](/zh-tw/stage-1/complete-project-practice/)         | 模擬真實場景、接受使用者反饋迭代並完成專案展示（含大作業） | ✅   |

#### 附錄

| 章節                                                                  | 關鍵內容                                  | 狀態 |
| :-------------------------------------------------------------------- | :---------------------------------------- | :--- |
| [附錄A：產品思維補充](/zh-tw/stage-1/appendix-a-product-thinking/)    | 從想法評估到需求拆解與 MVP 的產品思維框架 | ✅   |
| [附錄B：常見報錯及解決方案](/zh-tw/stage-1/appendix-b-common-errors/) | vibe coding 中的常見錯誤及排查方法        | ✅   |
| [附錄：從哪裡找點子](/zh-tw/stage-1/appendix-idea-sources/)          | 從參考應用、趨勢和 VC 清單裡收出細分方向  | ✅   |
| [附錄：雙鑽模型](/zh-tw/stage-1/appendix-double-diamond/)           | 理解先定義問題，再展開方案設計的完整節奏  | ✅   |
| [附錄：Jobs to Be Done](/zh-tw/stage-1/appendix-jobs-to-be-done/)  | 用 JTBD 方法看清使用者真正想完成的事        | ✅   |
| [附錄：The Mom Test 使用者訪談法](/zh-tw/stage-1/appendix-mom-test/) | 透過使用者訪談驗證需求的調研方法            | ✅   |

### 二、初中級開發工程師

#### 前端部分

| 章節                                                                                                                | 關鍵內容                                                                     | 狀態 |
| :------------------------------------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------- | :--- |
| 使用 lovart 生產素材                                                                                        | 學會用 lovart 批次生成人物、場景等視覺素材，為 UI 設計和前端開發提供素材基礎 | 🚧   |
| Figma 與 MasterGo 入門                                                                                      | 用設計工具梳理資訊架構和頁面結構，為前端實現打基礎                           | 🚧   |
| 構建第一個現代應用程式-UI 設計                                                                              | 基於設計稿完成元件化介面，實現從設計到程式碼的第一條鏈路                       | 🚧   |
| 參考 UI 設計規範設計頁面和按鈕                                                                              | 學習用主流設計規範組織頁面結構、按鈕層級，並藉助 AI 生成設計方案             | 🚧   |
| [一起做霍格沃茨畫像](/zh-tw/stage-2/frontend/hogwarts-portraits/) | 從 0 到 1 做出接入 AI 能力的前端應用，串聯設計與開發                         | 🚧   |

#### 後端開發部分

| 章節                                                                                                                    | 關鍵內容                                                      | 狀態 |
| :---------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
| 什麼是 API                                                                                                      | 理解 HTTP 介面與請求響應模型，為後端整合與聯調做準備          | 🚧   |
| [從資料庫到 Supabase](/zh-tw/stage-2/backend/database-supabase/) | 在 Supabase 上落地資料庫和 API，打通資料模型與前端頁面        | 🚧   |
| 大模型輔助編寫介面程式碼與介面文件                                                                                | 用大模型協助生成介面與資料庫文件及程式碼，實現可讀可測的後端    | 🚧   |
| Git 工作流與 Zeabur 部署                                                                                        | 在 Git 工作流中管理程式碼，並將應用部署到 Zeabur 上線           | 🚧   |
| 現代 CLI 開發工具                                                                                               | 使用 CLI 類 AI 程式設計工具加速開發與除錯，形成個人工程化工作流   | 🚧   |
| 如何整合 stripe 等收費系統                                                                                      | 接入支付系統，完成收費鏈路與基礎結算流程                      | 🚧   |
| 構建第一個現代應用程式-全棧應用                                                                               | 綜合前端、後端與支付模組，完成可上線的全棧 Web 應用           | 🚧   |
| 現代前端元件庫 + Trae 實戰                                                                                    | 使用現代前端元件庫與 Trae，獨立完成可登入註冊並支援收費的產品 | 🚧   |

#### AI 能力附錄

| 章節                                                                                                                                                                  | 關鍵內容                                                       | 狀態 |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
| [Dify 入門與知識庫整合](/zh-tw/stage-2/ai-capabilities/dify-knowledge-base/) | 用 Dify Workflow 與基礎 RAG 搭建工具類產品，為後續應用升級打樣 | 🚧   |
| 學會查詢 AI 詞典與整合多模態 API                                                                                                                               | 學會查詢合適的模型與 API，並把文字、影象等多模態能力接入產品   | 🚧   |

### 三、高階開發工程師