No-Code MVP 构建：从构思到上线

⏱️ 90分钟

No-Code MVP 构建：从构思到上线

交付物：可在线运行的 AI 交互原型 (v0/Coze)

为什么 PM 需要会做原型？

在传统模式下，产品经理提需求，等工程师开发，一个简单功能可能要等 1-2 周。

但在 AI 时代，PM 可以自己做原型。

这不是要 PM 取代工程师，而是：

更快验证想法：不用等开发排期，当天就能看到效果
更好沟通需求：一个可运行的 Demo 胜过千言万语
更深理解技术：亲手做过，才知道什么能做、什么难做

本章将介绍几种 No-Code/Low-Code 工具，帮你在 1-2 小时内 构建可运行的 AI 产品原型。

1. 工具选型指南

1.1 主流 No-Code 工具对比

工具	定位	优势	劣势	适用场景
v0.dev	AI 生成前端界面	一句话生成 UI，React 代码	仅前端，无后端逻辑	Landing Page、组件原型
Bolt.new	AI 全栈开发	一句话生成完整应用	复杂逻辑需手动调整	完整 Web 应用原型
Cursor	AI 辅助编程	代码质量高，灵活度大	需要基础代码知识	正式产品开发
Coze	对话式 AI 应用	拖拽搭建，内置 LLM	定制化程度有限	智能客服、问答 Bot
Dify	LLM 应用开发平台	开源，可私有部署	学习曲线较陡	企业级 AI 应用
Make/Zapier	自动化工作流	连接 2000+ 应用	不适合复杂逻辑	跨系统集成自动化

1.2 选型决策

你想做什么？
│
├── 展示型页面（Landing Page、产品介绍）
│   └── v0.dev
│
├── 完整 Web 应用（含后端逻辑）
│   └── Bolt.new / Cursor
│
├── 对话式 AI（客服、问答、助手）
│   └── Coze / Dify
│
├── 跨系统集成（数据同步、自动化）
│   └── Make / Zapier
│
└── 正式产品开发（需要代码控制）
    └── Cursor + 工程师

2. v0.dev 实战：AI 生成前端界面

2.1 什么是 v0.dev？

v0 是 Vercel 推出的 AI 生成界面工具：

输入自然语言描述
AI 自动生成 React + Tailwind CSS 代码
支持在线预览和一键部署

2.2 基础使用流程

Step 1: 访问 v0.dev

打开 https://v0.dev
使用 GitHub 账号登录

Step 2: 描述你想要的界面

示例 Prompt：

一个 SaaS 产品的 Pricing 页面，包含：
- 标题：Choose Your Plan
- 三个定价卡片：Basic $9/月、Pro $29/月、Enterprise 联系销售
- 每个卡片包含功能列表、CTA 按钮
- Pro 方案高亮显示为推荐
- 支持暗色/亮色模式切换
- 风格：现代、简洁、专业

Step 3: 迭代优化

点击生成的界面，选择"Edit"
输入修改需求，如"按钮改成渐变色"
继续迭代直到满意

Step 4: 导出代码

点击"Code"查看生成的代码
可以直接复制到你的项目中

2.3 v0 Prompt 技巧

描述结构：

## 页面类型

[Landing Page / Dashboard / Form / ...]

## 核心元素

-   元素 1：[描述]
-   元素 2：[描述]

## 交互行为

-   [交互描述]

## 视觉风格

-   配色：[描述]
-   风格：[现代/极简/活泼/专业]

## 参考

类似 [知名产品] 的 [某个页面] 风格

示例 Prompt：

AI 写作助手的编辑界面：

核心元素：

-   左侧：文档列表（可折叠侧边栏）
-   中间：富文本编辑区（Markdown 支持）
-   右侧：AI 建议面板（可展开/收起）

交互行为：

-   选中文本后显示 AI 操作菜单（改写、扩写、总结）
-   右侧面板实时显示 AI 建议

视觉风格：

-   参考 Notion 的简洁风格
-   主色：深蓝色 + 白色
-   暗色模式支持

响应式：

-   移动端隐藏侧边栏，底部 Tab 切换

3. Bolt.new 实战：一句话生成完整应用

3.1 什么是 Bolt.new？

Bolt.new 是 StackBlitz 推出的 AI 全栈开发工具：

一句话描述，生成完整应用（前端 + 后端 + 数据库）
在线编辑、实时预览
支持一键部署

3.2 基础使用流程

Step 1: 访问 Bolt.new

打开 https://bolt.new
无需登录即可开始

Step 2: 描述你的应用

示例 Prompt：

创建一个简单的 AI 问答应用：
- 用户输入问题
- 调用 OpenAI API 获取回答
- 显示回答，支持 Markdown 渲染
- 保存历史对话记录
- 使用 React + Tailwind CSS

Step 3: 配置 API Key

Bolt 会生成调用 AI 的代码框架
你需要在环境变量中配置 OpenAI API Key

Step 4: 测试和部署

在线测试应用功能
满意后一键部署到 Netlify/Vercel

3.3 Bolt Prompt 进阶

复杂应用示例：

创建一个 AI 文档助手：

功能需求：

1. 用户上传 PDF 文件
2. 解析 PDF 内容并存储
3. 用户可以针对文档内容提问
4. AI 基于文档内容回答问题
5. 显示回答来源（引用原文）

技术栈：

-   前端：React + Tailwind CSS + shadcn/ui
-   后端：Next.js API Routes
-   文件存储：本地文件系统
-   AI：OpenAI GPT-4

界面布局：

-   左侧：文档列表
-   右侧：对话界面
-   顶部：上传文件按钮

4. Coze 实战：零代码搭建 AI Bot

4.1 什么是 Coze？

Coze（扣子）是字节跳动推出的 AI Bot 搭建平台：

拖拽式界面，无需代码
内置多种 LLM（GPT-4、Claude、豆包）
支持多种发布渠道（Web、飞书、微信）

4.2 搭建流程

Step 1: 创建 Bot

访问 https://www.coze.cn（国内）或 https://www.coze.com（海外）
点击"创建 Bot"

Step 2: 配置基础信息

Bot 名称
Bot 头像
Bot 简介

Step 3: 设置人设（Persona）

你是一位专业的产品经理助手，名叫"小 P"。

你的职责是：

-   帮助用户梳理需求
-   回答产品管理相关问题
-   提供 PRD 模板和建议

你的性格：

-   专业但不枯燥
-   耐心解答问题
-   适时追问以获取更多信息

限制：

-   只回答产品管理相关问题
-   不涉及敏感话题
-   对于不确定的问题，坦诚表示不知道

Step 4: 添加知识库

上传产品相关文档
Bot 可以基于知识库回答问题

Step 5: 配置工具（Plugins）

网页搜索
图片生成
代码执行
自定义 API 调用

Step 6: 测试和发布

在对话框中测试
满意后发布到指定渠道

4.3 Coze 进阶玩法

多 Agent 协作：

主 Bot：产品经理助手
├── 子 Agent 1：需求分析专家（分析用户输入的需求）
├── 子 Agent 2：文档生成器（生成 PRD）
└── 子 Agent 3：数据分析师（分析市场数据）

工作流：
1. 用户输入需求
2. 主 Bot 调用"需求分析专家"解析需求
3. 根据分析结果，调用"文档生成器"生成 PRD
4. 如需要，调用"数据分析师"补充市场数据

工作流（Workflow）：

定义复杂的处理流程
条件分支、循环、变量
可以实现复杂的业务逻辑

5. Dify 实战：企业级 LLM 应用

5.1 什么是 Dify？

Dify 是一个开源的 LLM 应用开发平台：

支持私有部署
可视化编排工作流
内置 RAG 能力
支持多种 LLM

5.2 核心概念

应用类型：
- Chat App：对话应用
- Completion App：文本生成
- Workflow：工作流
- Agent：智能体
知识库（Knowledge）：
- 上传文档
- 自动切分和向量化
- RAG 检索
工具（Tools）：
- 内置工具（搜索、代码执行）
- 自定义 API

5.3 搭建 RAG 问答应用

Step 1: 创建知识库

上传产品文档、FAQ、政策等
配置切分策略（按段落/固定长度）
选择 Embedding 模型

Step 2: 创建 Chat 应用

选择 LLM（GPT-4 / Claude）
配置 System Prompt
关联知识库

Step 3: 配置 Prompt

你是 [公司名] 的智能客服助手。

规则：

1. 基于提供的知识库回答问题
2. 如果知识库中没有相关信息，诚实说"我不确定"
3. 回答时引用来源文档
4. 保持友好、专业的语气

知识库信息将通过 context 提供给你。

Step 4: 测试和调优

测试各种问题
调整检索参数（Top K、相似度阈值）
优化 Prompt

6. Make/Zapier 实战：跨系统自动化

6.1 使用场景

线索同步：表单提交 → CRM 创建客户
通知推送：GitHub Issue → Slack 通知
数据备份：Google Sheet → 数据库
AI 处理：邮件 → AI 总结 → 发送摘要

6.2 示例：AI 邮件助手

流程设计：

触发器：收到新邮件
↓
筛选：主题包含"需求"
↓
AI 处理：用 GPT 总结邮件内容
↓
创建任务：在项目管理工具中创建任务
↓
通知：发送 Slack 消息

Make 配置：

添加 Gmail 模块，监听新邮件
添加 Filter，筛选包含"需求"的邮件
添加 OpenAI 模块，输入邮件内容
添加 Notion/Asana 模块，创建任务
添加 Slack 模块，发送通知

7. 实战项目：构建 AI 客服原型

7.1 需求描述

产品：AI 智能客服
目标：7×24 自动回复官网访客的常见问题

功能需求：

1. 用户输入问题
2. AI 基于知识库回答
3. 如果无法回答，转人工
4. 记录对话历史

技术要求：

-   使用 Coze 或 Dify 搭建
-   知识库包含产品 FAQ、定价、功能介绍
-   支持嵌入到官网

7.2 Coze 实现步骤

1. 准备知识库文档

# 产品 FAQ

## Q1: 你们的产品是什么？

我们是一个 AI 学习平台，提供 AI 相关的课程和培训。

## Q2: 如何注册账号？

访问官网，点击"注册"按钮，填写邮箱和密码即可。

## Q3: 课程价格是多少？

-   基础课程：免费
-   进阶课程：¥299/月
-   企业定制：联系销售

...

2. 创建 Bot 并配置人设

你是 JR Academy 的智能客服小助手，名叫"小匠"。

你的职责：

-   回答关于 JR Academy 课程、价格、注册的问题
-   帮助用户找到合适的学习资源
-   对于复杂问题，引导用户联系人工客服

回答风格：

-   友好、热情
-   回答简洁，不超过 3 句话
-   适当使用表情符号

重要规则：

-   只回答与 JR Academy 相关的问题
-   不知道的问题说"这个问题我不太确定，建议您联系人工客服：xxx"
-   不回答敏感话题

3. 上传知识库

上传 FAQ 文档
上传产品介绍文档
上传定价说明

4. 配置工具（可选）

添加"转人工"动作
添加"发送邮件"动作

5. 测试和调优

测试各种问题类型
调整回答质量
收集反馈优化

6. 发布

获取嵌入代码
集成到官网

7.3 交付物检查清单

知识库覆盖常见问题（>80%）
回答准确率达到 90%+
回答响应时间 < 3 秒
无法回答时有合理的兜底
界面风格与官网一致
可以正常嵌入运行

8. 本章小结

通过这一章的学习，你应该掌握了：

工具选型：根据需求选择合适的 No-Code 工具
v0.dev：AI 生成前端界面
Bolt.new：一句话生成完整应用
Coze/Dify：零代码搭建 AI Bot
Make/Zapier：跨系统自动化

关键心法：

No-Code 不是"低级"，而是"高效"
先快速验证想法，再决定是否投入开发
原型不需要完美，能说明问题就够了
持续迭代，边做边优化

下一章，我们将学习如何使用 AI 进行用户研究和竞品分析。

No-Code MVP 构建：从构思到上线

No-Code MVP 构建：从构思到上线

为什么 PM 需要会做原型？

1. 工具选型指南

1.1 主流 No-Code 工具对比

1.2 选型决策

2. v0.dev 实战：AI 生成前端界面

2.1 什么是 v0.dev？

2.2 基础使用流程

2.3 v0 Prompt 技巧

3. Bolt.new 实战：一句话生成完整应用

3.1 什么是 Bolt.new？

3.2 基础使用流程

3.3 Bolt Prompt 进阶

4. Coze 实战：零代码搭建 AI Bot

4.1 什么是 Coze？

4.2 搭建流程

4.3 Coze 进阶玩法

5. Dify 实战：企业级 LLM 应用

5.1 什么是 Dify？

5.2 核心概念

5.3 搭建 RAG 问答应用

6. Make/Zapier 实战：跨系统自动化

6.1 使用场景

6.2 示例：AI 邮件助手

7. 实战项目：构建 AI 客服原型

7.1 需求描述

7.2 Coze 实现步骤

7.3 交付物检查清单

8. 本章小结

参考资源

📚 相关资源