实战项目

学习目标：通过三个完整项目，掌握 AI 辅助开发的实际操作

预计时间：3-4 小时

难度：⭐⭐⭐

项目一：网页内容摘要 Chrome 插件

这个项目让你体验从零开始用 AI 做一个完整的 Chrome 插件。

功能需求

• 点击插件图标，自动提取当前网页的正文内容
• 调用 AI API 生成摘要
• 在弹窗中显示摘要结果
• 可以复制摘要到剪贴板

开发步骤

第一步：让 AI 创建项目结构

在 Cursor 中新建文件夹，打开 Agent 模式，输入：

创建一个 Chrome 插件项目（Manifest V3），功能是提取网页内容并生成摘要。

项目结构：
- manifest.json
- popup.html + popup.js + popup.css
- content.js（提取页面内容）
- background.js（处理 API 调用）

先创建基础结构，popup 显示一个"生成摘要"按钮和结果区域。
暂时不实现 AI 调用，先用假数据测试流程。

第二步：实现内容提取

在 content.js 中实现网页正文提取：
- 优先提取 article 标签内容
- 如果没有 article，提取 main 标签
- 都没有就提取 body，但要过滤掉 nav、footer、aside、script、style
- 返回纯文本，去掉多余空白
- 限制最大长度 5000 字符

第三步：接入 AI API

在 background.js 中实现 AI 摘要功能：
- 使用 OpenAI API（用户需要自己填 API Key）
- API Key 保存在 chrome.storage.sync
- 调用 gpt-3.5-turbo，提示词：请用 3-5 句话概括以下内容的要点
- 处理 API 错误，显示友好的错误信息

第四步：完善 UI

优化 popup 的样式：
- 宽度 400px，高度自适应
- 加载中显示 loading 动画
- 摘要结果用卡片样式展示
- 添加"复制"按钮，点击后显示"已复制"

完成标准

• [ ] 插件能正常加载到 Chrome
• [ ] 点击按钮能提取页面内容
• [ ] 能调用 AI 生成摘要
• [ ] 复制功能正常工作

---

项目二：批量文件重命名工具

这是一个命令行工具，用 Python 实现。

功能需求

• 支持按规则批量重命名文件
• 规则包括：添加前缀/后缀、替换文字、序号命名、日期命名
• 预览模式：先显示会怎么改，确认后再执行
• 支持撤销上一次操作

开发步骤

第一步：创建基础结构

用 Claude Code 或 Cursor：

创建一个 Python 命令行工具 rename_tool.py：
- 使用 argparse 处理命令行参数
- 支持 --dir 指定目录（默认当前目录）
- 支持 --pattern 指定文件匹配模式（如 *.jpg）
- 支持 --preview 预览模式
- 先实现参数解析和文件列表获取

第二步：实现重命名规则

添加重命名规则支持：

1. --prefix "前缀_"  添加前缀
2. --suffix "_后缀"  添加后缀
3. --replace "旧文字" "新文字"  替换
4. --sequence  序号命名（001, 002, ...）
5. --date  添加日期前缀（2025-01-27_）

规则可以组合使用，按顺序执行。

第三步：实现预览和确认

实现预览功能：
- 默认进入预览模式，显示"原文件名 → 新文件名"的对照表
- 显示总共会重命名多少个文件
- 询问用户是否确认执行
- 加 --yes 参数可以跳过确认

第四步：实现撤销功能

实现撤销功能：
- 每次重命名后，把操作记录保存到 .rename_history.json
- 运行 --undo 可以撤销上一次操作
- 撤销前也要预览和确认

完成标准

• [ ] 能正确解析命令行参数
• [ ] 各种重命名规则都能正常工作
• [ ] 预览模式显示正确
• [ ] 撤销功能正常

---

项目三：个人书签管理器

这是一个 Web 应用，前后端都有。

功能需求

• 添加、编辑、删除书签
• 书签分类（标签）
• 搜索书签
• 自动获取网页标题和图标

技术栈

• 前端：React + Tailwind CSS
• 后端：Node.js + Express
• 数据库：SQLite（简单起见）

开发步骤

第一步：创建项目

创建一个全栈项目：
- 前端用 Vite + React + TypeScript + Tailwind
- 后端用 Express + TypeScript + SQLite (better-sqlite3)
- 项目结构：client/ 和 server/ 两个目录
- 配置好开发环境，前端代理到后端

第二步：设计数据模型

设计书签的数据结构：

Bookmark:
- id: 自增主键
- url: 网址（唯一）
- title: 标题
- description: 描述（可选）
- favicon: 图标 URL
- tags: 标签（JSON 数组）
- createdAt: 创建时间
- updatedAt: 更新时间

创建 SQLite 数据库和表。

第三步：实现后端 API

实现 RESTful API：
- GET /api/bookmarks - 获取列表（支持搜索和标签筛选）
- POST /api/bookmarks - 添加书签
- PUT /api/bookmarks/:id - 更新书签
- DELETE /api/bookmarks/:id - 删除书签
- GET /api/bookmarks/fetch-meta?url=xxx - 获取网页元信息

第四步：实现前端界面

实现前端页面：
- 顶部：搜索框 + 添加按钮
- 左侧：标签列表（可筛选）
- 主区域：书签卡片网格
- 书签卡片显示：图标、标题、描述、标签
- 点击卡片打开网址，hover 显示编辑/删除按钮

完成标准

• [ ] 能添加、编辑、删除书签
• [ ] 搜索功能正常
• [ ] 标签筛选正常
• [ ] 自动获取网页标题和图标

---

项目开发建议

1. 不要跳步骤：每一步都要测试通过再继续
2. 保存对话记录：方便回顾和学习
3. 遇到问题先自己想：实在想不出再问 AI
4. 代码要看懂：不要只是复制粘贴

---

← 返回：开发流程 | 继续学习：最佳实践 →