Skip to content

AI 驱动的前端工作流:我的实践总结

2024 年,AI 工具已经从"可选"变成"必要"了。整理一下我目前的 AI 辅助开发工作流。

工具矩阵

工具用途我的使用频率
GitHub Copilot代码补全每天
Claude 3.5 Sonnet复杂问题分析、架构讨论每天
ChatGPT-4o快速答疑、内容生成每周
CursorAI 原生编辑器新项目尝试中
v0.devUI 原型生成每月

代码生成:从提示词到可用代码

提示词质量决定输出质量。

差的提示词:
"帮我写一个列表组件"

好的提示词:
"用 React 18 + TypeScript 写一个商品列表组件:
- Props:items: Product[](Product 有 id, name, price, image, inStock 字段)
- 支持加载状态(skeleton loading)
- 支持空状态
- 每个 item 有'加入购物车'按钮,inStock 为 false 时禁用
- 用 Tailwind CSS 样式,响应式:1列→2列→4列
- 点击卡片触发 onSelect 回调"

用具体的类型、约束、交互要求,AI 才能给出接近可用的代码。

我的日常工作流

1. 早晨规划(5分钟)

把今天的任务告诉 Claude,让它帮我拆分任务、识别依赖、估时间。不是为了让 AI 替我规划,而是用对话的方式理清思路。

2. 写代码时(持续)

- 样板代码 → Copilot 自动补全
- 算法逻辑 → 先自己想,卡住了问 Claude
- 类型定义 → Copilot 补全 + 自己审查
- 正则表达式 → 直接让 AI 生成
- SQL 查询 → AI 草稿 + 自己优化

3. Code Review 前(每次提 PR)

把 diff 粘给 Claude,问:
- 有没有潜在的安全问题?
- 有没有明显的性能问题?
- 有没有边界条件没处理?
- 代码可读性如何?

不是让 AI 替代 Review,而是先自检

4. Debug(有时)

把错误栈和相关代码给 AI,通常能快速定位方向。但 AI 有时会给出自信但错误的答案,要保持怀疑。

AI 的局限:必须自己处理的

业务逻辑:AI 不了解你的产品需求,决策要自己做。

安全性:AI 生成的代码可能有安全漏洞(SQL 注入、XSS、IDOR),必须自己审查。

typescript
// AI 可能生成这样的代码(SQL 注入!)
const query = `SELECT * FROM users WHERE name = '${name}'`;

// 正确的做法
const users = await db.query("SELECT * FROM users WHERE name = ?", [name]);

性能调优:AI 能给出理论建议,但真正的性能问题要用 Profiler 分析。

架构决策:选哪个方案、如何组织代码,AI 的建议是参考,不是答案。

Cursor 的体验

Cursor 是 VSCode fork,内置了 AI 功能:

最有用的:
- Cmd+K:在光标处生成/修改代码(比 Copilot 更强)
- @file:在对话中引用当前文件
- Cmd+Shift+I:对整个代码库的对话

不适合的:
- 已有 VSCode 完整配置的项目(迁移成本)
- 需要特定 VSCode 扩展的工作流

还没有完全从 VSCode 切到 Cursor,但新项目会优先用。

2024 年的感受

AI 工具让我在"写代码"上省了 30-40% 的时间,但这个时间的大部分被转移到了:

  • 更多的 Code Review
  • 更仔细的架构设计
  • 更多的测试
  • 理解 AI 生成的代码(不能不理解就用)

整体输出质量有提升,但不是"省了时间就能摸鱼",而是把时间用在了更有价值的事情上。

小结

  • AI 工具 2024 年已经是必要的生产力工具
  • 提示词质量决定输出质量:具体、有上下文、有约束条件
  • AI 不能替代:业务判断、安全审查、架构决策、性能调优
  • AI 生成的代码必须审查,保持批判性思维
  • Cursor > GitHub Copilot(但迁移成本需要考虑)

MIT Licensed