mirror of
https://github.com/tradecatlabs/vibe-coding-cn.git
synced 2026-08-24 00:08:06 +00:00
docs: 更新文档和技能
This commit is contained in:
tukuaiai
@@ -0,0 +1,117 @@
|
||||
# 🎯 实战案例：30 分钟做一个 Todo App
|
||||
|
||||
> 难度：⭐ 入门 | 技术栈：HTML/CSS/JS | 耗时：30 分钟
|
||||
|
||||
---
|
||||
|
||||
## 最终效果
|
||||
|
||||
<!-- TODO: 添加 GIF 演示 -->
|
||||
一个简洁的待办事项应用，支持：
|
||||
- ✅ 添加任务
|
||||
- ✅ 完成/取消完成
|
||||
- ✅ 删除任务
|
||||
- ✅ 本地存储（刷新不丢失）
|
||||
|
||||
---
|
||||
|
||||
## 第 1 步：启动对话
|
||||
|
||||
复制以下提示词，粘贴到 [Claude](https://claude.ai/) 或 [ChatGPT](https://chatgpt.com/)：
|
||||
|
||||
```
|
||||
你是一个专业的前端开发助手。我想用 Vibe Coding 的方式做一个 Todo App。
|
||||
|
||||
项目要求：
|
||||
- 纯 HTML/CSS/JS，不用任何框架
|
||||
- 单文件实现（一个 index.html）
|
||||
- 功能：添加任务、完成任务、删除任务
|
||||
- 数据存到 localStorage，刷新不丢失
|
||||
- 界面简洁美观，有动画效果
|
||||
|
||||
请直接给我完整代码，我复制到 index.html 就能运行。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 第 2 步：获取代码
|
||||
|
||||
AI 会给你一个完整的 `index.html` 文件，大约 150-200 行代码。
|
||||
|
||||
**示例代码结构**：
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Todo App</title>
|
||||
<style>
|
||||
/* 样式代码 */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>📝 我的待办</h1>
|
||||
<input type="text" id="input" placeholder="添加新任务...">
|
||||
<ul id="list"></ul>
|
||||
</div>
|
||||
<script>
|
||||
// JS 代码
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 第 3 步：运行测试
|
||||
|
||||
1. 新建文件 `index.html`
|
||||
2. 粘贴 AI 给的代码
|
||||
3. 双击打开，或用 VS Code Live Server
|
||||
|
||||
---
|
||||
|
||||
## 第 4 步：迭代优化
|
||||
|
||||
不满意？继续对话：
|
||||
|
||||
```
|
||||
请帮我优化：
|
||||
1. 添加深色模式切换
|
||||
2. 任务支持拖拽排序
|
||||
3. 添加任务分类功能
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 踩坑记录
|
||||
|
||||
| 问题 | 解决方案 |
|
||||
|:---|:---|
|
||||
| localStorage 报错 | 用浏览器打开，不要直接双击 file:// |
|
||||
| 样式不生效 | 检查 CSS 是否在 `<style>` 标签内 |
|
||||
| 刷新数据丢失 | 检查 localStorage.setItem 是否正确调用 |
|
||||
|
||||
---
|
||||
|
||||
## 进阶挑战
|
||||
|
||||
完成基础版后，尝试：
|
||||
|
||||
1. **添加截止日期** - 支持设置 deadline
|
||||
2. **添加优先级** - 高/中/低三档
|
||||
3. **添加搜索** - 快速查找任务
|
||||
4. **PWA 化** - 可安装到桌面
|
||||
|
||||
---
|
||||
|
||||
## 学到了什么
|
||||
|
||||
- ✅ Vibe Coding 基本流程：描述需求 → 获取代码 → 运行测试 → 迭代优化
|
||||
- ✅ 单文件 Web 应用结构
|
||||
- ✅ localStorage 本地存储
|
||||
- ✅ 如何与 AI 迭代优化代码
|
||||
|
||||
---
|
||||
|
||||
**下一个案例**：[个人博客](./02-blog.md) →
|
||||
@@ -0,0 +1,130 @@
|
||||
# 🤖 实战案例：1 小时做一个 AI 聊天机器人
|
||||
|
||||
> 难度：⭐⭐ 初级 | 技术栈：Python/FastAPI | 耗时：1 小时
|
||||
|
||||
---
|
||||
|
||||
## 最终效果
|
||||
|
||||
<!-- TODO: 添加 GIF 演示 -->
|
||||
一个简单的 AI 聊天机器人，支持：
|
||||
- ✅ Web 界面对话
|
||||
- ✅ 接入 OpenAI/Claude API
|
||||
- ✅ 流式输出（打字机效果）
|
||||
- ✅ 对话历史记录
|
||||
|
||||
---
|
||||
|
||||
## 前置条件
|
||||
|
||||
- Python 3.8+
|
||||
- OpenAI API Key（或其他 LLM API）
|
||||
|
||||
---
|
||||
|
||||
## 第 1 步：启动对话
|
||||
|
||||
复制以下提示词：
|
||||
|
||||
```
|
||||
你是一个 Python 后端开发助手。我想用 Vibe Coding 的方式做一个 AI 聊天机器人。
|
||||
|
||||
项目要求：
|
||||
- 后端：FastAPI
|
||||
- 前端：简单 HTML 页面（内嵌在 FastAPI 中）
|
||||
- 功能：用户输入问题，调用 OpenAI API 返回回答
|
||||
- 支持流式输出（SSE）
|
||||
- 界面简洁，类似 ChatGPT
|
||||
|
||||
请给我：
|
||||
1. 项目结构
|
||||
2. requirements.txt
|
||||
3. 完整代码
|
||||
4. 运行命令
|
||||
|
||||
我的 OpenAI API Key 会通过环境变量 OPENAI_API_KEY 传入。
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 第 2 步：创建项目
|
||||
|
||||
AI 会给你类似这样的结构：
|
||||
|
||||
```
|
||||
chatbot/
|
||||
├── main.py # FastAPI 主程序
|
||||
├── requirements.txt # 依赖
|
||||
└── .env # API Key（自己创建）
|
||||
```
|
||||
|
||||
**requirements.txt**：
|
||||
```
|
||||
fastapi
|
||||
uvicorn
|
||||
openai
|
||||
python-dotenv
|
||||
sse-starlette
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 第 3 步：运行
|
||||
|
||||
```bash
|
||||
# 安装依赖
|
||||
pip install -r requirements.txt
|
||||
|
||||
# 设置 API Key
|
||||
export OPENAI_API_KEY="sk-xxx"
|
||||
|
||||
# 启动服务
|
||||
uvicorn main:app --reload
|
||||
```
|
||||
|
||||
打开 http://localhost:8000 即可使用。
|
||||
|
||||
---
|
||||
|
||||
## 第 4 步：迭代优化
|
||||
|
||||
```
|
||||
请帮我添加：
|
||||
1. 对话历史保存到文件
|
||||
2. 支持切换不同模型（GPT-4/GPT-3.5）
|
||||
3. 添加系统提示词设置
|
||||
4. 支持 Markdown 渲染
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 踩坑记录
|
||||
|
||||
| 问题 | 解决方案 |
|
||||
|:---|:---|
|
||||
| API Key 无效 | 检查环境变量是否正确设置 |
|
||||
| 跨域错误 | FastAPI 添加 CORS 中间件 |
|
||||
| 流式输出不工作 | 检查 SSE 配置，前端用 EventSource |
|
||||
| 中文乱码 | 确保 response 设置 `charset=utf-8` |
|
||||
|
||||
---
|
||||
|
||||
## 进阶挑战
|
||||
|
||||
1. **添加 RAG** - 让机器人能读取本地文档
|
||||
2. **多轮对话** - 保持上下文记忆
|
||||
3. **部署上线** - 部署到 Vercel/Railway
|
||||
4. **接入微信** - 做成微信机器人
|
||||
|
||||
---
|
||||
|
||||
## 学到了什么
|
||||
|
||||
- ✅ FastAPI 基础用法
|
||||
- ✅ OpenAI API 调用
|
||||
- ✅ SSE 流式输出
|
||||
- ✅ 前后端一体化开发
|
||||
|
||||
---
|
||||
|
||||
← [Todo App](./01-todo-app.md) | **下一个案例**：[全栈 SaaS](./04-saas.md) →
|
||||
@@ -0,0 +1,38 @@
|
||||
# 🎬 实战案例
|
||||
|
||||
> 从 0 到 1 的完整 Vibe Coding 项目案例
|
||||
|
||||
---
|
||||
|
||||
## 案例列表
|
||||
|
||||
| 案例 | 难度 | 技术栈 | 耗时 | 状态 |
|
||||
|:---|:---|:---|:---|:---|
|
||||
| [Todo App](./01-todo-app.md) | ⭐ 入门 | HTML/CSS/JS | 30 分钟 | 待补充 |
|
||||
| [个人博客](./02-blog.md) | ⭐⭐ 初级 | Next.js | 2 小时 | 待补充 |
|
||||
| [AI 聊天机器人](./03-chatbot.md) | ⭐⭐ 初级 | Python/FastAPI | 1 小时 | 待补充 |
|
||||
| [全栈 SaaS](./04-saas.md) | ⭐⭐⭐ 中级 | Next.js/Supabase | 1 天 | 待补充 |
|
||||
| [Chrome 插件](./05-chrome-extension.md) | ⭐⭐ 初级 | JS/Chrome API | 2 小时 | 待补充 |
|
||||
|
||||
---
|
||||
|
||||
## 案例格式
|
||||
|
||||
每个案例包含：
|
||||
|
||||
1. **项目目标** - 一句话说明要做什么
|
||||
2. **最终效果** - GIF/截图展示
|
||||
3. **使用的提示词** - 完整可复制
|
||||
4. **踩坑记录** - 遇到的问题和解决方案
|
||||
5. **完整代码** - GitHub 链接或代码片段
|
||||
|
||||
---
|
||||
|
||||
## 贡献案例
|
||||
|
||||
欢迎提交你的 Vibe Coding 实战案例！
|
||||
|
||||
格式要求：
|
||||
- 必须包含完整提示词
|
||||
- 必须有效果展示（GIF 优先）
|
||||
- 记录踩坑经验
|
||||
@@ -0,0 +1,105 @@
|
||||
# 🕳️ 常见坑汇总
|
||||
|
||||
> Vibe Coding 过程中的常见问题和解决方案
|
||||
|
||||
---
|
||||
|
||||
<details open>
|
||||
<summary><strong>🤖 AI 对话相关</strong></summary>
|
||||
|
||||
| 问题 | 原因 | 解决方案 |
|
||||
|:---|:---|:---|
|
||||
| AI 生成的代码跑不起来 | 上下文不足 | 提供完整错误信息，说明运行环境 |
|
||||
| AI 反复修改同一个问题 | 陷入循环 | 换个思路描述，或开新对话 |
|
||||
| AI 幻觉，编造不存在的 API | 模型知识过时 | 提供官方文档链接，让 AI 参考 |
|
||||
| 代码越改越乱 | 没有规划 | 先让 AI 出方案，确认后再写代码 |
|
||||
| AI 不理解我的需求 | 描述模糊 | 用具体例子说明，给输入输出示例 |
|
||||
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
<details open>
|
||||
<summary><strong>🔧 环境配置相关</strong></summary>
|
||||
|
||||
| 问题 | 原因 | 解决方案 |
|
||||
|:---|:---|:---|
|
||||
| npm install 报错 | 网络问题 | 换源：`npm config set registry https://registry.npmmirror.com` |
|
||||
| pip install 超时 | 网络问题 | 换源：`pip install -i https://pypi.tuna.tsinghua.edu.cn/simple` |
|
||||
| 命令找不到 | 环境变量没配 | 检查 PATH，重启终端 |
|
||||
| 端口被占用 | 上次没关干净 | `lsof -i :端口号` 找到进程 kill 掉 |
|
||||
| 权限不足 | Linux/Mac 权限 | `chmod +x` 或 `sudo` |
|
||||
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
<details open>
|
||||
<summary><strong>🌐 网络相关</strong></summary>
|
||||
|
||||
| 问题 | 原因 | 解决方案 |
|
||||
|:---|:---|:---|
|
||||
| GitHub 访问慢/超时 | 网络限制 | 配置代理，参考 [网络环境配置](../从零开始vibecoding/01-网络环境配置.md) |
|
||||
| API 调用失败 | 网络/Key 问题 | 检查代理、API Key 是否有效 |
|
||||
| 终端不走代理 | 代理配置不全 | 设置 `http_proxy` 和 `https_proxy` 环境变量 |
|
||||
| SSL 证书错误 | 代理/时间问题 | 检查系统时间，或临时关闭 SSL 验证 |
|
||||
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
<details open>
|
||||
<summary><strong>📝 代码相关</strong></summary>
|
||||
|
||||
| 问题 | 原因 | 解决方案 |
|
||||
|:---|:---|:---|
|
||||
| 代码文件太大，AI 处理不了 | 超出上下文 | 拆分文件，只给 AI 相关部分 |
|
||||
| 改了代码没生效 | 缓存/没保存 | 清缓存、确认保存、重启服务 |
|
||||
| 合并代码冲突 | Git 冲突 | 让 AI 帮你解决：贴出冲突内容 |
|
||||
| 依赖版本冲突 | 版本不兼容 | 指定版本号，或用虚拟环境隔离 |
|
||||
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
<details>
|
||||
<summary><strong>🎯 Claude Code / Cursor 相关</strong></summary>
|
||||
|
||||
| 问题 | 原因 | 解决方案 |
|
||||
|:---|:---|:---|
|
||||
| Claude Code 连不上 | 网络/认证 | 检查代理，重新 `claude login` |
|
||||
| Cursor 补全很慢 | 网络延迟 | 检查代理配置 |
|
||||
| 额度用完了 | 免费额度有限 | 换账号或升级付费 |
|
||||
| 规则文件不生效 | 路径/格式错误 | 检查 `.cursorrules` 或 `CLAUDE.md` 位置 |
|
||||
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
<details>
|
||||
<summary><strong>🚀 部署相关</strong></summary>
|
||||
|
||||
| 问题 | 原因 | 解决方案 |
|
||||
|:---|:---|:---|
|
||||
| 本地能跑，部署失败 | 环境差异 | 检查 Node/Python 版本，环境变量 |
|
||||
| 构建超时 | 项目太大 | 优化依赖，增加构建时间限制 |
|
||||
| 环境变量没生效 | 没配置 | 在部署平台设置环境变量 |
|
||||
| CORS 跨域错误 | 后端没配置 | 添加 CORS 中间件 |
|
||||
|
||||
</details>
|
||||
|
||||
---
|
||||
|
||||
## 💡 通用排查思路
|
||||
|
||||
1. **看错误信息** - 完整复制给 AI
|
||||
2. **最小复现** - 找到最简单能复现问题的代码
|
||||
3. **二分法** - 注释一半代码，定位问题范围
|
||||
4. **换环境** - 换浏览器/终端/设备试试
|
||||
5. **重启大法** - 重启服务/编辑器/电脑
|
||||
|
||||
---
|
||||
|
||||
## 📝 贡献
|
||||
|
||||
遇到新坑？欢迎 PR 补充！
|
||||
Reference in New Issue
Block a user