charieswei
/
vibe-coding-cn
mirror of https://github.com/tukuaiai/vibe-coding-cn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 自动化项目丰富 - 添加 CI/CD、实战案例和提示词 

## 新增内容

### GitHub Actions 工作流
- ci.yml: Markdown lint、链接检查、项目结构验证
- welcome.yml: 自动欢迎新贡献者
- labeler.yml: PR 自动标签

### Issue 模板
- prompt_contribution.md: 提示词贡献模板
- documentation.md: 文档改进模板
- config.yml: 模板配置（含社区链接）

### 实战案例
- 02-blog-system.md: 个人博客系统（Next.js + MDX）
- 04-cli-tool.md: 命令行工具（Python + Click）
- 05-chrome-extension.md: Chrome 扩展（网页笔记助手）

### 编程提示词
- debug-expert.md: 调试专家提示词
- code-review.md: 代码审查提示词
- architecture-design.md: 架构设计提示词

## 相关 Issues
- #5 完善 Wiki 文档
- #6 添加更多实战案例
- #7 扩充提示词库
- #8 激活社区讨论
This commit is contained in:
tukuaiai 2025-12-18 16:13:40 +08:00
parent bfa0694868
commit 5423dd1fe8
14 changed files with 2049 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View File

@ -0,0 +1,11 @@
blank_issues_enabled: true
contact_links:
- name: 💬 Telegram 交流群
url: https://t.me/glue_coding
about: 加入我们的 Telegram 群组讨论问题
- name: 📢 Telegram 频道
url: https://t.me/tradecat_ai_channel
about: 关注项目更新和资讯
- name: 📖 在线提示词表格
url: https://docs.google.com/spreadsheets/d/1ngoQOhJqdguwNAilCl1joNwTje7FWWN9WiI2bo5VhpU/edit?gid=2093180351
about: 查看和使用提示词库

29
.github/ISSUE_TEMPLATE/documentation.md vendored Normal file
View File

@ -0,0 +1,29 @@
---
name: 文档改进
about: 报告文档问题或建议改进
title: "[Docs]: "
labels: documentation
assignees: ''
---
**文档位置**
请提供需要改进的文档路径或链接。
**问题类型**
- [ ] 内容错误
- [ ] 内容过时
- [ ] 内容缺失
- [ ] 表述不清
- [ ] 链接失效
- [ ] 格式问题
- [ ] 翻译问题
**问题描述**
清晰描述文档存在的问题。
**建议改进**
如果有具体的改进建议，请在此描述。
**附加信息**
任何其他相关信息。

38
.github/ISSUE_TEMPLATE/prompt_contribution.md vendored Normal file
View File

@ -0,0 +1,38 @@
---
name: 提示词贡献
about: 分享一个有用的提示词
title: "[Prompt]: "
labels: prompts, contribution
assignees: ''
---
**提示词名称**
给这个提示词起一个简洁的名字。
**提示词分类**
- [ ] 系统提示词 (system_prompts)
- [ ] 编程提示词 (coding_prompts)
- [ ] 用户提示词 (user_prompts)
- [ ] 辅助提示词 (assistant_prompts)
- [ ] 元提示词 (meta_prompts)
**提示词内容**
```
在这里粘贴你的提示词内容
```
**使用场景**
描述这个提示词适用于什么场景。
**效果示例**
如果可能，提供使用这个提示词的效果示例或截图。
**适用模型**
- [ ] Claude
- [ ] GPT
- [ ] Gemini
- [ ] 其他: ___
**附加说明**
任何其他需要说明的内容。

45
.github/labeler.yml vendored Normal file
View File

@ -0,0 +1,45 @@
# 文档相关
documentation:
- changed-files:
- any-glob-to-any-file:
- '**/*.md'
- 'docs/**'
- 'i18n/**/documents/**'
# 提示词相关
prompts:
- changed-files:
- any-glob-to-any-file:
- 'i18n/**/prompts/**'
- 'libs/external/prompts-library/**'
# 技能相关
skills:
- changed-files:
- any-glob-to-any-file:
- 'i18n/**/skills/**'
# 工具相关
tools:
- changed-files:
- any-glob-to-any-file:
- 'libs/**'
- 'backups/**'
# 国际化
i18n:
- changed-files:
- any-glob-to-any-file:
- 'i18n/**'
# CI/CD
ci:
- changed-files:
- any-glob-to-any-file:
- '.github/**'
# 中文内容
chinese:
- changed-files:
- any-glob-to-any-file:
- 'i18n/zh/**'

60
.github/workflows/ci.yml vendored Normal file
View File

@ -0,0 +1,60 @@
name: CI
on:
push:
branches: [main, master]
pull_request:
branches: [main, master]
jobs:
lint-markdown:
name: Lint Markdown
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install markdownlint-cli
run: npm install -g markdownlint-cli
- name: Run markdownlint
run: markdownlint '**/*.md' --ignore node_modules --ignore libs/external || true
check-links:
name: Check Links
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Link Checker
uses: lycheeverse/lychee-action@v1
with:
args: --verbose --no-progress './**/*.md' --exclude-path libs/external
fail: false
validate-structure:
name: Validate Project Structure
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Check required files
run: |
echo "Checking required files..."
files=("README.md" "LICENSE" "CONTRIBUTING.md" "CODE_OF_CONDUCT.md" "AGENTS.md" "CLAUDE.md")
for file in "${files[@]}"; do
if [ -f "$file" ]; then
echo "✓ $file exists"
else
echo "✗ $file missing"
fi
done
- name: Check i18n structure
run: |
echo "Checking i18n directories..."
for lang in zh en; do
if [ -d "i18n/$lang" ]; then
echo "✓ i18n/$lang exists"
else
echo "✗ i18n/$lang missing"
fi
done

16
.github/workflows/labeler.yml vendored Normal file
View File

@ -0,0 +1,16 @@
name: Auto Labeler
on:
pull_request:
types: [opened, synchronize]
jobs:
label:
runs-on: ubuntu-latest
permissions:
contents: read
pull-requests: write
steps:
- uses: actions/labeler@v5
with:
repo-token: "${{ secrets.GITHUB_TOKEN }}"

42
.github/workflows/welcome.yml vendored Normal file
View File

@ -0,0 +1,42 @@
name: Welcome New Contributors
on:
issues:
types: [opened]
pull_request:
types: [opened]
jobs:
welcome:
runs-on: ubuntu-latest
permissions:
issues: write
pull-requests: write
steps:
- uses: actions/first-interaction@v1
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
issue-message: |
👋 感谢您提交第一个 Issue！
我们非常重视您的反馈。请确保：
- 已阅读 [贡献指南](CONTRIBUTING.md)
- 提供了足够的上下文信息
- 如果是 Bug，请提供复现步骤
我们会尽快回复您！🚀
---
Thanks for opening your first issue! We'll get back to you soon.
pr-message: |
🎉 感谢您提交第一个 Pull Request！
这是您对本项目的首次贡献，我们非常感激！请确保：
- PR 描述清晰说明了改动内容
- 代码符合项目规范
- 已更新相关文档（如适用）
我们会尽快审核您的代码！💪
---
Thanks for your first PR! We'll review it soon.

209
i18n/zh/documents/实战案例/02-blog-system.md Normal file
View File

@ -0,0 +1,209 @@
# 实战案例：个人博客系统
> 难度：⭐⭐ 中等 | 预计时间：2-4 小时 | 技术栈：Next.js + MDX
## 🎯 项目目标
构建一个支持 Markdown 的个人博客系统，具备：
- 文章列表和详情页
- 标签分类
- 代码高亮
- 响应式设计
## 📋 开始前的准备
### 环境要求
- Node.js 18+
- 包管理器（npm/pnpm/yarn）
### 第一步：需求澄清
复制以下提示词给 AI：
```
我想用 Vibe Coding 的方式开发一个个人博客系统。
技术要求：
- 框架：Next.js 14 (App Router)
- 内容：MDX 格式的 Markdown 文章
- 样式：Tailwind CSS
- 部署：Vercel
功能需求：
1. 首页显示文章列表（标题、日期、摘要）
2. 文章详情页（支持代码高亮）
3. 标签页面（按标签筛选文章）
4. 关于页面
请帮我：
1. 确认技术栈是否合适
2. 生成项目结构
3. 一步步指导我完成开发
要求：每完成一步问我是否成功，再继续下一步。
```
## 🏗️ 项目结构
```
my-blog/
├── app/
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页
│ ├── posts/
│ │ └── [slug]/
│ │ └── page.tsx # 文章详情
│ ├── tags/
│ │ └── [tag]/
│ │ └── page.tsx # 标签页
│ └── about/
│ └── page.tsx # 关于页
├── components/
│ ├── Header.tsx
│ ├── Footer.tsx
│ ├── PostCard.tsx
│ └── MDXContent.tsx
├── content/
│ └── posts/ # MDX 文章
│ ├── hello-world.mdx
│ └── vibe-coding.mdx
├── lib/
│ └── posts.ts # 文章处理逻辑
└── tailwind.config.js
```
## 🔧 核心代码片段
### 文章处理逻辑 (lib/posts.ts)
```typescript
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
const postsDirectory = path.join(process.cwd(), 'content/posts')
export interface Post {
slug: string
title: string
date: string
tags: string[]
excerpt: string
content: string
}
export function getAllPosts(): Post[] {
const fileNames = fs.readdirSync(postsDirectory)
const posts = fileNames
.filter(name => name.endsWith('.mdx'))
.map(fileName => {
const slug = fileName.replace(/\.mdx$/, '')
const fullPath = path.join(postsDirectory, fileName)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const { data, content } = matter(fileContents)
return {
slug,
title: data.title,
date: data.date,
tags: data.tags || [],
excerpt: data.excerpt || content.slice(0, 150),
content
}
})
.sort((a, b) => (a.date < b.date ? 1 : -1))
return posts
}
export function getPostBySlug(slug: string): Post | undefined {
return getAllPosts().find(post => post.slug === slug)
}
```
### 文章卡片组件 (components/PostCard.tsx)
```tsx
import Link from 'next/link'
import { Post } from '@/lib/posts'
export function PostCard({ post }: { post: Post }) {
return (
<article className="border-b border-gray-200 py-6">
<Link href={`/posts/${post.slug}`}>
<h2 className="text-xl font-bold hover:text-blue-600">
{post.title}
</h2>
</Link>
<time className="text-sm text-gray-500">{post.date}</time>
<p className="mt-2 text-gray-600">{post.excerpt}</p>
<div className="mt-2 flex gap-2">
{post.tags.map(tag => (
<Link
key={tag}
href={`/tags/${tag}`}
className="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200"
>
#{tag}
</Link>
))}
</div>
</article>
)
}
```
## 📝 示例文章格式
```mdx
---
title: "Hello World"
date: "2024-01-01"
tags: ["入门", "博客"]
excerpt: "这是我的第一篇博客文章"
---
# Hello World
欢迎来到我的博客！
## 代码示例
```javascript
console.log('Hello, Vibe Coding!')
```
## 总结
这就是我的第一篇文章。
```
## 🚀 部署步骤
1. 推送代码到 GitHub
2. 在 Vercel 导入项目
3. 自动部署完成
## ✅ 验收清单
- [ ] 首页正确显示文章列表
- [ ] 点击文章可以进入详情页
- [ ] 代码块有语法高亮
- [ ] 标签页面可以筛选文章
- [ ] 移动端显示正常
- [ ] 部署到 Vercel 成功
## 🔗 相关资源
- [Next.js 文档](https://nextjs.org/docs)
- [MDX 文档](https://mdxjs.com/)
- [Tailwind CSS](https://tailwindcss.com/)
## 💡 进阶挑战
完成基础版本后，可以尝试：
- 添加搜索功能
- 添加评论系统（Giscus）
- 添加 RSS 订阅
- 添加暗色模式
- 添加阅读时间估算

298
i18n/zh/documents/实战案例/04-cli-tool.md Normal file
View File

@ -0,0 +1,298 @@
# 实战案例：命令行工具
> 难度：⭐⭐ 中等 | 预计时间：1-2 小时 | 技术栈：Python + Click
## 🎯 项目目标
构建一个实用的命令行工具，实现：
- 文件批量重命名
- 支持多种命名规则
- 预览和确认机制
- 彩色输出
## 📋 开始前的准备
### 环境要求
- Python 3.8+
- pip
### 第一步：需求澄清
复制以下提示词给 AI：
```
我想用 Vibe Coding 的方式开发一个文件批量重命名的命令行工具。
技术要求：
- 语言：Python 3.8+
- CLI 框架：Click
- 输出美化：Rich
功能需求：
1. 支持多种重命名规则：
- 添加前缀/后缀
- 替换文本
- 序号命名
- 日期命名
2. 预览模式（不实际执行）
3. 递归处理子目录（可选）
4. 支持文件类型过滤
请帮我：
1. 确认技术栈是否合适
2. 生成项目结构
3. 一步步指导我完成开发
要求：每完成一步问我是否成功，再继续下一步。
```
## 🏗️ 项目结构
```
file-renamer/
├── renamer/
│ ├── __init__.py
│ ├── cli.py # CLI 入口
│ ├── core.py # 核心逻辑
│ └── rules.py # 重命名规则
├── tests/
│ └── test_core.py
├── pyproject.toml
└── README.md
```
## 🔧 核心代码
### CLI 入口 (renamer/cli.py)
```python
import click
from rich.console import Console
from rich.table import Table
from .core import FileRenamer
from .rules import PrefixRule, SuffixRule, ReplaceRule, SequenceRule
console = Console()
@click.group()
@click.version_option(version='1.0.0')
def cli():
"""文件批量重命名工具"""
pass
@cli.command()
@click.argument('directory', type=click.Path(exists=True))
@click.option('--prefix', '-p', help='添加前缀')
@click.option('--suffix', '-s', help='添加后缀')
@click.option('--replace', '-r', nargs=2, help='替换文本 (旧文本 新文本)')
@click.option('--sequence', '-n', is_flag=True, help='序号命名')
@click.option('--ext', '-e', multiple=True, help='文件扩展名过滤')
@click.option('--recursive', '-R', is_flag=True, help='递归处理子目录')
@click.option('--dry-run', '-d', is_flag=True, help='预览模式')
def rename(directory, prefix, suffix, replace, sequence, ext, recursive, dry_run):
"""批量重命名文件"""
renamer = FileRenamer(directory, recursive=recursive, extensions=ext)
# 添加规则
if prefix:
renamer.add_rule(PrefixRule(prefix))
if suffix:
renamer.add_rule(SuffixRule(suffix))
if replace:
renamer.add_rule(ReplaceRule(replace[0], replace[1]))
if sequence:
renamer.add_rule(SequenceRule())
if not renamer.rules:
console.print("[red]错误：请至少指定一个重命名规则[/red]")
return
# 获取预览
changes = renamer.preview()
if not changes:
console.print("[yellow]没有找到匹配的文件[/yellow]")
return
# 显示预览表格
table = Table(title="重命名预览")
table.add_column("原文件名", style="cyan")
table.add_column("新文件名", style="green")
for old, new in changes:
table.add_row(old, new)
console.print(table)
console.print(f"\n共 [bold]{len(changes)}[/bold] 个文件")
if dry_run:
console.print("[yellow]预览模式，未执行实际操作[/yellow]")
return
# 确认执行
if click.confirm('确认执行重命名？'):
renamer.execute()
console.print("[green]✓ 重命名完成！[/green]")
else:
console.print("[yellow]已取消[/yellow]")
if __name__ == '__main__':
cli()
```
### 核心逻辑 (renamer/core.py)
```python
import os
from pathlib import Path
from typing import List, Tuple
class FileRenamer:
def __init__(self, directory: str, recursive: bool = False, extensions: tuple = ()):
self.directory = Path(directory)
self.recursive = recursive
self.extensions = extensions
self.rules = []
def add_rule(self, rule):
self.rules.append(rule)
def get_files(self) -> List[Path]:
pattern = '**/*' if self.recursive else '*'
files = []
for path in self.directory.glob(pattern):
if path.is_file():
if self.extensions:
if path.suffix.lower() in [f'.{e.lower()}' for e in self.extensions]:
files.append(path)
else:
files.append(path)
return sorted(files)
def apply_rules(self, filename: str) -> str:
result = filename
for rule in self.rules:
result = rule.apply(result)
return result
def preview(self) -> List[Tuple[str, str]]:
changes = []
for file in self.get_files():
old_name = file.stem
new_name = self.apply_rules(old_name)
if old_name != new_name:
changes.append((file.name, new_name + file.suffix))
return changes
def execute(self):
for file in self.get_files():
old_name = file.stem
new_name = self.apply_rules(old_name)
if old_name != new_name:
new_path = file.parent / (new_name + file.suffix)
file.rename(new_path)
```
### 重命名规则 (renamer/rules.py)
```python
from abc import ABC, abstractmethod
class Rule(ABC):
@abstractmethod
def apply(self, filename: str) -> str:
pass
class PrefixRule(Rule):
def __init__(self, prefix: str):
self.prefix = prefix
def apply(self, filename: str) -> str:
return f"{self.prefix}{filename}"
class SuffixRule(Rule):
def __init__(self, suffix: str):
self.suffix = suffix
def apply(self, filename: str) -> str:
return f"{filename}{self.suffix}"
class ReplaceRule(Rule):
def __init__(self, old: str, new: str):
self.old = old
self.new = new
def apply(self, filename: str) -> str:
return filename.replace(self.old, self.new)
class SequenceRule(Rule):
def __init__(self, start: int = 1, padding: int = 3):
self.counter = start
self.padding = padding
def apply(self, filename: str) -> str:
result = f"{str(self.counter).zfill(self.padding)}_{filename}"
self.counter += 1
return result
```
## 📦 安装配置 (pyproject.toml)
```toml
[build-system]
requires = ["setuptools>=61.0"]
build-backend = "setuptools.build_meta"
[project]
name = "file-renamer"
version = "1.0.0"
description = "文件批量重命名工具"
requires-python = ">=3.8"
dependencies = [
"click>=8.0",
"rich>=13.0",
]
[project.scripts]
renamer = "renamer.cli:cli"
```
## 🚀 使用示例
```bash
# 安装
pip install -e .
# 添加前缀
renamer rename ./photos --prefix "2024_"
# 替换文本
renamer rename ./docs --replace "old" "new"
# 序号命名 + 过滤扩展名
renamer rename ./images --sequence --ext jpg --ext png
# 预览模式
renamer rename ./files --prefix "backup_" --dry-run
# 递归处理
renamer rename ./project --suffix "_v2" --recursive
```
## ✅ 验收清单
- [ ] 命令行帮助信息正确显示
- [ ] 前缀/后缀功能正常
- [ ] 替换功能正常
- [ ] 序号命名功能正常
- [ ] 预览模式不执行实际操作
- [ ] 扩展名过滤正常
- [ ] 递归处理正常
## 💡 进阶挑战
- 添加撤销功能（记录操作日志）
- 支持正则表达式
- 添加日期格式化规则
- 支持配置文件
- 添加交互式模式

402
i18n/zh/documents/实战案例/05-chrome-extension.md Normal file
View File

@ -0,0 +1,402 @@
# 实战案例：Chrome 扩展
> 难度：⭐⭐ 中等 | 预计时间：2-3 小时 | 技术栈：JavaScript + Chrome API
## 🎯 项目目标
构建一个实用的 Chrome 扩展 - **网页笔记助手**：
- 选中文本快速保存
- 自动记录来源 URL
- 本地存储笔记
- 导出功能
## 📋 开始前的准备
### 环境要求
- Chrome 浏览器
- 代码编辑器
### 第一步：需求澄清
复制以下提示词给 AI：
```
我想用 Vibe Coding 的方式开发一个 Chrome 扩展 - 网页笔记助手。
技术要求：
- Manifest V3
- 纯 JavaScript（不用框架）
- Chrome Storage API
功能需求：
1. 右键菜单：选中文本后右键保存
2. 弹出窗口：显示所有笔记
3. 自动记录：来源 URL、保存时间
4. 导出功能：导出为 JSON/Markdown
请帮我：
1. 确认技术方案
2. 生成项目结构
3. 一步步指导我完成开发
要求：每完成一步问我是否成功，再继续下一步。
```
## 🏗️ 项目结构
```
web-notes/
├── manifest.json # 扩展配置
├── background.js # 后台脚本
├── popup/
│ ├── popup.html # 弹出窗口
│ ├── popup.css
│ └── popup.js
├── icons/
│ ├── icon16.png
│ ├── icon48.png
│ └── icon128.png
└── README.md
```
## 🔧 核心代码
### 扩展配置 (manifest.json)
```json
{
"manifest_version": 3,
"name": "网页笔记助手",
"version": "1.0.0",
"description": "快速保存网页内容到本地笔记",
"permissions": [
"storage",
"contextMenus",
"activeTab"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup/popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}
```
### 后台脚本 (background.js)
```javascript
// 创建右键菜单
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: 'saveNote',
title: '保存到笔记',
contexts: ['selection']
});
});
// 处理右键菜单点击
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
if (info.menuItemId === 'saveNote' && info.selectionText) {
const note = {
id: Date.now().toString(),
text: info.selectionText,
url: tab.url,
title: tab.title,
createdAt: new Date().toISOString()
};
// 获取现有笔记
const { notes = [] } = await chrome.storage.local.get('notes');
// 添加新笔记
notes.unshift(note);
// 保存
await chrome.storage.local.set({ notes });
// 显示通知（可选）
console.log('笔记已保存:', note.text.slice(0, 50));
}
});
```
### 弹出窗口 HTML (popup/popup.html)
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="container">
<header>
<h1>📝 我的笔记</h1>
<div class="actions">
<button id="exportJson">导出 JSON</button>
<button id="exportMd">导出 MD</button>
<button id="clearAll">清空</button>
</div>
</header>
<div class="search">
<input type="text" id="searchInput" placeholder="搜索笔记...">
</div>
<div id="notesList" class="notes-list">
<!-- 笔记列表 -->
</div>
<footer>
<span id="noteCount">0 条笔记</span>
</footer>
</div>
<script src="popup.js"></script>
</body>
</html>
```
### 弹出窗口样式 (popup/popup.css)
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 400px;
max-height: 500px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.container {
padding: 16px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
header h1 {
font-size: 18px;
}
.actions button {
padding: 4px 8px;
margin-left: 4px;
font-size: 12px;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
}
.actions button:hover {
background: #f5f5f5;
}
.search input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 12px;
}
.notes-list {
max-height: 350px;
overflow-y: auto;
}
.note-item {
padding: 12px;
border: 1px solid #eee;
border-radius: 8px;
margin-bottom: 8px;
}
.note-text {
font-size: 14px;
line-height: 1.5;
margin-bottom: 8px;
}
.note-meta {
font-size: 12px;
color: #666;
}
.note-meta a {
color: #0066cc;
text-decoration: none;
}
.note-delete {
float: right;
cursor: pointer;
color: #999;
}
.note-delete:hover {
color: #ff4444;
}
footer {
margin-top: 12px;
text-align: center;
color: #666;
font-size: 12px;
}
.empty {
text-align: center;
color: #999;
padding: 40px;
}
```
### 弹出窗口逻辑 (popup/popup.js)
```javascript
let allNotes = [];
// 加载笔记
async function loadNotes() {
const { notes = [] } = await chrome.storage.local.get('notes');
allNotes = notes;
renderNotes(notes);
}
// 渲染笔记列表
function renderNotes(notes) {
const container = document.getElementById('notesList');
const countEl = document.getElementById('noteCount');
countEl.textContent = `${notes.length} 条笔记`;
if (notes.length === 0) {
container.innerHTML = '<div class="empty">暂无笔记<br>选中网页文字后右键保存</div>';
return;
}
container.innerHTML = notes.map(note => `
<div class="note-item" data-id="${note.id}">
<span class="note-delete" onclick="deleteNote('${note.id}')">✕</span>
<div class="note-text">${escapeHtml(note.text)}</div>
<div class="note-meta">
<a href="${note.url}" target="_blank">${note.title || '未知页面'}</a>
<br>
${formatDate(note.createdAt)}
</div>
</div>
`).join('');
}
// 删除笔记
async function deleteNote(id) {
allNotes = allNotes.filter(n => n.id !== id);
await chrome.storage.local.set({ notes: allNotes });
renderNotes(allNotes);
}
// 搜索
document.getElementById('searchInput').addEventListener('input', (e) => {
const query = e.target.value.toLowerCase();
const filtered = allNotes.filter(note =>
note.text.toLowerCase().includes(query) ||
(note.title && note.title.toLowerCase().includes(query))
);
renderNotes(filtered);
});
// 导出 JSON
document.getElementById('exportJson').addEventListener('click', () => {
const blob = new Blob([JSON.stringify(allNotes, null, 2)], { type: 'application/json' });
downloadBlob(blob, 'notes.json');
});
// 导出 Markdown
document.getElementById('exportMd').addEventListener('click', () => {
const md = allNotes.map(note =>
`## ${formatDate(note.createdAt)}\n\n${note.text}\n\n> 来源: [${note.title}](${note.url})\n`
).join('\n---\n\n');
const blob = new Blob([md], { type: 'text/markdown' });
downloadBlob(blob, 'notes.md');
});
// 清空
document.getElementById('clearAll').addEventListener('click', async () => {
if (confirm('确定清空所有笔记？')) {
allNotes = [];
await chrome.storage.local.set({ notes: [] });
renderNotes([]);
}
});
// 工具函数
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function formatDate(isoString) {
return new Date(isoString).toLocaleString('zh-CN');
}
function downloadBlob(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
// 初始化
loadNotes();
```
## 🚀 安装步骤
1. 打开 Chrome，访问 `chrome://extensions/`
2. 开启「开发者模式」
3. 点击「加载已解压的扩展程序」
4. 选择项目文件夹
## ✅ 验收清单
- [ ] 扩展成功加载
- [ ] 右键菜单显示「保存到笔记」
- [ ] 选中文本可以保存
- [ ] 弹出窗口显示笔记列表
- [ ] 搜索功能正常
- [ ] 删除功能正常
- [ ] 导出 JSON 正常
- [ ] 导出 Markdown 正常
## 💡 进阶挑战
- 添加标签分类
- 支持云同步（Chrome Sync）
- 添加快捷键
- 支持图片保存
- 添加笔记编辑功能

97
i18n/zh/documents/实战案例/README.md
View File

@ -8,23 +8,62 @@
| 案例 | 难度 | 技术栈 | 耗时 | 状态 | | 案例 | 难度 | 技术栈 | 耗时 | 状态 |
|:---|:---|:---|:---|:---| |:---|:---|:---|:---|:---|
| [Todo App](./01-todo-app.md) | ⭐ 入门 | HTML/CSS/JS | 30 分钟 | 待补充 | | [Todo App](./01-todo-app.md) | ⭐ 入门 | HTML/CSS/JS | 30 分钟 | ✅ 完成 |
| [个人博客](./02-blog.md) | ⭐⭐ 初级 | Next.js | 2 小时 | 待补充 | | [个人博客](./02-blog-system.md) | ⭐⭐ 中等 | Next.js/MDX | 2-4 小时 | ✅ 完成 |
| [AI 聊天机器人](./03-chatbot.md) | ⭐⭐ 初级 | Python/FastAPI | 1 小时 | 待补充 | | [AI 聊天机器人](./03-chatbot.md) | ⭐⭐ 中等 | Python/FastAPI | 1-2 小时 | ✅ 完成 |
| [全栈 SaaS](./04-saas.md) | ⭐⭐⭐ 中级 | Next.js/Supabase | 1 天 | 待补充 | | [命令行工具](./04-cli-tool.md) | ⭐⭐ 中等 | Python/Click | 1-2 小时 | ✅ 完成 |
| [Chrome 插件](./05-chrome-extension.md) | ⭐⭐ 初级 | JS/Chrome API | 2 小时 | 待补充 | | [Chrome 扩展](./05-chrome-extension.md) | ⭐⭐ 中等 | JS/Chrome API | 2-3 小时 | ✅ 完成 |
--- ---
## 案例格式 ## 快速开始
每个案例包含： 每个案例都包含：
1. **开始前的提示词** - 直接复制给 AI
2. **项目结构** - 清晰的目录规划
3. **核心代码** - 关键实现片段
4. **验收清单** - 确保功能完整
5. **进阶挑战** - 继续提升
1. **项目目标** - 一句话说明要做什么 ### 使用方式
2. **最终效果** - GIF/截图展示
3. **使用的提示词** - 完整可复制 1. 选择一个感兴趣的案例
4. **踩坑记录** - 遇到的问题和解决方案 2. 复制「第一步」的提示词给 AI
5. **完整代码** - GitHub 链接或代码片段 3. 跟着 AI 的指导一步步完成
4. 对照验收清单检查功能
---
## 案例详情
### ⭐ 入门级
#### [Todo App](./01-todo-app.md)
最简单的入门项目，30 分钟完成一个待办事项应用。
- 技术栈：纯 HTML/CSS/JavaScript
- 学习重点：DOM 操作、本地存储
### ⭐⭐ 中等级
#### [个人博客](./02-blog-system.md)
构建一个支持 Markdown 的个人博客系统。
- 技术栈：Next.js + MDX + Tailwind CSS
- 学习重点：静态生成、文件系统路由
#### [AI 聊天机器人](./03-chatbot.md)
接入 AI API 的聊天机器人。
- 技术栈：Python + FastAPI + OpenAI API
- 学习重点：API 调用、流式响应
#### [命令行工具](./04-cli-tool.md)
实用的文件批量重命名工具。
- 技术栈：Python + Click + Rich
- 学习重点：CLI 开发、文件操作
#### [Chrome 扩展](./05-chrome-extension.md)
网页笔记助手浏览器扩展。
- 技术栈：JavaScript + Chrome API
- 学习重点：扩展开发、本地存储
--- ---
@ -32,7 +71,33 @@
欢迎提交你的 Vibe Coding 实战案例！ 欢迎提交你的 Vibe Coding 实战案例！
格式要求： ### 格式要求
- 必须包含完整提示词
- 必须有效果展示（GIF 优先） ```markdown
- 记录踩坑经验 # 实战案例：项目名称
> 难度：⭐⭐ | 预计时间：X 小时 | 技术栈：XXX
## 🎯 项目目标
## 📋 开始前的准备
## 🏗️ 项目结构
## 🔧 核心代码
## 🚀 部署/使用
## ✅ 验收清单
## 💡 进阶挑战
```
### 提交方式
1. Fork 本仓库
2. 在 `i18n/zh/documents/实战案例/` 添加案例文件
3. 更新本 README 的案例列表
4. 提交 Pull Request
---
## 相关资源
- [从零开始 Vibe Coding](../从零开始vibecoding/)
- [常见坑汇总](../常见坑汇总/)
- [提示词库](../../prompts/)

299
i18n/zh/prompts/coding_prompts/architecture-design.md Normal file
View File

@ -0,0 +1,299 @@
# 架构设计提示词
> 让 AI 帮你设计清晰、可扩展的系统架构
---
## 🏗️ 项目架构设计
```
我要开发一个 [项目类型]，请帮我设计系统架构。
## 项目背景
[简要描述项目目的和背景]
## 功能需求
1. [核心功能 1]
2. [核心功能 2]
3. [核心功能 3]
## 非功能需求
- 预期用户量：[X 人]
- 并发要求：[X QPS]
- 数据量级：[X 条/GB]
- 可用性要求：[99.9%]
## 技术偏好（可选）
- 语言：[如 Python/Go/Node.js]
- 部署环境：[如 云服务器/Serverless/K8s]
请提供：
1. 整体架构图（用 Mermaid 或 ASCII）
2. 技术栈选型及理由
3. 核心模块划分
4. 数据流设计
5. 关键设计决策说明
```
---
## 📊 数据库设计
```
请帮我设计数据库结构：
## 业务场景
[描述业务场景]
## 核心实体
1. [实体 1]：[描述]
2. [实体 2]：[描述]
3. [实体 3]：[描述]
## 主要操作
- [操作 1]：[频率]
- [操作 2]：[频率]
## 约束条件
- 数据库类型：[MySQL/PostgreSQL/MongoDB]
- 数据量预估：[X 条]
请提供：
1. ER 图（Mermaid 格式）
2. 建表 SQL
3. 索引设计
4. 关键查询示例
```
---
## 🔌 API 设计
```
请帮我设计 RESTful API：
## 资源描述
[描述要管理的资源]
## 功能需求
1. [功能 1]
2. [功能 2]
3. [功能 3]
## 用户角色
- [角色 1]：[权限描述]
- [角色 2]：[权限描述]
请提供：
1. API 端点列表（方法、路径、描述）
2. 请求/响应示例（JSON 格式）
3. 错误码设计
4. 认证方案
5. 版本控制策略
```
---
## 🧩 模块划分
```
请帮我进行模块划分：
## 项目描述
[描述项目]
## 当前代码结构
```
[粘贴目录结构或描述]
```
## 问题
[描述当前架构的问题，如：耦合严重/职责不清]
请：
1. 分析当前架构问题
2. 提出模块划分方案
3. 定义模块间接口
4. 给出重构路径
```
---
## 🔄 微服务拆分
```
我想将单体应用拆分为微服务：
## 当前系统
[描述当前单体应用]
## 业务模块
1. [模块 1]：[描述]
2. [模块 2]：[描述]
3. [模块 3]：[描述]
## 拆分动机
[为什么要拆分]
## 约束条件
- 团队规模：[X 人]
- 技术栈：[当前技术栈]
- 时间预算：[X 个月]
请提供：
1. 服务划分方案
2. 服务间通信设计
3. 数据一致性方案
4. 部署架构
5. 渐进式迁移计划
```
---
## 📈 扩展性设计
```
请帮我设计一个可扩展的系统：
## 当前规模
- 用户量：[X]
- 数据量：[X]
- QPS：[X]
## 目标规模
- 用户量：[X]
- 数据量：[X]
- QPS：[X]
## 当前架构
[描述或图示]
请提供：
1. 扩展瓶颈分析
2. 水平扩展方案
3. 缓存策略
4. 数据库扩展方案
5. 成本估算
```
---
## 🔐 安全架构
```
请帮我设计安全架构：
## 系统描述
[描述系统]
## 敏感数据
- [数据类型 1]
- [数据类型 2]
## 合规要求
- [如 GDPR/等保]
请提供：
1. 认证方案
2. 授权模型
3. 数据加密策略
4. 审计日志设计
5. 安全最佳实践清单
```
---
## 📝 技术方案文档
```
请帮我撰写技术方案文档：
## 需求背景
[描述需求]
## 目标
[描述目标]
请按以下结构输出：
# 技术方案：[标题]
## 1. 背景与目标
## 2. 方案概述
## 3. 详细设计
### 3.1 架构设计
### 3.2 数据设计
### 3.3 接口设计
## 4. 技术选型
## 5. 风险评估
## 6. 里程碑计划
## 7. 附录
```
---
## 🎨 架构图模板
### 系统架构图
```
请用 Mermaid 画出系统架构图：
系统包含：
- [组件 1]
- [组件 2]
- [组件 3]
关系：
- [组件 1] 调用 [组件 2]
- [组件 2] 读写 [数据库]
```
### 时序图
```
请用 Mermaid 画出以下流程的时序图：
参与者：
- 用户
- 前端
- 后端
- 数据库
流程：
1. [步骤 1]
2. [步骤 2]
3. [步骤 3]
```
---
## 💡 设计原则提醒
```
请检查我的架构设计是否符合以下原则：
架构描述：
[描述你的架构]
检查项：
- [ ] 单一职责原则
- [ ] 开闭原则
- [ ] 依赖倒置原则
- [ ] 高内聚低耦合
- [ ] 关注点分离
- [ ] 可测试性
- [ ] 可观测性
请指出不符合的地方并给出改进建议。
```
---
## 使用建议
1. **先明确需求** - 架构服务于需求，需求不清架构必乱
2. **考虑约束** - 团队规模、时间、预算都是约束
3. **渐进式设计** - 不要过度设计，够用就好
4. **画图辅助** - 让 AI 用 Mermaid 画图更直观
5. **迭代优化** - 架构不是一次性的，持续演进

272
i18n/zh/prompts/coding_prompts/code-review.md Normal file
View File

@ -0,0 +1,272 @@
# 代码审查提示词
> 让 AI 帮你进行专业的代码审查
---
## 🔍 通用代码审查
```
请对以下代码进行全面的代码审查：
```
[粘贴代码]
```
请从以下维度进行审查：
1. **代码质量**
- 可读性
- 命名规范
- 代码结构
2. **潜在问题**
- Bug 风险
- 边界情况
- 异常处理
3. **性能**
- 时间复杂度
- 空间复杂度
- 优化建议
4. **安全性**
- 输入验证
- 敏感数据处理
- 常见漏洞
5. **最佳实践**
- 设计模式
- SOLID 原则
- 语言特性使用
请按严重程度（🔴 严重 / 🟡 建议 / 🟢 优化）标注每个问题，并提供修改建议。
```
---
## 📋 快速审查（简化版）
```
快速审查这段代码，只关注：
1. 明显的 Bug
2. 安全问题
3. 性能问题
代码：
```
[粘贴代码]
```
直接列出问题和修复方案，不需要详细解释。
```
---
## 🎯 特定维度审查
### 安全审查
```
请对这段代码进行安全审查：
```
[粘贴代码]
```
重点检查：
- SQL 注入
- XSS 攻击
- CSRF 漏洞
- 敏感信息泄露
- 权限控制
- 输入验证
列出所有安全风险并提供修复代码。
```
### 性能审查
```
请对这段代码进行性能审查：
```
[粘贴代码]
```
分析：
1. 时间复杂度
2. 空间复杂度
3. 数据库查询效率（如适用）
4. 内存使用
5. 并发处理
提供优化后的代码和性能对比。
```
### 可维护性审查
```
请从可维护性角度审查这段代码：
```
[粘贴代码]
```
评估：
1. 代码是否易于理解
2. 是否遵循单一职责原则
3. 是否有适当的注释
4. 是否易于测试
5. 是否易于扩展
提供重构建议。
```
---
## 🔄 PR 审查模板
```
请帮我审查这个 Pull Request：
## 变更描述
[描述这个 PR 做了什么]
## 变更的文件
### 文件 1: [文件名]
```
[粘贴代码变更]
```
### 文件 2: [文件名]
```
[粘贴代码变更]
```
请：
1. 检查代码质量
2. 验证逻辑正确性
3. 确认是否有遗漏的边界情况
4. 检查是否需要添加测试
5. 给出 Approve / Request Changes / Comment 建议
```
---
## 📊 审查报告模板
```
请生成一份代码审查报告：
代码：
```
[粘贴代码]
```
报告格式：
# 代码审查报告
## 概述
- 代码行数：
- 审查时间：
- 整体评分：X/10
## 问题汇总
| 严重程度 | 数量 |
|---------|------|
| 🔴 严重 | X |
| 🟡 建议 | X |
| 🟢 优化 | X |
## 详细问题
### 🔴 严重问题
1. [问题描述]
- 位置：第 X 行
- 原因：
- 修复：
### 🟡 建议改进
...
### 🟢 优化建议
...
## 总结与建议
```
---
## 🆚 代码对比审查
```
请对比审查这两个版本的代码：
## 原版本
```
[粘贴原代码]
```
## 新版本
```
[粘贴新代码]
```
请分析：
1. 新版本解决了什么问题
2. 新版本是否引入了新问题
3. 新版本的改进是否合理
4. 是否有更好的实现方式
```
---
## 💡 审查技巧
### 审查清单
```
请按照以下清单审查代码：
- [ ] 代码能正常运行
- [ ] 没有明显的 Bug
- [ ] 错误处理完善
- [ ] 没有安全漏洞
- [ ] 性能可接受
- [ ] 代码可读性好
- [ ] 有必要的注释
- [ ] 遵循项目规范
- [ ] 有对应的测试
代码：
```
[粘贴代码]
```
```
### 学习式审查
```
请审查这段代码，并教我：
1. 这段代码做了什么
2. 有哪些值得学习的地方
3. 有哪些可以改进的地方
4. 相关的最佳实践是什么
代码：
```
[粘贴代码]
```
```
---
## 使用建议
1. **提供上下文** - 说明代码的用途和背景
2. **指定重点** - 如果只关心某个方面，明确说明
3. **分批审查** - 代码太长时分文件审查
4. **跟进修复** - 审查后让 AI 帮你修复问题

247
i18n/zh/prompts/coding_prompts/debug-expert.md Normal file
View File

@ -0,0 +1,247 @@
# 调试专家提示词
> 让 AI 帮你快速定位和解决 Bug
---
## 🔍 通用调试提示词
```
你是一位经验丰富的调试专家。我遇到了一个问题，请帮我分析和解决。
## 问题描述
[描述你遇到的问题]
## 预期行为
[描述你期望发生什么]
## 实际行为
[描述实际发生了什么]
## 错误信息
```
[粘贴错误信息]
```
## 相关代码
```
[粘贴相关代码]
```
## 已尝试的解决方案
[列出你已经尝试过的方法]
请：
1. 分析可能的原因（列出 2-3 个最可能的）
2. 提供具体的解决方案
3. 解释为什么会出现这个问题
4. 给出预防类似问题的建议
```
---
## 🐛 前端调试
### React 组件问题
```
我的 React 组件出现问题：
组件代码：
```jsx
[粘贴组件代码]
```
问题：[描述问题，如：状态不更新/渲染异常/性能问题]
控制台错误：
```
[粘贴错误]
```
请帮我：
1. 找出问题根源
2. 提供修复后的代码
3. 解释 React 的相关机制
```
### CSS 布局问题
```
我的 CSS 布局有问题：
HTML 结构：
```html
[粘贴 HTML]
```
CSS 样式：
```css
[粘贴 CSS]
```
期望效果：[描述或提供截图链接]
实际效果：[描述或提供截图链接]
请帮我修复布局问题，并解释原因。
```
---
## 🔧 后端调试
### API 接口问题
```
我的 API 接口有问题：
接口代码：
```python
[粘贴代码]
```
请求方式：[GET/POST/PUT/DELETE]
请求 URL：[URL]
请求参数：
```json
[参数]
```
期望响应：
```json
[期望的响应]
```
实际响应：
```json
[实际的响应]
```
错误日志：
```
[日志]
```
请帮我定位问题并修复。
```
### 数据库查询问题
```
我的数据库查询有问题：
SQL 语句：
```sql
[粘贴 SQL]
```
表结构：
```sql
[粘贴建表语句或描述]
```
期望结果：[描述]
实际结果：[描述或错误信息]
请帮我：
1. 分析 SQL 问题
2. 提供正确的查询
3. 解释优化建议（如果有性能问题）
```
---
## ⚡ 性能调试
```
我的应用有性能问题：
## 问题表现
- [描述性能问题，如：加载慢/卡顿/内存泄漏]
## 环境信息
- 框架/语言：[如 React/Node.js/Python]
- 数据规模：[如 1000 条数据]
## 相关代码
```
[粘贴可能有问题的代码]
```
## 性能数据（如有）
- 加载时间：[X 秒]
- 内存占用：[X MB]
- CPU 使用：[X%]
请帮我：
1. 分析性能瓶颈
2. 提供优化方案
3. 给出优化后的代码
```
---
## 🔐 安全问题调试
```
请帮我检查这段代码的安全问题：
```
[粘贴代码]
```
请：
1. 列出所有潜在的安全漏洞
2. 按严重程度排序
3. 提供修复建议和代码
4. 解释每个漏洞的危害
```
---
## 💡 调试技巧
### 二分法定位
```
我的代码在某处出错，但不确定具体位置。
完整代码：
```
[粘贴代码]
```
错误表现：[描述]
请帮我用二分法定位问题：
1. 先确定问题在哪个模块/函数
2. 逐步缩小范围
3. 找到具体的问题行
```
### 最小复现
```
我遇到一个难以复现的 Bug：
问题描述：[描述]
发生频率：[总是/偶尔/特定条件]
相关代码：
```
[粘贴代码]
```
请帮我：
1. 分析可能的触发条件
2. 构造最小复现代码
3. 提供解决方案
```
---
## 使用建议
1. **提供完整上下文** - 错误信息、代码、环境都要给全
2. **描述清楚预期 vs 实际** - 让 AI 理解差距在哪
3. **列出已尝试的方案** - 避免重复建议
4. **一次只问一个问题** - 聚焦更容易解决