vibe-coding-cn/i18n/zh/documents/实战案例

🎬 实战案例

从 0 到 1 的完整 Vibe Coding 项目案例

---

案例列表

案例	难度	技术栈	耗时	状态
Todo App	⭐ 入门	HTML/CSS/JS	30 分钟	✅ 完成
个人博客	⭐⭐ 中等	Next.js/MDX	2-4 小时	✅ 完成
AI 聊天机器人	⭐⭐ 中等	Python/FastAPI	1-2 小时	✅ 完成
命令行工具	⭐⭐ 中等	Python/Click	1-2 小时	✅ 完成
Chrome 扩展	⭐⭐ 中等	JS/Chrome API	2-3 小时	✅ 完成

---

快速开始

每个案例都包含：

1. 开始前的提示词 - 直接复制给 AI
2. 项目结构 - 清晰的目录规划
3. 核心代码 - 关键实现片段
4. 验收清单 - 确保功能完整
5. 进阶挑战 - 继续提升

使用方式

1. 选择一个感兴趣的案例
2. 复制「第一步」的提示词给 AI
3. 跟着 AI 的指导一步步完成
4. 对照验收清单检查功能

---

案例详情

⭐ 入门级

Todo App

最简单的入门项目，30 分钟完成一个待办事项应用。

• 技术栈：纯 HTML/CSS/JavaScript
• 学习重点：DOM 操作、本地存储

⭐⭐ 中等级

个人博客

构建一个支持 Markdown 的个人博客系统。

• 技术栈：Next.js + MDX + Tailwind CSS
• 学习重点：静态生成、文件系统路由

AI 聊天机器人

接入 AI API 的聊天机器人。

• 技术栈：Python + FastAPI + OpenAI API
• 学习重点：API 调用、流式响应

命令行工具

实用的文件批量重命名工具。

• 技术栈：Python + Click + Rich
• 学习重点：CLI 开发、文件操作

Chrome 扩展

网页笔记助手浏览器扩展。

• 技术栈：JavaScript + Chrome API
• 学习重点：扩展开发、本地存储

---

贡献案例

欢迎提交你的 Vibe Coding 实战案例！

格式要求

# 实战案例：项目名称

> 难度：⭐⭐ | 预计时间：X 小时 | 技术栈：XXX

## 🎯 项目目标
## 📋 开始前的准备
## 🏗️ 项目结构
## 🔧 核心代码
## 🚀 部署/使用
## ✅ 验收清单
## 💡 进阶挑战

提交方式

1. Fork 本仓库
2. 在 i18n/zh/documents/实战案例/ 添加案例文件
3. 更新本 README 的案例列表
4. 提交 Pull Request

---

相关资源

• 从零开始 Vibe Coding
• 常见坑汇总
• 提示词库