Easy-Vibe 從 0 到 1 的 AI 程式設計課：三階段課程體系、10 語言文件與本機啟動完整指南
Easy-Vibe 從 0 到 1 的 AI 程式設計課三階段課程體系、10 語言文件與本機啟動完整指南【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe本文基於 Datawhale 開源專案 easy-vibe 的官方說明文件完整介紹這門「從 0 到 1 學會 Vibe Coding」課程的定位與適用對象、三階段新手入門 → 初中級全端 → 高級開發加附錄知識庫的完整學習路徑以及如何在本地把整套 VitePress 課程站跑起來。讀完之後你可以清楚知道每一階段包含哪些章節、該從哪裡切入並能用自己的 AI IDE 或直接執行npm install/npm run dev在本地瀏覽全部課程內容。Easy-Vibe 是什麼先說清楚課程定位Easy-Vibe 是 Datawhale 維護的一門開源實戰課程定位是「從零開始學習 AI 程式開發在真實交付中把想法做成產品」。它的核心主張很直白想做記帳小程式、想做一个支援登入的預約系統、想做帶留言的部落格——這些需求在 AI 時代都可以先「說出來」然後用 AI 一步步把它做成真正的產品。課程要教的正是這個「從想法到可用產品」的完整過程。幾個可以從倉庫直接確認的關鍵事實多語言支援官方文件說明核心教學產品原型、全端開發到 AI 原生工作流程已完整支援 10 種語言。從 docs 目錄結構可以核實倉庫中確實並列存在zh-cn、zh-tw、en、ja-jp、ko-kr、es-es、fr-fr、de-de、ar-sa、vi-vn共 10 個語言目錄每個語言目錄下都有對齊的 stage 與 appendix 子目錄。技術棧課程站基於 VitePress 2vitepress: ^2.0.0-alpha.16見 package.json運行環境要求 Node.js 18。開源授權整個專案採用 CC BY-NC-SA 4.0知識共享署名-非商業性使用-相同方式共享授權package.json 中的license欄位與 README 聲明一致。適合誰五類讀者與對應學習目標官方 README 明確列出課程面向的讀者群與各自目標讀者類型目標零基礎愛好者先做出第一個作品再理解怎麼做產品經理 / 創業者快速驗證想法低成本做 MVP學生建立 AI 時代的實戰技能初級開發者補齊從想法到上線的完整開發鏈路中高級開發者掌握 AI 協作開發、複雜專案實戰與效率升級課程總體結構31 階段學習路徑官方為不同目標的讀者預設了四條入口路徑這與 llms.txtAI 導航文件中描述的「31 階段漸進式學習路徑」完全對應5 分鐘體驗適合所有人AI 程式設計初體驗、貪吃蛇小遊戲5 分鐘做出第一個 AI 應用我有個想法要實現零基礎 / 產品經理 / 創業者AI IDE 工具、需求拆解、頁面設計、功能規劃、提示詞寫法、原型迭代產出是一個可展示的產品原型我想系統學習開發者 / 進階學習者前端、後端、資料庫、AI 整合、部署維運、Claude Code 開發技巧產出是獨立完成一個可上線的全端 AI 應用我想查資料所有人電腦基礎、AI 原理、9 大知識領域、80 互動式專題。在倉庫中這套結構落在 docs/zh-cn以簡體中文主內容為例下stage-1/為新手入門與產品原型、stage-2/為初級全端開發、stage-3/為高級開發appendix/為附錄知識庫。下面逐階段展開。第一階段零基礎入門stage-1第一階段的核心目標是建立產品思維與 AI IDE 使用能力最終交付一個可展示的原型。docs/zh-cn/stage-1/ 下的主線章節章節關鍵內容學習地圖整體學習路徑導覽說明「從 Vibe Coding 到 Build Product」的課程理念與產品工程師定位AI 時代會說話就會程式設計透過貪吃蛇等案例初步感受 AI 程式設計的能力尋找好想法學會尋找和驗證產品想法找到值得做的專案認識 AI IDE 工具學會使用 IDE在本機製作小遊戲動手做出原型從需求分析、AI 產生單頁面再到產生多頁面產品原型給原型加上 AI 能力學會接入常見 AI 能力文字、圖片、影片完整專案實戰模擬真實場景、接受使用者回饋迭代完整化專案第一階段還配有三組附錄分別覆蓋產品思維、使用者研究與技術方案產品與業務思維產品思維與方案設計從零到一做產品需要考慮的思維框架、AI 應用場景參考B 端與 C 端。使用者研究與需求驗證從哪裡找點子、雙鑽模型、Jobs to Be Done、The Mom Test 使用者訪談法。技術方案寫程式時遇到錯誤怎麼辦vibe coding 中的常見錯誤及排查方法、AI 程式設計工具對比與 Agent 協作實踐。值得注意的是 learning-map 這一章的開篇論述課程認為 Vibe Coding 並沒有消除學習要求而是改變並提高了要求——「Coding 問的是我能不能把它做出來Build Product 問的是它值不值得做、誰會使用、如何交付、如何證明它真的有效」因此課程真正想培養的是對問題到結果完整過程負責的「產品工程師」。第二階段初中級開發工程師stage-2第二階段從「做出原型」推進到「做出可上線的全端應用」分為前端、後端與 AI 能力附錄三塊目錄位於 docs/zh-cn/stage-2/。前端部分docs/zh-cn/stage-2/frontend/章節關鍵內容從 Lovart 出發搭建自己的素材生產 Agent利用 Nanobanana 和 Lovart 批次產生高品質設計素材建構意圖識別的繪圖 AgentFigma 與 MasterGo 入門用設計工具梳理資訊架構和頁面結構建構第一個現代應用程式 - UI 設計基於設計稿完成元件化介面實現從設計到程式碼的第一條鏈路參考 UI 設計規範與多產品 UI 設計圍繞統一主視覺擴展多產品介面練習系統化設計能力用 LLM 和 Skills 讓介面變好看用提示詞和 Skills 外掛讓 AI 產生美觀獨特的介面一起做霍格華茲畫像從 0 到 1 做出接入 AI 能力的前端應用從設計原型到專案程式碼三種路徑將設計工具中的原型轉化為前端程式碼使用現代元件庫更新你的介面用元件庫快速建構專業級介面後端開發部分docs/zh-cn/stage-2/backend/倉庫中對應目錄已確認為database-supabase、ai-interface-code、git-workflow、zeabur-deployment、modern-cli、stripe-payment等章節關鍵內容從資料庫到 Supabase在 Supabase 上落地資料庫和 API打通資料模型與前端頁面大模型輔助編寫介面程式碼與介面文件用大模型協助產生介面與資料庫文件及程式碼Git 和 GitHub 工作流版本控制和協作如何部署 Web 應用使用 CloudBase、Vercel、Zeabur 等平台部署應用上線CLI AI 程式設計工具使用 CLI 類 AI 程式設計工具加速開發與除錯如何整合 Stripe 等收費系統接入支付系統完成收費鏈路與基礎結算流程大作業第一個現代應用程式 - 全端應用綜合前端、後端與支付模組文案生成網站完成可上線的全端 Web 應用AI 能力附錄Dify 入門與知識庫整合——用 Dify Workflow 與基礎 RAG 搭建工具類產品。第三階段高級開發工程師stage-3第三階段面向已經能獨立交付全端應用的開發者分為 Claude Code 核心技能、跨平台開發與 AI 能力附錄目錄位於 docs/zh-cn/stage-3/。Claude Code 核心技能docs/zh-cn/stage-3/core-skills/章節關鍵內容快速上手安裝設定、基礎操作、實用技巧和常用指令MCP 完全指南透過 MCP 讓 Claude Code 連接 GitHub、資料庫、API 等外部服務Skills 完全指南將專業知識打包成可複用技能包一次設定反覆使用長時間工作設計長時間執行的任務讓 Coding Tools 持續工作直到完成Agent Teams 完全指南多 AI 實例協同工作像真正的開發團隊一樣並行協作Superpowers 工程級開發讓 AI 寫出工程級程式碼遵循 TDD 和最佳實踐工作流最佳實踐日常開發、程式碼重構、Code Review 等場景的最佳實踐行動端遠端開發在行動裝置上使用 Claude Code打造高效的遠端開發工作流Claude Agent SDK 完全指南使用 SDK 建構自訂 Agent 工作流從 Vibe Coding 到 Spec Coding從即興提示轉向更結構化、規格驅動的 AI 開發工作流跨平台開發docs/zh-cn/stage-3/cross-platform/覆蓋 11 個方向從倉庫目錄可以確認對應的實戰專題平台選擇、微信小程序前端、微信小程序含後端、安卓應用ExpoWeb/原生一體化、iOS 應用Expo、PWA 本機應用離線、推送、桌面安裝、瀏覽器 AI 助手外掛一鍵總結任意網頁的 Chrome 外掛、Electron 桌面程式語音轉文字三平台安裝、NFT 鑄造以太坊測試網、VS Code 外掛AI 專案助手、工業級 Qt 桌面應用水泵監控 HMI即時資料、趨勢圖、警報。AI 能力附錄docs/zh-cn/stage-3/ai-advanced/什麼是 RAG 以及它如何運作 與 中高級 RAG 與工作流編排以 LangGraph 為例。附錄知識庫9 大領域、80 互動式專題與三个阶段並行的 docs/zh-cn/appendix/ 知識庫以動畫和視覺化元件幫助直觀理解從電腦底層到 AI 前沿的核心概念。按倉庫實際目錄9 大領域為電腦基礎1-computer-fundamentals/從電晶體到 CPU、作業系統、資料編碼儲存與傳輸、網路、資料結構、演算法思維等開發工具2-development-tools/Git 版本控制、命令列與 Shell、套件管理器、除錯、正規表示式、環境變數與 PATH、SSH 認證等瀏覽器與前端3-browser-and-frontend/JavaScript 深入、瀏覽器渲染、前端框架對比、圖形動畫、網頁效能、TypeScript、路由與狀態管理等伺服器與後端4-server-and-backend/API 設計、鑑權、後端分層架構、非同步任務佇列、並行與非同步等資料5-data/資料庫原理與 SQL、資料埋點、資料分析、A/B 測試、資料視覺化等架構與系統設計6-architecture-and-system-design/從單體到微服務、分散式系統、高可用與容災、系統設計方法論基礎設施與維運7-infrastructure-and-operations/Docker、Kubernetes、CI/CD、DNS 與 HTTPS、監控日誌告警、IaC 等人工智慧8-artificial-intelligence/大語言模型原理、Transformer 與注意力機制、RAG 架構、AI Agent 與工具呼叫、提示詞工程、圖像生成原理等工程素養9-engineering-excellence/程式碼品質與重構、測試策略、設計模式、安全思維、技術寫作、開源協作。每個領域在全部 10 個語言目錄中都有對齊的鏡像例如 docs/en/appendix/、docs/zh-tw/appendix/可以按母語或熟悉語言閱讀。本地啟動本課件README 給出了兩種啟動方式以下結合 package.json 的實際腳本說明。現代方案在 AI IDE 中直接啟動在 AI IDE 對話框VS Code、Cursor、Trae 等中輸入下列提示詞即可讓 AI 代為啟動本課件請你幫我執行這個專案的本機服務這個方式之所以可靠是因為倉庫根目錄提供了 llms.txt 這份 AI 導航文件其中明確寫出了「31 階段」的高層架構、快速決策樹和目錄結構速查讓 Cursor、Claude、Trae 等 AI Agent 能先理解倉庫結構再執行操作。傳統方案npm 手動啟動前置要求Node.js 18package.json 中engines.node為18.0.0。安裝依賴npm install啟動開發伺服器npm run dev對應 package.json 中的vitepress dev docs即對docs/目錄啟動 VitePress 開發伺服器開啟瀏覽器檢視課程內容。這裡有一個值得注意的細節README 中給出的訪問地址是http://localhost:3000而 docs/DEPLOYMENT.md 記載 VitePress 本機開發伺服器的預設地址為http://localhost:5173/easy-vibe/...base 路徑預設為/easy-vibe/仅在 Vercel 環境VERCEL1時才切換為/。因此實際訪問時以npm run dev啟動後終端輸出的 Local 地址為準這正是兩套文件對端口描述不一致的原因所在。其他常用腳本均來自 package.json命令作用npm run build執行多語言構建scripts/build-locales.mjsnpm run build:single生成 sitemap 後構建單一語言站node --max-old-space-size8192加大記憶體上限npm run preview本地預覽構建結果VitePress previewnpm test用 Node 內建測試運行器執行docs、scripts下的*.test.jsnpm run sitemap執行 scripts/generate-sitemap.mjs 生成 docs/public/sitemap.xmlnpm run book:zh/book:en生成 zh-cn / en 語言的書籍格式產物構建產物面向 Vercel 與 GitHub Pages 雙平台部署base 路徑差異的處理方式與排錯清單見 docs/DEPLOYMENT.md。想直接練習 vibe coding看 examples/倉庫根目錄的 examples/ 下還收錄了數個用 Trae 等 AI 工具生成的完整示例專案例如 trae-block-game單頁遊戲、trae-3d-block-gameVite Electron 的 3D 積木遊戲含 main.js 與 vite.config.js、trae-linear-dashboard 等。每個示例都帶有一份prompt.txt記錄驅動生成的原始提示詞、reference.png參考圖與index.html產物對照「提示詞 → 產物」的完整對應關係是理解第一階段課程方法的最好材料。學習建議與參與方式官方給出的學習建議很簡單零基礎、產品經理、創業者從第一階段學習地圖開始有開發經驗從第二階段開始想直接做複雜專案進入第三階段想學 AI Agent 建構可結合理論延伸的 Hello Claw 課程。學習方式是「根據個人能力選擇性閱讀和實踐相關章節有問題透過 Issue 提問」。專案貢獻同樣透過 Issue / Pull Request 進行課程站主題代碼的代碼品質由 eslint.config.js 約束npm run lint僅檢查docs/.vitepress/themeAGENTS.md 則為協作提供代理作業指引。整個作品以 CC BY-NC-SA 4.0 授權釋出可自由學習與非商業性傳播二創需署名並採用相同授權。【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考