專案介紹

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

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

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

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

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

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

📖 內容導航

總附錄

AI 能力詞典：常見 AI 核心概念與名詞、場景解釋

零、幼兒園

章節	關鍵內容	狀態
新手入門：學習地圖	整體學習路徑導覽	✅
新手入門：AI 時代，會說話就會程式設計	透過貪喫蛇等案例初步感受 AI 程式設計的能力	✅

一、AI 產品經理

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

附錄

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

二、初中級開發工程師

前端部分

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

後端開發部分

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

AI 能力附錄

章節	關鍵內容	狀態
Dify 入門與知識庫整合	用 Dify Workflow 與基礎 RAG 搭建工具類產品，為後續應用升級打樣	🚧
學會查詢 AI 詞典與整合多模態 API	學會查詢合適的模型與 API，並把文字、影象等多模態能力接入產品	🚧

三、高階開發工程師