AI 编程工具实战：从补全到 Vibe Coding

AI 已深刻改变软件开发方式。本文梳理 AI 编程工具分层、对比主流产品，并给出 Vibe Coding 实战工作流。系列导航见 总索引。

AI 编程工具解决什么问题？

工具分层体系

flowchart TB
    subgraph layer1 [AI IDE 一体化]
        Cursor[Cursor]
        TRAE[TRAE]
        Windsurf[Windsurf]
    end
    subgraph layer2 [IDE 插件]
        Copilot[GitHub Copilot]
        Lingma[通义灵码]
        Kilo[Kilo Code]
    end
    subgraph layer3 [终端 Agent]
        ClaudeCode[Claude Code]
        Codex[Codex]
        OpenCode[OpenCode]
    end
    subgraph layer4 [全栈生成]
        Bolt[Bolt.new]
        Lovable[Lovable]
        Miaoda[秒哒]
    end
    layer1 --> layer2
    layer2 --> layer3
    layer3 --> layer4

第一层：AI IDE（一体化编辑器）

将 AI 深度集成到编辑器，支持对话、补全、Agent 多模式。

怎么用：

1. 下载安装，导入现有项目或新建
2. 用 @ 引用文件/文件夹作为上下文
3. 简单改动用 Chat；复杂功能用 Agent/Composer 模式

第二层：IDE 插件（在现有 IDE 中增强）

不改变主编辑器，通过插件获得 AI 能力。

怎么用：

1. 在插件市场搜索安装
2. 登录并绑定账号（部分需订阅）
3. 写代码时接受 Tab 补全，或用侧边栏对话

第三层：终端 / Agent 编程

在命令行或独立环境中，由 AI Agent 自主读写文件、执行命令。

怎么用：

1. 在项目根目录启动 Agent
2. 用自然语言描述任务（如「给 User 模块加单元测试」）
3. Review 生成的 diff，确认后应用

第四层：全栈生成（一句话做应用）

输入需求描述，生成完整可运行项目。

第五层：企业级

能力对比维度

Vibe Coding 实战工作流

Vibe Coding（氛围编程）指用自然语言描述意图，由 AI 主导实现，人负责把关方向。

标准三步流程

需求描述 → Plan 拆解 → Agent 实现 → 人工 Review → 测试迭代

步骤 1：需求描述（Plan 模式）

在 Cursor/TRAE 的 Plan 模式或对话中：

## 任务
为 Vue 3 项目添加用户登录页

## 要求
- 使用 Composition API + TypeScript
- 表单校验：邮箱格式、密码 8 位以上
- 调用 /api/auth/login 接口
- 样式与现有 LoginLayout 保持一致

## 约束
- 不要修改 router 以外的文件
- 函数需添加 JSDoc 注释

步骤 2：Agent 实现

切换到 Agent/Composer 模式，让 AI 按计划修改多个文件。人工检查：

• 是否引入多余依赖
• 类型是否安全（避免 any）
• 是否破坏现有测试

步骤 3：测试与迭代

请为 LoginForm.vue 补充 Vitest 单元测试，覆盖：
1. 空表单提交
2. 无效邮箱
3. 登录成功跳转

多栈开发提示示例

Vue 3 + TypeScript：

用 Vue 3 Composition API 实现一个 Cesium 地图组件：
- 组件销毁时销毁 viewer 实例
- 坐标输入为度，内部转弧度
- 导出 flyTo 方法供父组件调用

Python FastAPI：

实现用户 CRUD API：
- 使用 Pydantic v2 模型
- 异步数据库操作 asyncpg
- 添加类型注解与 docstring

Java Spring Boot：

实现订单服务 OrderService：
- 使用 Stream API 处理列表
- 方法以 Async 结尾的用 @Async
- 遵循 Google Java Style

C# ASP.NET Core：

实现用户查询 API：
- 使用 LINQ 查询
- 异步方法以 Async 结尾
- 返回 IActionResult

选型建议

使用注意事项

1. 始终 Review 代码：AI 可能产生安全漏洞、错误逻辑
2. 敏感代码不上云：密钥、客户数据用私有化或本地模型
3. 小步提交：每完成一个功能就 git commit，便于回滚
4. 写好提示词：见 提示词工程篇
5. 理解再接受：不要盲目接受全部改动，尤其是依赖和配置变更

延伸阅读

• AI 编程工具专栏总索引 — Cursor、TRAE、Claude Code、Codex 单篇详解
• 总索引与学习路径
• AI 工具分类精选
• AI 对话软件与常用模型
• 提示词与系统提示词工程
• 进阶与精通实践

本文由 xueyise 创作，AI 工具系列第 4 篇。