vibe-vibe-tw

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #go #android #docker #nodejs #macos #java #awesome #vue #awesome-list #ios #mcp

(★ 66)

Vibe Vibe 繁體中文版 - 人人都能學會的 AI 編程（Vibe Coding）指南

vibe-vibe-tw Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vibe Vibe —— 人人都能學會的 AI 編程（Vibe Coding）指南

> **📢 本倉庫為繁體中文版本** | [簡體中文原版](https://github.com/datawhalechina/vibe-vibe)

> **面向零編程基礎學習者的 AI 輔助編程系統化教程，從「我有一個想法」到「我做出了一個產品」，讓人人都能成爲 Builder。**

- 📖 點擊以訪問教程主頁：www.vibevibe.cn
- 🌐 繁體中文版倉庫：https://github.com/godmakereth/vibe-vibe-tw
- 📚 詳細專案說明：查看 [PROJECT_INFO.md](./PROJECT_INFO.md)

### 核心理念

踐行 OpenAI 聯合創始人 **Andrej Karpathy** 提出的 Vibe Coding 理念——**從 Coder 到 Commander**：通過自然語言與 AI 對話，讓編程從"寫代碼"轉變爲"對話式創作"。

> *"完全沉浸於編程的'氛圍'中，忘記代碼的存在。"*

### 快速開始

📖 **在線閱讀**：[www.vibevibe.cn](https://www.vibevibe.cn)

| 你是誰 | 推薦起點 |
|-------|---------|
| 完全零基礎 | 基礎篇 → 第1章 覺醒 |
| 用過 ChatGPT 等大語言模型工具但沒做過項目 | 基礎篇 → 第2章 心法 |
| 有編程基礎想學 Vibe Coding | 基礎篇快速瀏覽 → 進階篇 |
| 想直接動手做項目 | 基礎篇 → 第4章 實戰 |
| 想找項目練手 | 實踐篇 |

### 教程定位

國內首個系統化的 Vibe Coding 開源教程，分爲四大板塊：

| 板塊 | 定位 | 適合人羣 |
|-----|------|---------|
| 📘 **基礎篇** | AI 編程入門 + 心法 + 第一個項目 | 完全零基礎、用過 ChatGPT 但沒做過項目 |
| 📗 **進階篇** | 全棧技術棧 + 工程化 + 生產級部署 | 想深入學習、有一定編程基礎想轉型 |
| 📙 **實踐篇** | 分人羣項目實戰 + 進階技能訓練 | 想通過動手練習鞏固所學 |
| 📕 **優質文章篇** | 精選學習資源 + 行業前沿追蹤 | 想持續學習、保持行業敏感度 |

- **爲什麼需要這份教程？** Vibe Coding 已成爲全球趨勢（越來越多的創業公司大部分代碼由 AI 輔助生成），但國內學習資源碎片化嚴重，缺乏系統化、零基礎友好、包含完整進階路徑的教程。

- **適合人羣**：編程零基礎者、大學生、創業者、傳統程序員、職場人士——任何想用 AI 快速實現想法、提升工作效率或學習新範式的人。

### 學習產出

| 階段 | 你將獲得 |
|-----|---------|
| **基礎篇** | 掌握 Vibe Coding 心法 · 用自然語言指揮 AI · 獨立完成項目 · 部署上線能力 |
| **進階篇** | 現代全棧技術棧 · 前後端架構 · 用戶系統開發 · 生產級部署 · 工程化思維 |

## 貢獻者名單

| 姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | 職責 | 簡介 |
| :----| :---- | :---- |
| [齊國皓](https://www.guohaoqi.cn) | 項目負責人 & 核心貢獻者 | 現就讀於新加坡國立大學計算機學院, 湖南大學金融科技協會創始人|
| [符航康](https://www.hangkangfu.cn) | 項目負責人 & 核心貢獻者 | 湖南大學金融科技協會創始成員, 一名 AI 原生的年輕人，湖南大學信息科學與工程學院24級本科生|
| 陳俊希 | 「優質文章篇」板塊貢獻者 | 湖南大學金融科技協會現任會長，湖南大學金融與統計學院24級本科生 |
| 金龍   |「實踐篇」板塊貢獻者  | 北京大學學生創新學社AI俱樂部副部長，北京大學24級研究生| 
| 舒璐璐 | 「實踐篇」板塊貢獻者 | 湖南大學「麓山人文+」創始人，湖南大學嶽麓書院23級本科生 |

## 目錄

本教程分爲**四大板塊**，採用漸進式學習路徑設計（點擊展開詳細目錄）：

<details>
<summary><b>📘 基礎篇：Vibe Coding 啓示錄（寫給所有人的 AI 編程入門）</b></summary>

```
基礎篇目錄
│
├── 寫在最前面
│   └── 找到你的位置
│
├── 第1章：覺醒 —— 爲什麼現在是編程最好的時代
│   ├── 1.1 編程已死，編程永生：從 Coder 到 Commander
│   ├── 1.2 核心概念：Vibe Coding 與 Spec Coding 詳解
│   ├── 1.3 破除迷信：不懂英文、數學不好也能寫代碼嗎？
│   ├── 1.4 工具初探：Cursor、Windsurf、Bolt.new 與 Replit 選型指南
│   └── 1.5 Hello World：你的第一個 3 分鐘 AI 網頁
│
├── 第2章：心法 —— 像產品經理一樣思考
│   ├── 2.1 拒絕功能堆砌：爲什麼你的 AI 寫不出複雜的 App？
│   ├── 2.2 MVP 思維：如何設計一個"能跑的最小版本"
│   ├── 2.3 靈魂三問：用戶是誰？痛點在哪？爲何用你？
│   └── 2.4 實戰演練：拆解一個"背單詞軟件"的想法
│
├── 第3章：技法 —— 與 AI 對話的藝術
│   ├── 3.1 提示詞工程基礎：Context is King
│   ├── 3.2 用戶旅程地圖：把想法變成 AI 能懂的路徑
│   ├── 3.3 編寫第一份 PRD：讓 AI 不再胡編亂造
│   └── 3.4 功能優先級 P0/P1/P2：學會對 AI 說"這個先不做"
│
├── 第4章：實戰 —— 從 0 到 1 開發個人工具
│   ├── 4.1 環境準備：無需命令行的開發環境搭建
│   ├── 4.2 第一輪：生成靜態頁面 —— 先看"臉"
│   ├── 4.3 第二輪：注入邏輯與交互 —— 再長"腦"
│   ├── 4.4 第三輪：數據存儲基礎
│   └── 4.5 Debug 指南：當 AI 報錯時，如何用 AI 修復 AI
│
├── 第5章：精進 —— 從"能用"到"好用"
│   ├── 5.1 後悔藥：代碼改崩了怎麼辦
│   ├── 5.2 見世面：把網頁發到互聯網上
│   ├── 5.3 護城河：AI 時代的安全意識
│   ├── 5.4 再進化：項目的持續迭代與優化
│   ├── 5.5 知邊界：Vibe Coding 的能與不能
│   └── 5.6 啓程前：本章總結與進階預告
│
├── 結語：給未來的你
│
├── 下部預告：Vibe Coding 全棧實戰教程
│
└── 附錄
    ├── A. Prompt 速查清單
    ├── B. 常見錯誤與解決方案速查表
    ├── C. 術語表（中英對照）
    ├── D. 工具對比速查表
    └── E. 項目 idea 清單
```

</details>

<details>
<summary><b>📗 進階篇：Vibe Coding 全棧實戰教程</b></summary>

```
進階篇目錄
│
├── 第0章：Bootcamp（零基礎概念打底）
│   ├── 0.0 課程概念定義：術語表與課程範圍
│   ├── 0.1 計算機與操作系統基礎：文件/進程/端口/路徑/權限
│   ├── 0.2 命令行入門：pwd/ls/cd/cat/grep/nano
│   ├── 0.3 前端三件套：HTML/CSS/JS 基礎語法與作用
│   ├── 0.4 開發環境配置：Node.js、包管理器與工具鏈
│   ├── 0.5 JS → TS 思維轉換
│   ├── 0.6 開發安全底線
│   └── 0.7 Docker 核心概念
│
├── 第1章：概念與準備（從思維到工具）
│   ├── 1.1 工具裝配與最小項目驗證
│   ├── 1.2 Vibe Coding 心法
│   ├── 1.3 最小上線實戰與 1Panel 部署
│   ├── 1.4 AI 協作工作流實戰與最佳實踐
│   └── 1.5 工具鏈與環境
│
├── 第2章：技術選型與架構藍圖
│   ├── 2.0 技術棧全景
│   ├── 2.1 Next.js + TS + Prisma + OSS 架構全景
│   ├── 2.2 Next.js 渲染策略全景（CSR/SSR/SSG/ISR）
│   ├── 2.3 Next.js 核心概念深入
│   ├── 2.4 前後端協作：接口契約/API Route
│   ├── 2.5 架構分層詳解
│   └── 2.6 拓展：Supabase 適用與取捨
│
├── 第3章：前端到後端（把頁面跑起來）
│   ├── 3.1 App Router：文件路由與數據獲取
│   ├── 3.2 前端構建塊：組件/狀態/路由/數據獲取
│   ├── 3.3 Figma 集成實戰與 AI 協作
│   ├── 3.4 Tailwind + shadcn/ui：統一設計體系
│   ├── 3.5 Debug 實戰：斷點/Network/日誌
│   ├── 3.6 API Route 與服務層分離
│   ├── 3.7 可用性：錯誤/空態/加載骨架
│   └── 3.8 可訪問性/UX 原則/i18n
│
├── 第4章：數據庫與數據生命週期
│   ├── 4.1 數據建模與 ER 圖
│   ├── 4.2 關係型數據庫：CRUD/索引/事務
│   ├── 4.3 SQL 基礎操作
│   ├── 4.4 Prisma 實戰
│   └── 4.5 數據遷移與版本管理
│
├── 第5章：產品文檔與溝通規範
│
├── 第6章：用戶認證與權限
│   ├── 6.1 NextAuth.js 快速上手
│   ├── 6.2 認證與授權安全實踐
│   ├── 6.3 API 安全防護實踐
│   ├── 6.4 常見 Web 安全威脅與防護
│   └── 6.5 第三方登錄集成（微信/QQ/釘釘）
│
├── 第7章：API 設計與開發規範
│   ├── 7.1 HTTP 與 API 方法/冪等/重試
│   ├── 7.2 REST 最小原則與錯誤返回
│   ├── 7.3 API 文檔：Swagger/Postman
│   └── 7.4 API 版本管理與兼容性
│
├── 第8章：項目規則與協作
│   ├── 8.1 Git 基本流程
│   ├── 8.2 分支策略與分支保護
│   ├── 8.3 提交規範：Conventional Commits
│   ├── 8.4 .gitignore 管理
│   └── 8.5 文檔與評審流程
│
├── 第9章：測試與質量
│   ├── 9.1 測試金字塔
│   ├── 9.2 測試環境與隔離
│   ├── 9.3 單元測試/集成測試：Jest
│   ├── 9.4 錯誤處理與日誌規範
│   └── 9.5 CI 質量門禁與 GitHub Actions
│
├── 第10章：部署與運維
│   ├── 10.1 雲服務/網絡/域名/證書
│   ├── 10.2 1Panel 可視化部署
│   ├── 10.3 Docker Compose 編排
│   ├── 10.4 反向代理與負載均衡
│   └── 10.5 監控與日誌
│
├── 第11章：發佈、覆盤與教學沉澱
│   ├── 11.1 語義化版本與發佈流
│   ├── 11.2 GitHub Actions 部署
│   ├── 11.3 課程化產出
│   └── 11.4 覆盤模板
│
└── 第12章：高級專題與優化
    ├── 12.1 Node 進程與事件循環
    ├── 12.2 SEO：SSR/Meta/站點地圖
    ├── 12.3 Vercel AI SDK 與流式響應
    ├── 12.4 WebSockets 即時通信
    ├── 12.5 文件分片傳輸
    ├── 12.6 爬蟲基礎
    └── 12.7 版本化與變更日誌
```

</details>

<details>
<summary><b>📙 實踐篇：分人羣項目實戰</b></summary>

```
實踐篇目錄
│
├── 基礎板塊（按人羣分類）
│   ├── 文科生/商科生項目 —— 內容創作、數據展示類
│   ├── 理工科學生項目 —— 算法可視化、數據處理類
│   └── 職場人士項目 —— 工作流自動化、效率提升類
│
└── 進階板塊（基於 Sean's Stories 系列）
    ├── 核心技能 —— 上線應用、數據庫、後端部署、用戶認證
    ├── AI Agent 開發 —— RAG、向量數據庫、MCP 集成
    ├── 全棧項目實戰 —— SaaS、地圖應用、移動應用
    └── 工具與效率 —— n8n、GitHub 工作流、React/TS 進階
```

</details>

<details>
<summary><b>📕 優質文章篇：精選學習資源</b></summary>

```
優質文章篇目錄
│
├── 知名公司博客 —— OpenAI、Anthropic、Vercel 等技術博客
├── 優質播客 —— AI、開發者、創業者相關播客推薦
├── 研究報告 —— AI 發展報告、開發者調查、行業趨勢
├── 優質 Newsletter —— 值得訂閱的技術週刊
└── 開發者社區 —— Discord、Twitter、GitHub 優質資源
```

</details>

## 參與貢獻

- 如果你發現了一些問題，可以提Issue進行反饋，如果提完沒有人回覆你可以聯繫[保姆團隊](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同學進行反饋跟進~
- 如果你想參與貢獻本項目，可以提Pull request，如果提完沒有人回覆你可以聯繫[保姆團隊](https://github.com/datawhalechina/DOPMC/blob/main/OP.md)的同學進行反饋跟進~
- 如果你對 Datawhale 很感興趣並想要發起一個新的項目，請按照[Datawhale開源項目指南](https://github.com/datawhalechina/DOPMC/blob/main/GUIDE.md)進行操作即可~

## 關注我們

<div align=center>
<p>掃描下方二維碼關注公衆號：Datawhale</p>
<img src="https://raw.githubusercontent.com/datawhalechina/pumpkin-book/master/res/qrcode.jpeg" width = "180" height = "180">
</div>

## LICENSE

<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="知識共享許可協議" style="border-width:0" src="https://img.shields.io/badge/license-CC%20BY--NC--SA%204.0-lightgrey" /></a><br />本作品採用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議</a>進行許可。

vibe-vibe-tw

vibe-vibe-tw Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vibe-vibe-tw

vibe-vibe-tw Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README