项目类型

学习目标：了解不同类型项目的 AI 辅助开发策略

预计时间：45-60 分钟

难度：⭐⭐

不同项目，不同打法

AI 编程工具不是万能的。有些项目它能帮大忙，有些项目它反而会添乱。

搞清楚你要做什么类型的项目，才能选对工具和方法。

---

前端项目

AI 擅长的：

• 生成 UI 组件（按钮、表单、卡片、导航栏）
• 写 CSS/Tailwind 样式
• 实现常见交互（下拉菜单、模态框、轮播图）
• 响应式布局适配

AI 不太行的：

• 复杂的状态管理逻辑
• 性能优化（它写的代码经常有性能问题）
• 设计还原（像素级还原还是得自己调）

推荐工具组合：

任务	工具
快速生成组件	v0.dev
日常开发	Cursor / Copilot
样式调整	直接问 AI 聊天

实战技巧：

让 AI 生成组件时，给它具体的约束：

生成一个用户头像组件，要求：
- 使用 React + TypeScript
- 样式用 Tailwind CSS
- 支持三种尺寸：sm(32px)、md(48px)、lg(64px)
- 如果没有图片，显示用户名首字母
- 加载中显示骨架屏

比"生成一个头像组件"有用得多。

---

后端项目

AI 擅长的：

• 写 CRUD 接口
• 生成数据库模型/Schema
• 实现常见的中间件（认证、日志、限流）
• 写单元测试

AI 不太行的：

• 复杂的业务逻辑（它不懂你的业务）
• 数据库性能优化
• 安全相关的代码（别完全信它）

推荐工具组合：

任务	工具
日常开发	Cursor / Claude Code
生成样板代码	Copilot
重构老代码	Claude Code

实战技巧：

写后端代码时，把上下文给足：

我在用 Express + TypeScript + Prisma 开发一个博客系统。

现在需要实现文章的 CRUD 接口：
- POST /api/posts - 创建文章（需要登录）
- GET /api/posts - 获取文章列表（支持分页、按标签筛选）
- GET /api/posts/:id - 获取单篇文章
- PUT /api/posts/:id - 更新文章（只有作者能改）
- DELETE /api/posts/:id - 删除文章（只有作者能删）

Prisma schema 里 Post 模型长这样：
model Post {
  id        String   @id @default(cuid())
  title     String
  content   String
  authorId  String
  tags      Tag[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

---

全栈项目

全栈项目是 AI 编程工具最能发挥的地方，也是最容易翻车的地方。

AI 擅长的：

• 快速搭建项目骨架
• 前后端联调（它知道两边的代码）
• 生成完整的功能模块

AI 不太行的：

• 保持代码风格一致（它经常前后矛盾）
• 处理复杂的数据流
• 项目架构设计

推荐工具组合：

阶段	工具
快速原型	bolt.new / Lovable
正式开发	Cursor Agent 模式
调试问题	Claude Code

实战技巧：

全栈项目最大的坑是 AI 生成的前后端代码对不上。解决方法：

1. 先定义好 API 接口（用 TypeScript 类型或者 OpenAPI）
2. 让 AI 基于接口定义生成代码
3. 前后端改动时，同时告诉 AI 两边的代码

我要修改用户注册接口，请同时更新：
1. 后端 api/auth/register.ts
2. 前端 hooks/useAuth.ts
3. 前端 components/RegisterForm.tsx

新增字段：手机号（可选）

---

脚本和工具

这是 AI 编程最省心的场景。

AI 擅长的：

• 文件批量处理
• 数据格式转换
• 自动化脚本
• 命令行工具

推荐工具： Claude Code 或者直接在 ChatGPT/Claude 里写

实战技巧：

写脚本时，把输入输出说清楚：

写一个 Python 脚本，功能：
- 输入：一个文件夹路径
- 处理：找出所有超过 30 天没修改的文件
- 输出：生成一个 CSV，包含文件名、大小、最后修改时间
- 额外：加一个 --delete 参数，可以删除这些文件（删除前要确认）

---

Chrome 插件

Chrome 插件的结构比较固定，AI 生成的代码质量通常不错。

AI 擅长的：

• 生成 manifest.json
• 写 content script 和 background script
• 实现常见功能（修改页面、存储数据、发送请求）

推荐工具： Cursor（可以同时看多个文件）

实战技巧：

先让 AI 生成项目结构：

创建一个 Chrome 插件项目，功能是：
在任何网页上选中文字后，右键菜单里出现"用 AI 解释"选项，
点击后弹出一个小窗口显示解释内容。

请生成完整的项目结构，包括：
- manifest.json (Manifest V3)
- background.js
- content.js
- popup.html 和 popup.js
- 必要的 CSS

---

移动端项目

AI 对移动端的支持相对弱一些，但也能帮上忙。

AI 擅长的：

• React Native / Flutter 的 UI 组件
• 简单的页面布局
• 调用原生 API 的样板代码

AI 不太行的：

• 平台特定的坑（iOS 和 Android 的差异）
• 性能优化
• 复杂的导航逻辑

推荐工具： Cursor + 官方文档

实战技巧：

移动端开发时，一定要指定平台和框架版本：

使用 React Native 0.73 + TypeScript，
为 iOS 和 Android 创建一个底部导航栏，包含：
- 首页（Home 图标）
- 搜索（Search 图标）
- 我的（User 图标）

使用 @react-navigation/bottom-tabs
图标用 @expo/vector-icons

---

项目类型速查表

项目类型	AI 帮助程度	推荐工具	注意事项
前端组件	⭐⭐⭐⭐⭐	v0 + Cursor	样式可能需要微调
后端 API	⭐⭐⭐⭐	Cursor / Claude Code	安全代码要自己审
全栈项目	⭐⭐⭐⭐	Cursor Agent	注意前后端一致性
脚本工具	⭐⭐⭐⭐⭐	Claude Code	最省心的场景
Chrome 插件	⭐⭐⭐⭐	Cursor	结构固定，好生成
移动端	⭐⭐⭐	Cursor	平台差异要注意
游戏开发	⭐⭐	看情况	AI 对游戏引擎支持有限
嵌入式/底层	⭐	慎用	容易出安全问题

---

本章小结

• 不同项目类型，AI 的帮助程度不一样
• 前端组件和脚本工具是 AI 最擅长的
• 全栈项目要注意前后端代码的一致性
• 安全相关的代码不要完全信 AI
• 给 AI 的描述越具体，生成的代码越靠谱

---

← 返回：快速上手 | 继续学习：开发流程 →