产品经理的Vibe Coding实战：用AI Agent打通原型到代码的工作流

PMCoder

216人浏览 · 2026-07-16 09:34:35

PMCoder · 2026-07-16 09:34:35 发布

2026年，Vibe Coding从一个概念变成了开发者的日常。Andrej Karpathy提出这个词时，指的是用自然语言指挥AI写代码的开发范式。如今这个范式正在越过开发的边界，向产品经理的角色延伸。

当一个产品经理能用一句话让AI生成高保真原型，再用一句话让AI把原型变成可运行的React项目，"画原型"和"写代码"之间的那道墙，正在被AI Agent拆掉。本文记录一套实测可跑的Vibe Coding工作流，覆盖从需求描述到代码落地的完整链路。

一、从Figma截图到Vibe Coding：产品经理工作流的三次进化

产品经理参与"设计到开发"链路的方式，经历了三个阶段。

V1.0 截图流：PRD + 静态图

产品经理在Axure或Figma里画原型，截图贴到PRD文档，开发根据截图和文字描述理解需求。这个模式最大的问题是信息衰减：截图无法表达交互逻辑，文字描述和实际界面总有偏差。

V2.0 可交互原型流：Figma + 开发手动还原

Figma让原型可以点击跳转，沟通效率提升。但设计稿和代码之间仍然是割裂的——开发需要从零开始写HTML结构和CSS样式，设计变更后手动同步代码。市面上一些AI工具（如v0.dev、Bolt.new）尝试直接输出React代码，但受限于固定的组件库和技术栈，灵活性不足。

V3.0 Vibe Coding流：AI Agent全链路协作

2026年，MCP（Model Context Protocol）协议的普及让AI Agent能够跨工具协作。产品经理在GemDesign中用自然语言生成原型，AI编码工具（Cursor、Trae）通过MCP协议直接读取原型数据，一句话指令生成符合项目技术栈的代码。产品经理不再只是"画图的人"，而是成为AI Agent的指挥官，参与到从原型到代码的完整链路。

三次进化的核心差异如下：

维度	V1.0 截图流	V2.0 可交互原型流	V3.0 Vibe Coding流
原型形态	静态截图	可点击跳转	高保真可交互
交付物	PRD + 图片	Figma链接	可运行代码
设计与代码关系	完全割裂	手动还原	MCP自动同步
产品经理参与度	仅画原型	画原型+评审	指挥AI生成代码
需求变更成本	高（改图+改文档+改代码）	中（改设计+改代码）	低（改原型+AI增量更新代码）

二、Vibe Coding工作流的核心架构：三层协作模型

这套工作流由三个层组成，每一层各司其职。

原型层：GemDesign

GemDesign是AI原型的原型设计工具，负责把自然语言需求转化为高保真可交互原型。它的定位不是替代Figma做像素级精调，而是解决"从0到1快速出原型"的效率问题。

核心能力包括：

文生界面：自然语言描述需求，AI生成完整界面
图生界面：上传手绘草图或竞品截图，AI转换为可编辑原型
应用原型：一句话描述完整应用，AI引导式生成多页面
AI对话修改：用自然语言描述修改要求，AI自动应用

协议层：MCP（Model Context Protocol）

MCP是大模型间通讯的开放协议，由Anthropic在2024年底推出，2026年已经成为AI Agent协作的事实标准。GemDesign提供MCP服务，让AI编码工具能够直接调用原型数据。

GemDesign MCP提供三个核心工具：

工具	功能	返回值
`list_pages`	获取应用下所有页面列表	页面名称、UUID、类型
`get_page_content`	获取页面完整HTML源码	DOM结构、样式类名、布局信息
`download_asset`	下载图片、字体等资源	本地文件路径

关键设计：GemDesign输出的是通用HTML，而非固定代码。这意味着AI Agent可以根据项目需求，智能适配任意技术栈和组件库。对比v0.dev等直接输出React代码的方案，灵活性更高。

编码层：Cursor / Trae

Cursor和Trae是2026年主流的AI Agent编码工具，支持MCP协议。它们负责接收产品经理的自然语言指令，调用MCP获取原型数据，生成符合项目技术栈的工程代码。

三层协作的数据流向：

产品经理（自然语言需求）
    ↓
GemDesign（生成高保真原型）
    ↓
MCP协议（传输HTML和资源）
    ↓
Cursor/Trae（AI Agent生成代码）
    ↓
可运行项目（React/Vue + 任意组件库）

三、实战：产品经理15分钟完成从需求到可运行React代码

下面以一个"后台管理系统"为例，展示完整流程。整个流程分为4个步骤，总耗时约15分钟。

Step 1：用GemDesign生成高保真原型（3分钟）

登录GemDesign（design.gemcoder.com），选择"文生界面"功能，输入需求描述：

生成一个后台管理系统，包含：
- 侧边栏导航（用户管理、权限管理、数据统计）
- 顶部栏（用户信息、通知图标）
- 主内容区包含用户列表表格和筛选条件
- 用户详情页和编辑弹窗

风格要求：
- 主题色：深蓝色
- 圆角：8px
- 阴影：轻微阴影

约30秒后，GemDesign生成4个页面：用户列表页、用户详情页、权限管理页、数据统计页。每个页面支持真实跳转，可在模拟器中验证交互效果。

如果对生成结果不满意，可以用AI对话修改：

将主题色改为更深的蓝色
表格行高增加
侧边栏图标加上文字说明

AI会自动应用修改，无需手动调整。

Step 2：配置MCP服务连接GemDesign和Cursor（2分钟）

在GemDesign中生成MCP令牌：头像菜单 → MCP令牌 → 生成令牌。

打开Cursor（或Trae），进入设置 → MCP，手动添加以下配置：

{
  "mcpServers": {
    "GemDesign": {
      "command": "npx",
      "args": ["-y", "@gemcoder/gemdesign-mcp-server@latest"],
      "env": {
        "GEMDESIGN_API_KEY": "替换为你的MCP令牌"
      }
    }
  }
}

配置完成后，Cursor的AI Agent就能直接调用GemDesign的API，读取原型数据。

Step 3：在Cursor中用自然语言生成React项目（5分钟）

在Cursor中新建一个React项目（或打开已有项目），在AI对话框中输入：

使用 GemDesign MCP，帮我获取 appuuid 为 "你的应用ID" 的项目，
还原成 React + Ant Design 的代码，放到 src/pages 目录下。

AI Agent的执行流程：

调用 list_pages 获取所有页面列表
逐个调用 get_page_content 获取每个页面的HTML源码
调用 download_asset 下载图片和字体资源
分析HTML结构，映射为React组件
自动识别Ant Design组件（Table、Form、Modal等）
生成符合项目规范的JSX代码

约5分钟后，src/pages 目录下生成完整的页面组件：

src/pages/
├── UserList/        # 用户列表页
│   ├── index.tsx
│   └── components/
│       ├── FilterForm.tsx
│       └── UserTable.tsx
├── UserDetail/      # 用户详情页
│   └── index.tsx
├── Permission/      # 权限管理页
│   └── index.tsx
└── Statistics/      # 数据统计页
    └── index.tsx

Step 4：原型迭代后代码自动同步（5分钟）

产品评审后，需求发生变更。在GemDesign中用AI对话修改原型：

在用户列表页增加一个"批量删除"按钮
权限管理页增加角色分配功能

原型更新后，回到Cursor，输入：

重新获取 GemDesign 项目 "你的应用ID" 的最新页面内容，
增量更新 src/pages 下的代码，保留我手动修改的业务逻辑。

AI Agent会对比新旧HTML，识别变更部分，只更新受影响的组件，不会覆盖开发人员手动添加的业务逻辑代码。

四、效率对比：传统工作流 vs Vibe Coding工作流

用同一个"后台管理系统"项目做对比，量化两种工作流的时间成本。

环节	传统工作流	Vibe Coding工作流	节省时间
原型设计	1-2天（Axure/Figma）	3分钟（GemDesign）	约95%
PRD编写	0.5-1天	0（GemDesign自动生成需求文档）	100%
需求评审	0.5天（反复沟通）	0.5小时（可交互原型直评）	约87%
开发编码	2-3天（手动还原）	5分钟（AI生成）	约97%
需求变更同步	0.5-1天（改设计+改代码）	5分钟（AI增量更新）	约90%
总计	4-7天	约15分钟	约95%