sanbuphy
7d0e798672
Add comprehensive guide for AI applications in consumer scenarios with 16 categories and 80+ inspiration ideas. Focus on creating emotional connections and atmosphere rather than just functionality. Includes interactive selection tool to help users find relevant scenarios based on desired vibe and current feeling. Each scenario provides detailed atmosphere creation tips and psychological cues. Also covers core design principles for C-end products, shifting from functional thinking to emotional experience design.
20 KiB
20 KiB
███████╗ █████╗ ███████╗██╗ ██╗ ██╗ ██╗██╗██████╗ ███████╗ ██╔════╝██╔══██╗██╔════╝╚██╗ ██╔╝ ██║ ██║██║██╔══██╗██╔════╝ █████╗ ███████║███████╗ ╚████╔╝ ██║ ██║██║██████╔╝█████╗ ██╔══╝ ██╔══██║╚════██║ ╚██╔╝ ╚██╗ ██╔╝██║██╔══██╗██╔══╝ ███████╗██║ ██║███████║ ██║ ╚████╔╝ ██║██████╔╝███████╗ ╚══════╝╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═══╝ ╚═╝╚═════╝ ╚══════╝
Easy-Vibe: Learn Vibe Coding from 0 to 1
零基礎、專案制學習、建構第一個 AI 產品
📌 開始線上閱讀 (Start Reading Online)
🚀 專案介紹
當你嘗試用AI寫程式碼，出錯不斷，時常想放棄，不清楚如何將程式真正上線 😢。
本教學專門設計，從0到1，帶你逐步掌握 Vibe Coding 技巧：
- 第一階段：從小遊戲入門到Web 應用原型，掌握 AI 編程基礎與產品思維
- 第二階段：學習前後端開發與 AI 能力相關的 vibecoding 技巧，完成完整應用
- 第三階段：掌握多平台複雜應用的建構方案，走向生產級應用
我們相信，掌握Vibe Coding並配合系統化訓練，一個人就能成為集前後端開發、AI 能力整合、產品設計於一身的開發者。
本專案主要面向三類學習者：
- 新手（普通人 / 產品與運營側）：幫助非技術入門學習者聽懂關鍵概念，完成第一個產品原型。
- 初中級開發者（有一定基礎的學生和開發者）：掌握前後端 vibe coding 與 AI 能力知識。
- 高級開發者（公司與初創、開源與獨立開發者）：高級開發技巧、多平台開發。
📖 內容導航
總附錄
一、新手入門與產品原型
| 章节 | 關鍵內容 | 狀態 |
|---|---|---|
| 前言：學習地圖 | 整體學習路徑導覽 | ✅ |
| 初級一：AI 時代，會說話就會編程 | 通過貪吃蛇等案例初步感受 AI 編程的能力 | ✅ |
| 初級二：認識 AI IDE 工具 | 學會使用 IDE，在本地製作小遊戲 | ✅ |
| 初級三：動手做出原型 | 從需求分析、AI 生成單頁面，再到生成多頁面產品原型 | ✅ |
| 初級四：給原型加上 AI 能力 | 學會接入常見 AI 能力（文本、圖片、影片） | ✅ |
| 初級五：完整專案實戰 | 模擬真實場景、接受用戶反饋迭代，完整化專案 | ✅ |
| 大作業：做一個完整的 Web 應用原型並展示 | 完整實現應用，展示應用效果 | ✅ |
附錄：業務思維
| 章節 | 關鍵內容 | 狀態 |
|---|---|---|
| 附錄A：產品思維與方案設計 | 從零到一做產品需要考慮的思維框架 | ✅ |
| 附錄B：AI 行業應用場景參考 (B端) | 了解 AI 在不同產業的應用場景 | ✅ |
| 附錄C：AI 消費場景靈感參考 (C端) | 探索 AI 在消費級產品中的應用場景 | ✅ |
附錄：技術方案
| 章節 | 關鍵內容 | 狀態 |
|---|---|---|
| 附錄D：寫代碼時遇到錯誤怎麼辦 | vibe coding 中的常見錯誤及排查方法 | ✅ |
| 附錄E：七款 AI 編程工具對比 | 對比測試主流 AI 編程平台 | ✅ |
| 附錄F：用設計和編程 Agent 設計網站 | 學習如何使用 AI 智能體協同工作 | ✅ |
二、初中級開發工程師
前端部分
| 章节 | 關鍵內容 | 狀態 |
|---|---|---|
| 前端零：使用 lovart 生產素材 | 學會用 lovart 批量生成人物、場景等視覺素材，為 UI 設計和前端開發提供素材基礎 | 🚧 |
| 前端一：Figma 與 MasterGo 入門 | 用設計工具梳理信息架構和頁面結構，為前端實現打基礎 | 🚧 |
| 前端二：建構第一個現代應用程式-UI 設計 | 基於設計稿完成組件化界面，實現從設計到代碼的第一條鏈路 | 🚧 |
| 前端三：參考 UI 設計規範與多產品 UI 設計 | 圍繞統一主視覺擴展多產品界面，練習系統化設計能力 | 🚧 |
| 前端四：一起做霍格沃茨肖像 | 從 0 到 1 做出接入 AI 能力的前端應用，串聯設計與開發 | ✅ |
後端與全棧部分
| 章节 | 關鍵內容 | 狀態 |
|---|---|---|
| 後端一：什麼是 API | 理解 HTTP 接口與請求響應模型，為後端整合與聯調做準備 | ✅ |
| 後端二：從數據庫到 Supabase | 在 Supabase 上落地數據庫和 API，打通數據模型與前端頁面 | ✅ |
| 後端三：大模型輔助編寫接口代碼與接口文檔 | 用大模型協助生成接口與數據庫文檔及代碼，實現可讀可測的後端 | 🚧 |
| 後端四：Git 工作流 | 在 Git 工作流中管理代碼，進行版本控制和協作 | ✅ |
| 後端五：Zeabur 部署 | 將應用部署到 Zeabur 上線 | ✅ |
| 後端六：現代 CLI 開發工具 | 使用 CLI 類 AI 編程工具加速開發與調試，形成個人工程化工作流 | ✅ |
| 後端七：如何整合 Stripe 等收費系統 | 接入支付系統，完成收費鏈路與基礎結算流程 | 🚧 |
| 大作業 1：建構第一個現代應用程式-全棧應用 | 綜合前端、後端與支付模塊，完成可上線的全棧 Web 應用 | 🚧 |
| 大作業 2：現代前端組件庫 + Trae 實戰 | 使用現代前端組件庫與 Trae，獨立完成可登錄註冊並支持收費的產品 | 🚧 |
AI 能力附錄
| 章节 | 關鍵內容 | 狀態 |
|---|---|---|
| AI 一：Dify 入門與知識庫整合 | 用 Dify Workflow 與基礎 RAG 搭建工具類產品，為後續應用升級打樣 | ✅ |
| AI 二：學會查詢 AI 詞典與整合多模態 API | 學會查找合適的模型與 API，並把文本、圖像等多模態能力接入產品 | 🚧 |
三、高級開發工程師
| 章节 | 關鍵內容 | 狀態 |
|---|---|---|
| 高級一：MCP 與 ClaudeCode Skills | 通過 MCP 與 Skills 擴展 IDE 能力，把外部服務接成工具 | 🚧 |
| 高級二：如何讓 Coding Tools 長時間工作 | 設計和配置長時間運行的任務，讓 Coding Tools 更穩定可靠 | 🚧 |
| 高級三：多平台開發：如何建構微信小程式 | 了解微信小程式生態，從官方模板到上線完成一個前端小程式 | ✅ |
| 高級四：多平台開發：如何建構微信小程式-包含後端 | 在小程式中接入數據庫與後端邏輯，打通完整業務閉環 | 🚧 |
| 高級五：多平台開發：如何建構安卓程式 | 使用 Expo 等工具，完成 Web/原生一體化的安卓應用開發 | 🚧 |
| 高級六：多平台開發：如何建構 iOS 程式 | 使用 Expo 等工具，完成 Web/原生一體化的 iOS 應用開發 | 🚧 |
| 高級七：如何建構屬於自己的個人網頁與學術博客 | 從選型、搭建到部署，建構展示個人專案與學術成果的長久在線主頁 | 🚧 |
AI 能力附錄
| 章节 | 關鍵內容 | 狀態 |
|---|---|---|
| 高級 AI 一：什麼是 RAG 以及它如何工作 | 系統理解 RAG 原理與常見架構，為複雜應用提供知識檢索基礎 | ✅ |
| 高級 AI 二：中高級 RAG 與工作流編排：以 LangGraph 為例 | 使用 LangGraph 等工具設計多步工作流與中高級 RAG 系統 | 🚧 |
🛠️ 如何學習
- 根據個人能力，選擇性地閱讀和實踐相關章節，如果有問題歡迎 issue 提問。
💻 本地啟動本課件
現代方案
在 AI IDE 對話框（vscode、cursor、trae 等）中，輸入下列提示詞啟動本課件：
請你幫我運行這個專案的本地服務
舊方案
- npm install
- npm run dev
- 打開瀏覽器訪問
http://localhost:5173即可查看。
🤝 參與貢獻
- 如果你發現了一些問題，或者覺得任何可以改進本專案的地方，可以提 Issue 進行反饋。如果提完沒有人回復你可以聯系保姆團隊的同學進行反饋跟進~
- 如果你想參與貢獻本專案，可以提 Pull Request，如果提完沒有人回復你可以聯系保姆團隊的同學進行反饋跟進~
- 如果你對 Datawhale 很感興趣並想要發起一個新的專案，請按照Datawhale 開源專案指南進行操作即可~
🙏 感謝每位貢獻者
- 散步-專案負責人 (Datawhale成員)
- 方可-指導老師（Datawhale成員, 清華大學）
- Yerim Kang（實踐專案部分-清華大學）
- 趙芷霖（實踐專案部分-清華大學）
- 李亦萱（頁面美術設計-清華大學）
- AI Vibe Coding 101 內測群完整給建議體驗的小夥伴們
特別感謝
- 感謝 @Sm1les 對本專案的幫助與支持
- 感謝所有為本專案做出貢獻的開發者們 ❤️
📧 聯系我們
如果有問題提建議吐槽，或者想要一起交流，請掃描下方二維碼
掃描下方二維碼關注公眾號：Datawhale
