前言

作为非资深开发者（例如我是产品经理），你是否曾有个绝妙点子，却因不懂编程而卡在原型图上？AI编程的浪潮，正为我们打开一扇把想法变为现实的新大门。

本文并非资深开发者的技术指南，而是一个PM的“AI编程探索过程”。我将以产品经理的视角，记录如何借助AI工具，将想法快速搭建为可交互的原型，并更高效地与技术团队协作。这不只是写给开发者看的，更是写给每一个想跨越技术鸿沟、亲手实现创造的我们。

AI编程原理

AI 编程助手的核心能力：

  • 上下文理解 (Context Awareness)：它如何知道你项目中的其他代码？（如：读取打开的文件、利用代码索引）
  • 代码生成 (Code Generation)：从简单的代码补全到生成完整的函数、类。
  • 代码解释与重构 (Code Explanation & Refactoring)：它是如何“读懂”代码并提出优化建议的。
  • 对话式编程 (Conversational Programming)：通过聊天的方式完成编码任务。

AI编程三个阶段

  • 第一阶段：AI作为“高效的工具”（Tool）
    • 代表：基础的代码补全工具。
    • 工作模式：被动响应。它观察你正在写的代码，然后预测你接下来可能想写的几行。它不知道你整个项目的目标是什么，只关心当前的局部上下文。
    • 智能体现：模式匹配和代码预测能力。像一个记忆了海量代码片段的、反应极快的“代码输入法”。
  • 第二阶段：AI作为“对话式助手”（Assistant）
    • 代表：带有聊天功能的AI助手（如Copilot Chat）。
    • 工作模式：一问一答。你可以向它提问、让它解释代码、生成特定函数或代码块。它能理解更复杂的指令，但仍需要你主动提供大部分上下文。
    • 智能体现：自然语言理解和代码生成能力。像一个能够随时查阅资料并回答问题的“初级程序员伙伴”。
  • 第三阶段：AI作为“自主代理”（Agent）或“开发伙伴”（Partner）
    • 代表：您设计的这套完整流程，以及Cursor等集成式工具的终极形态。
    • 工作模式：理解意图、主动规划、自主执行。它接收一个高层次的目标（Vibe），然后主动地去感知环境（IDE）、加载知识（工程模板）、规划任务（分解步骤）、执行任务（生成diff、调用MCP），并寻求确认。
    • 智能体现：规划（Planning）和自主（Autonomy）能力。这已经超越了简单的“问答”，进入了“项目管理”和“任务执行”的范畴。

AI编程-Vibe coding流程

  • Vibe Coding”或“Vibe-Driven Development”（氛围/感觉驱动开发）是一个近来流行的术语，它描述的是一种工作模式：开发者不再从详细、严谨的技术规格文档开始，而是从一个高层次的、甚至是模糊的想法或“感觉”（Vibe）出发，快速地将这个想法变为现实。
  • 本部分的AI编程-Vibe coding，主要包括两个部分：AI本地编码、AI线上部署

关键角色/节点

  • Agent (智能代理/中间层)-总指挥
    • 定义：它是整个工作流的“智能总控”或“大脑”。它不仅仅是一个简单的中间层，更是一个具备理解、规划、委派和监督能力的核心组件。
    • 职责：
      1. 意图理解：解析用户用自然语言表达的复杂需求（如“帮我建个网站”）。
      2. 上下文聚合：主动从各个“信息源”（如IDE、工程模板）收集完成任务所需的所有上下文信息。
      3. 任务规划与分解：将一个复杂任务（如“建网站”）分解成一系列可以由AI模型或其他工具执行的具体步骤（如“生成项目结构”、“编写登录页面”、“创建API”）。
      4. 指令生成：将聚合后的信息和任务步骤，整合成高质量、结构化的提示（Prompt）发送给AI模型。
      5. 结果解析与执行：理解AI模型返回的结果（如diff代码），并将其转化为对IDE或云平台的具体操作指令。
  • 工程模板 (Engineering Template)-模板
    • 定义：这是一套预设的“高质量输入的保障”，是高级的提示工程（Prompt Engineering）实践。它并非简单的代码模板，而是一套指导AI模型生成高质量、规范化代码的“说明书”或“蓝图”。
    • 内容：
      1. 项目结构定义：如“请遵循MVC架构，创建controllers、models、views三个文件夹”。
      2. 技术栈约束：如“请使用React + TypeScript + Tailwind CSS技术栈”。
      3. 编码规范：如“所有函数必须有JSDoc注释，变量命名使用驼峰式”。
      4. 最佳实践/安全要求：如“所有SQL查询必须使用参数化，防止SQL注入”。
    • 作用：极大地提升了AI输出的确定性和质量，避免AI“自由发挥”导致结果不可控。
  • AI模型 (AI Model)-军师
    • 定义：主要是指具备强大代码理解和生成能力的大语言模型（LLM），是**“代码生成引擎”**。例如OpenAI的GPT系列、Google的Gemini系列等。
    • 核心能力：在您这个流程中，它的核心能力不仅仅是生成代码，更重要的是能在充分理解上下文后，以精确的格式（如diff****）进行增量修改，这是实现“AI修改代码”而非“AI覆盖代码”的关键。
  • IDE (集成开发环境/代码编辑器)
    • 定义：在这里，IDE（如VS Code）扮演了双重角色，既是“执行终端”也是“环境感知器”。
    • 角色：
      1. 环境感知器：通过插件或扩展，向Agent提供本地开发环境的“实时快照”，包括文件目录结构、代码内容、依赖库版本等。
      2. 执行终端：接收Agent发来的指令（如“应用这个diff补丁”、“在终端执行npm install命令”），并忠实地执行这些操作，成为Agent在本地的“手和脚”。
  • MCP
    • **模型上下文协议 (Model Context Protocol) ，一个开放的通信标准协议。**MCP充当一个标准化的“桥梁”或“接口”，让AI模型能够安全、高效地连接并调用外部的、实时的工具和数据源（如数据库、API、文件系统等）。

AI编程流程

image.png

  • **1）帮我生成一个网站/用户发起请求：**用户通过聊天界面等向Agent发出自然语言指令。
  • 2）Agent收集上下文-环境信息：Agent通过IDE插件，调用IDE的API（read, list）扫描当前工作区的文件结构和内容，形成对项目现状的理解。
  • 3）Agent收集上下文-工程模板：Agent根据用户意图（“建网站”）和项目类型，从预设的“工程模板库”中选取最合适的模板，获取结构化、规范化的提示词。
  • 4）Agent构建终极Prompt发生AI模型：Agent将【用户原始需求】+【IDE环境信息】+【模板提示词】三者智能地融合成一个信息密度极高、上下文极为丰富的“终极Prompt”，发送给AI模型。
  • 5）diff格式代码/AI模型生成增量代码：AI模型基于这个完美的Prompt，进行思考和代码生成。关键在于，它返回的不是完整的代码文件，而是diff格式的补丁。这极大地提高了修改的精确性，避免了对用户已有代码的误伤。
  • 6）Agent指导IDE执行：Agent解析diff内容，向IDE发出明确的指令，例如：“请对src/App.js文件应用以下变更…”。IDE插件接收指令并执行文件操作。
  • 7）反馈闭环：IDE执行完毕后，可以向Agent返回一个状态（成功或失败）。如果失败（如diff应用冲突），Agent可以启动新一轮的“调试流程”，再次请求AI模型解决这个冲突，形成一个“编码-测试-调试”的自动化闭环。

AI线上部署流程

AI线上部署流程说明：

image.png

  • 主要角色：
    • 用户：提出“Vibe”（感觉/意图）。
    • Agent：作为“总指挥”，负责沟通、协调、理解意图、下达指令和最终汇报。
    • AI模型：作为“军师”，利用其强大的知识和推理能力，根据当前情况制定计划。
    • IDE+MCP：作为“执行官”，忠实地执行计划，处理所有与具体技术（编译、云API）相关的脏活累活。
  • **用户发起请求：**用户完成编码后，向 Agent 发出“上线”或“部署”的高层次指令。
  • **Agent收集上下文并请求AI规划：**Agent 向 IDE 查询项目信息和所有可用的 MCP 函数（能力清单），然后将目标、上下文和能力清单一同打包发给 AI 模型，请求一个完整的、可执行的计划。
  • **AI模型返回结构化计划：**AI 模型作为规划者，基于收到的全面信息，返回一个由多条 MCP 函数调用组成的、完整的结构化计划（如 JSON 列表）。
  • **Agent一次性委托计划：**Agent 将 AI 返回的整个结构化计划，一次性地完整发送给 IDE 中的 MCP 服务，并要求其全权执行。
  • **IDE自主执行完整计划：**IDE 中的 MCP 服务接收到指令列表后，作为任务的自主执行者，按顺序解析并执行其中的每一条指令。它负责管理整个任务流程，并与云平台等外部服务进行实际交互。
  • **IDE在任务结束后最终报告：**在所有指令成功执行（或因失败而终止）后，IDE 将整个任务的最终执行结果（包括成功状态、所有步骤的日志和输出）一次性汇总，并通过 MCP 反馈给 Agent。
  • **Agent向用户最终反馈：**在收到 IDE 的最终报告后，Agent 向用户报告任务完成。如果任务失败，Agent 会根据收到的完整错误日志，再次请求 AI 模型进行“调试”或“提供修正方案”。

AI编程工具选择

评判 AI 编程工具的核心标准

  • 集成度：与 VS Code, JetBrains 等主流 IDE 的集成体验如何？是独立编辑器还是插件？
  • 性能与速度：代码建议的响应速度快吗？
  • 代码质量：生成的代码可用性、准确性、安全性如何？
  • 上下文理解能力：能否很好地理解整个工作区（Workspace-wide context）的代码？
  • 特色功能：例如 AI 辅助调试 (AI-powered debugging)、自动生成文档 (Doc generation)、终端命令生成等。
  • 成本：免费版功能是否够用？付费版价格如何？

主流 AI 编程工具概览

  • IDE 插件类：
    • GitHub Copilot: 业界标杆，集成度最广。
    • Amazon CodeWhisperer: 强大的企业级支持和安全扫描。
    • Tabnine: 强调隐私和可在本地部署的模型。
    • 等等
  • 集成式编辑器 (AI-Native Editor)：
    • Cursor: “AI 优先”的 VS Code 分支，深度整合 AI 功能。
  • 其他辅助工具：
    • Phind / Perplexity: 面向开发者的 AI 搜索引擎。
    • Warp: 集成了 AI 的现代化终端。

Cursor

详见：Cursor 使用指南：开启您的 AI 辅助编程之旅

Augment Code

详见：Augment Code使用指南

Kiro AI IDE

详见：Kiro AI IDE 使用指南：入门到进阶教程

横向比较-列表清单

名称 类型 说明
Cursor 代码编辑器(IDE)
Kiro AI IDEtrae 代码编辑器(IDE)
Trae 代码编辑器(IDE)
GitHub Copilot IDE插件
Augment Code IDE插件
Gemini CLI 命令行工具

详见：

Google sheet

目前AI编程工具，可能排行榜 Claude code ≈ augment ＞kiro ≈ cursor ＞Trae

掌握与AI对话的艺术：高效工作流与提示工程

  • 思维转变： 从“命令者”到“沟通者”，改变我们的开发习惯。
  • 提示工程（Prompt）核心原则：
    • R.C.T.F 模型：角色(Role)、上下文(Context)、任务(Task)、格式(Format)。

AI编程实战：从需求到交付的全场景应用

场景分析Use Cases

  • 场景一：从零开始创建应用 - “用 AI 写一个 Express / Flask 的 Hello World API”
  • 场景二：编写单元测试 - “为指定的函数生成 Jest / Pytest 测试用例”
  • 场景三：代码重构 - “将一个冗长的函数重构成更清晰的小函数”
  • 场景四：代码解释与学习 - “解释一段复杂的正则表达式或算法”
  • 场景五：Debug 调试 - “帮我看看这段代码为什么会报错？”
  • 场景六：编写文档 - “为这个函数生成 JSDoc / Docstring 注释”

使用cursor开发编程

使用GitHub Copilot开发编程

小心得

  • AI解决问题时，可以先让AI分析问题原因，然后经过分析之后，再去选择性执行解决
  • AI编程，依然使用软件工程的最佳实践方法，架构设计、解耦、模块化设计等等

最后

  • 以目前背景，会选择的编程工具和方法：
  • 随着AI和AI编程工具的快速，也会持续更新的编程工具和方法。
  • 展望未来：从编程伙伴到自主智能体 (Agent)