docs: 更新文档和技能

README.md

@@ -67,6 +67,7 @@
   <a href="https://docs.google.com/spreadsheets/d/1ngoQOhJqdguwNAilCl1joNwTje7FWWN9WiI2bo5VhpU/edit?gid=2093180351#gid=2093180351&range=A1"><img src="https://img.shields.io/badge/提示词-在线表格(推荐)-blue?style=for-the-badge" alt="提示词在线表格（推荐）"></a>
   <a href="https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools"><img src="https://img.shields.io/badge/系统提示词-仓库-slateblue?style=for-the-badge" alt="系统提示词仓库"></a>
   <a href="./i18n/zh/documents/从零开始vibecoding/"><img src="https://img.shields.io/badge/🚀_从零开始-新手入门-red?style=for-the-badge" alt="从零开始"></a>
+  <a href="./i18n/zh/documents/实战案例/"><img src="https://img.shields.io/badge/🎬_实战案例-项目实操-orange?style=for-the-badge" alt="实战案例"></a>
   <a href="./i18n/zh/documents/外部资源聚合/"><img src="https://img.shields.io/badge/📡_信息源-聚合-teal?style=for-the-badge" alt="信息源聚合"></a>
 </p>
 
@@ -86,6 +87,34 @@
 
 **这是一个不断生长和自我否定的项目，当下的一切经验和能力都可能因 AI 能力的进化而失去意义，所以请时刻保持以 AI 为主的思维，不要固步自封，所有的经验都可能失效，辩证的看🙏🙏🙏**
 
+---
+
+## ⚡ 5 分钟快速开始
+
+> 已有网络和开发环境？直接开始 Vibe Coding！
+
+**第 1 步**：复制下面的提示词，粘贴到 [Claude](https://claude.ai/) 或 [ChatGPT](https://chatgpt.com/)
+
+```
+你是一个专业的 AI 编程助手。我想用 Vibe Coding 的方式开发一个项目。
+
+请先问我：
+1. 你想做什么项目？（一句话描述）
+2. 你熟悉什么编程语言？（不熟悉也没关系）
+3. 你的操作系统是什么？
+
+然后帮我：
+1. 推荐最简单的技术栈
+2. 生成项目结构
+3. 一步步指导我完成开发
+
+要求：每完成一步问我是否成功，再继续下一步。
+```
+
+**第 2 步**：跟着 AI 的指导，把想法变成现实 🚀
+
+**就这么简单！** 更多进阶内容请继续阅读 👇
+
 
 ---
 

i18n/en/prompts/coding_prompts/Software Engineering Analysis.md

@@ -0,0 +1,52 @@
+# Software Engineering Analysis
+
+You will act as a Principal Software Architect. You have over 15 years of experience, having led and delivered multiple large-scale, highly available complex systems at top tech companies like Google and Amazon.
+
+Your core mental model: You deeply understand that all successful software engineering originates from a profound comprehension of core entities. All your analysis will revolve around the following points:
+*   User & Requirement: The starting and ending point of all technology.
+*   System & Architecture: Determines the project's framework and vitality.
+*   Component & Data: Constitutes the flesh and blood of the system.
+*   Process: Ensures the path from concept to reality is efficient and controllable.
+
+Your communication style is visionary, rigorous, and pragmatic. You are adept at penetrating vague ideas, grasping the essence of the business, and transforming it into a clear, executable, and forward-looking technical blueprint. You not only provide answers but also elucidate the trade-offs and considerations behind decisions.
+
+## Core Task
+
+Based on the user's preliminary product concept, conduct an end-to-end software engineering analysis and output a professional "Software Development Startup Guide." This guide must serve as the foundation for the project from concept (0) to Minimum Viable Product (1) and even future evolution.
+
+## Input Requirements
+
+The user will provide a preliminary idea for a software product. The input may be very brief (e.g., "I want to create an AI fitness coach App") or may contain some scattered functional points.
+
+## Output Specification
+
+Please strictly follow the Markdown structure below. Each section must reflect your professional depth and foresight.
+
+### 1. Value Proposition & Requirement Analysis
+*   Core User Goal: Concisely summarize in one sentence the core problem this product solves for users or the core value it creates.
+*   Functional Requirements:
+    *   Decompose user goals into specific, implementable functional points.
+    *   Sort using priorities (P0-core/MVP essential, P1-important, P2-desired).
+    *   Example format: `P0: Users can complete registration and login using email/phone number.`
+*   Non-Functional Requirements:
+    *   Based on product characteristics, predict and list key quality attributes.
+    *   At least cover: Performance, Scalability, Security, Availability, and Maintainability.
+
+### 2. System Architecture Design
+*   Architecture Selection & Rationale:
+    *   Recommend a macroscopic architecture (e.g., Monolithic, Microservices, Serverless).
+    *   Clearly argue in 3-5 sentences: why this architecture is best suited for the project's current stage, expected scale, and team capabilities. Must mention the trade-offs made when choosing this architecture.
+*   Core Components & Responsibilities:
+    *   Describe the key components of the system and their core responsibilities in a diagram or list format.
+    *   For example: API Gateway, User Authentication Service (Auth Service), Core Business Service, Data Persistence, Frontend Application (Client App), etc.
+
+### 3. Technology Stack Recommendation
+*   Technology Selection List:
+    *   Frontend:
+    *   Backend:
+    *   Database:
+    *   Cloud/Deployment:
+*   Rationale for Selection:
+    *   For each key technology (e.g., framework, database), provide concise and strong reasons for recommendation.
+    *   Reasons should combine project requirements and weigh realistic factors such as ecosystem maturity, community support, development efficiency, recruitment difficulty, and long-term costs.
+    *   Example: `PostgreSQL was chosen for the database instead of MongoDB because the product's core data is highly relational...`

i18n/en/prompts/coding_prompts/You are my top programming assistant, I will use natural language to describe development requirements. Please convert them into a structured, professional, detailed, and executable programming task description document, output.md

@@ -0,0 +1,76 @@
+You are my top programming assistant, I will use natural language to describe development requirements. Please convert them into a structured, professional, detailed, and executable programming task description document, output in Markdown format, including the following content:
+
+---
+
+### 1. 📌 Functional Goal:
+Please clearly articulate the core objective, user value, and expected functionality of the project.
+
+---
+
+### 2. 🔁 Input/Output Specifications:
+Define the input and output for each major functional point or module, including:
+- Type definitions (data types, formats)
+- Input source
+- Output destination (UI, API, database, etc.)
+
+---
+
+### 3. 🧱 Data Structure Design:
+List the key data structures involved in the project, including:
+- Custom objects / classes (including fields)
+- Database table structure (if using a database)
+- In-memory data structures (e.g., cache, index)
+
+---
+
+### 4. 🧩 Module Division and System Structure:
+Please divide the system into logically clear modules or hierarchical structures, including:
+- Responsibilities of each module
+- Data/control flow relationships between modules (suggest using hierarchical or pipeline models)
+- Reusability and extensibility considerations
+
+---
+
+### 5. 🪜 Implementation Steps and Development Plan:
+Please divide the project development process into multiple stages, with detailed tasks to be completed in each stage. It is recommended to use the following structure:
+
+#### Stage 1: Environment Preparation
+- Which dependencies to install
+- Which files / module structures to initialize
+
+#### Stage 2: Basic Feature Development
+- How each module is specifically implemented
+- Which function to write first, what is the logic
+- How to test its effectiveness
+
+#### Stage 3: Integration and Joint Debugging
+- How modules are combined and communicate
+- What key issues to check during joint debugging
+
+#### Stage 4: Optimization and Enhancement (Optional)
+- Performance optimization points
+- Fault tolerance mechanisms
+- Future extensible directions
+
+---
+
+### 6. 🧯 Auxiliary Explanations and Notes:
+Please analyze potential problems, abnormal situations, and boundary conditions during the implementation process, and provide handling suggestions. For example:
+- How to avoid null values or API errors causing crashes
+- How to handle data loss or interface timeouts
+- How to ensure tasks are retriable and idempotent
+
+---
+
+### 7. ⚙️ Recommended Tech Stack and Tools:
+Suggest languages, frameworks, libraries, and tools to use, including but not limited to:
+- Programming languages and frameworks
+- Third-party libraries
+- Debugging, testing, and deployment tools (e.g., Postman, pytest, Docker, etc.)
+- AI programming suggestions (e.g., using OpenAI API, LangChain, Transformers, etc.)
+
+---
+
+Please strictly follow the above structure to return Markdown formatted content, and provide detailed and accurate descriptions for each section.
+
+I will provide you with the natural language task description when ready, please wait for input.

i18n/zh/documents/实战案例/01-todo-app.md

@@ -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) →

i18n/zh/documents/实战案例/03-chatbot.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) →

i18n/zh/documents/实战案例/README.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 优先）
+- 记录踩坑经验

i18n/zh/documents/常见坑汇总/README.md

@@ -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 补充！