「随机小分队」引言
Colin Matthews 曾是一位资深产品经理，现主理的《面向产品经理的 AI 原型设计课程(AI Prototyping for Product Managers) 》非常值得推荐；此外他还撰写了《成为更懂技术的产品经理（Become a more technical product manager）》。
本篇文章不仅会介绍 AI 原型设计的基础知识，还将展示如何通过最流行的 AI 工具，在不到10 分钟内构建原型；特别是提供了很多编写 Prompt 的思路和范例，非常值得大家学习。如果你在过去六个月没有关注他，可能会错过 Cursor、Replit Agent、v0、Bolt 等工具的崛起，以及其他新的前沿 AI 工具——它们允许你在几分钟内构建可用的应用。例如，Colin 只用 10 分钟就构建了下面这个 2D 坦克游戏（包含 AI 对手），使用了这一系列 Prompt：
“构建一个带有 AI 对手的 2D 坦克游戏。”
“当子弹击中坦克时添加碰撞效果。”
“当生命值降至零时，播放动画并重置游戏。”
“优化玩家移动的加速度。”
“按住空格键有一个计时器来发射第二次射击。”
“在地图上添加能量提升道具。”
Colin 用到的这些工具能帮助你不需要任何代码能力即可：
通过 Figma 设计构建功能性原型；
将粗略的手绘草图转换为可用应用；
将产品需求文档转换为交互式原型；
为团队构建可用的内部工具。
一、选择你的工具
当前的 AI 开发工具分为三种类型：
Chatbot（如 Claude、ChatGPT）：可以编写和解释基本代码
云开发环境（如 Replit、Bolt、v0、Lovable）：可以在云中构建和运行应用的全栈平台
本地开发助手（如 GitHub Copilot、Cursor、Windsurf、Zed）：通过 AI 帮助你编写代码的开发助手
下面来看看他们分别能做什么。
1.Chatbot（ChatGPT、Claude）
最适合：只有一个页面且没有复杂设计要求的原型，如计算器、翻转卡片或数据可视化。
Chatbot 能够根据问题或提示编写代码，例如，“用 React 为我构建一个计算器”这样的 Prompt 会得到以下结果：
如果你想运行这段代码，ChatGPT 要求你将代码复制并粘贴到你自己的 IDE 中，并在你自己的计算机上运行它。
Claude 通过他们的 Artifact 系统比 ChatGPT 更进一步。Artifact 允许你在 Claude 的界面内运行代码并部署到一个可共享的链接。缺点是你不能直接编辑代码，只能完全依赖于 Prompt。
（Perplexity 与他们类似，但更专注于搜索，不太适合创建应用。)
Chatbot 可以为技术栈的任何部分（客户端、服务器、数据库）编写代码，但不能托管代码。它们也不能创建包含多个页面的复杂原型，并且很难直接更改代码。因此，这些工具最适合非常简单的一次性原型：当你想创建一个非常简单的登录页面、单个输入（如日期选择器）或小型应用（如待办事项列表）时，可以考虑使用 Chatbot。
2.云开发环境（Replit、Bolt、v0、Lovable）
最适合：具有多个功能、特定设计要求或多个页面的原型。
云开发环境比 Chatbot 更进一步，这些工具能处理将想法转变为可用产品的所有任务。
它们可以帮助你构建端到端功能，处理运行原型所需的后端基础设施，通过智能工作流进行多文件编辑，处理代码库中更复杂的任务（如更新数据库架构等）。
各种云开发环境之间的一个关键区别是托管。
每个软件产品都由三部分构成：客户端、服务器和数据库。客户端是用户交互的部分（通常用 JavaScript 编写），服务器处理来自客户端的请求以检索数据或与其他产品集成（通常用 Node.js、Python 或 Java 编写），而数据库可以永久存储数据。
制作具有真实功能的原型需要你同时托管客户端和服务器代码，并可能需要数据库来支持应用。
如今最流行的工具之一，v0，能够编写和托管客户端和服务器代码。默认情况下，它使用 Next.js 和 Shadcn UI 的特定框架来实现（这两个框架都是 v0 母公司 Vercel 创建的）。
v0 可以部署你的代码并运行后端服务器，此外，它默认的样式就非常出色。
下图是在 v0 中使用 Prompt“为我构建一个基础的 CRM”得到的产品。
Bolt 与 v0 非常相似，因为它也可以生成和部署客户端和服务器代码，最关键区别在于服务器运行的位置。v0 会部署到真实的云托管基础设施，而 Bolt 直接在用户的浏览器中运行服务器代码。
这意味着 Bolt 不能原生支持需要用户登录、多用户交互（如聊天或协作）、数据安全（如支付）或需要持续存储数据的原型，因为服务器副本是在每个用户设备上创建的。你可以将其与 Supabase 等提供服务器和数据的产品集成来解决这一问题。
下图是使用 Bolt 和Prompt "为我构建一个基础的 CRM"得到的产品。
另一个流行的工具是 Replit。Replit 允许你构建全栈应用，包括客户端、服务器和数据库。它可以使用 JavaScript 和 Python 框架构建 Web 应用，还特别擅长构建内部管理工具（例如文件转换、求职者跟踪）以及具有简单 UI 的数据驱动应用（例如图像调整大小、多页仪表板）。
如果需要功能齐全的后端或想要使用 Python 代码，就应该使用 Replit。例如可以用它构建了一个 MP4 到 GIF 的转换器或一个 Substack 图像调整器。
下图是使用 Replit 和 Prompt”为我构建一个基础的 CRM"得到的产品。
Lovable 是类似于 v0 和 Bolt 的工具——它擅长生成网站，并使用 React 和 Next.js 等 JavaScript 框架。
它的差异化来自于与其他流行工具的集成。Lovable 可以连接 GitHub 仓库，自动添加 Supabase 的身份验证和数据库，并打通 Anthropic 和 OpenAI 等 AI 基础设施。这些功能让它成为最好的 AI 编程工具之一。
Lovable 的最主要缺点是没有代码编辑器，必须通过 Prompt 和 Agent 沟通，这导致很多问题不能直接在 Lovable 调试，经常需要转到 Cursor 来解决。
这是使用 Lovable 和 Prompt"为我构建一个基础的 CRM"得到的产品。
总结一下：
v0 的默认设计就非常精美
Bolt 可以快速得到设计灵活的原型
Replit 用于内部工具、存储或转换数据类产品
Lovable 用于生成需要与现有工具集成的产品
无论如何选择，所有云开发环境都能构建比 Chatbot 更复杂的应用，能够部署到云端，并支持分享。
3.本地开发助手（GitHub Copilot、Cursor、Windsurf、Zed）
最适合：知道如何编码，并要开发可投入生产的严谨应用
最后一类 AI 开发工具是本地开发助手，这些产品针对的是知道如何编写代码的人。例如 Cursor 和 GitHub Copilot 可以通过 Prompt 在自己的代码库和 IDE 中生成和调整代码。
使用 Lovable 和 Cursor 可以在 10 天内构建下面这个演示文稿应用（带有实时问答和投票）。流程是在 Lovable 中快速构建基本功能，将代码同步到 GitHub 方便编辑，再使用 Cursor 进行最终更改和修复错误。
这个应用中还使用身份验证、数据库、实时更新等。
10 天听起来可能很长，但其实大部分时间都用于解决错误——这是 Cursor 相比其他工具的优势所在，后面几节也会详细介绍这一点。
GitHub Copilot 在企业中更受欢迎，因为它来自 Microsoft。它支持通过 Prompt 进行多文件更改、代码解释等。它在给出具体指导时效果很好，但在一般指令方面不如 Cursor。例如，当在不提供上下文的情况下请求一个新功能时，Copilot 重新创建了应用中已经存在的组件，而 Cursor 直接修改了现有的文件。
另外两个大家很感兴趣的工具是 Windsurf 和 Zed。
Windsurf 是 IDE，支持对文件多行更改，移动文件类命令等提供建议。它擅长处理更大、更复杂的代码库。
Zed 是一个高性能编辑器，提供各种生产力功能，如 Prompt 库、斜杠命令和很多常见操作的键盘快捷键。
二、实操案例
现在我们已经熟悉了基本工具，下面就来具体介绍如何构建原型。
产品经理最常见的两种原型设计场景是：
将现有设计转换为功能性原型
从头开始将想法构建为原型
1.将设计转换为功能性原型
首先，让我们以 Airbnb 主页为例，将其转变为可用原型。
假设你想使用这个原型探索一个新功能，如“价格过滤器”。
这是一版初始设计：
这个任务可以选择 Bolt，因为它更适合基于之前的设计构建，而且这个场景中不需要 Replit 提供的后端数据库。可以使用下面的 Prompt，确保你也输入了设计截图！
“Build a prototype to match this design. Match it exactly.”
（创建一个和这个设计相符的原型，完全相符。）
在 Bolt 中你会得到：
接下来，我们将添加新的“价格过滤器”功能。注意下面的 Prompt 中是如何详细描述每个功能的。使用这些 AI 工具的一个重要技巧是，后续的 Prompt 要非常具体，这有助于 AI 精确定位应该更改的内容。
"Implement an inline price filter as a component of the search bar. It should appear next to ‘Add guests’ in its own section.
Selecting the input should pop up a price filter with minimum and maximum values. The
background of the pop-up should be white and should cover elements beneath it."
（在搜索栏内添加价格过滤器的组件。他应该挨着“Add guests”，在自己的 section 中。
选择输入，会弹出一个包含最大值和最小值的价格过滤器。这个弹出窗口的背景是白色的，而且应该包含上面说的全部元素。）
下面让我们为最低价格添加一个滑块来完善这个功能。
“Can you add a price slider? It should have a blue line and a black node. Sliding the node should modify the minimum price.”
“你能添加一个价格滑块吗？它有一条蓝线和一个黑色节点，滑动节点可以修改最低价格。”
如上所示，10 分钟内我们就得到了产品的功能性初始原型，不需要任何编码技能，还可以继续改进（如在调整价格时实时更新列表）。
可以在这里查看刚才生成的原型。
https://peaceful-shortbread-751d61.netlify.app/
2.从头开始构建原型
如果你还没有初始设计稿，有很多设计工具如 Tailwind 或 Shadcn UI 也可以提供相应图案或组件。
下面，我们用 Bolt 快速构建一个 CRM，然后向其添加一个新功能。
假设我们正在考虑给 CRM 添加一个功能，该功能可以直接在 CRM 中生成 Email 内容。我们想创建一个原型发给潜在客户，并收集他们的反馈。
可以先使用下面的 Prompt：
“Create a comprehensive customer relationship management (CRM) system.”
（创建一个全面的 CRM 系统。）
下面添加新的 AI 功能：
“Please implement a mock AI email writer. This should be acessible from the left nav.”
（请实现一个模拟 AI 电子邮件编写器，支持从左侧导航栏访问。”）
现在我们就可以拿着这个几分钟生成的原型，直接获取客户反馈，而无需浪费时间开发，大幅提高效率。
不同工具针对同一个 Prompt 输出的结果差异很大，下图是 v0 在完全相同的情况下输出的结果：
三、常见用例和 Prompt 模板
下面是一些常用模板：
1.从现有 Figma 设计构建原型
Prompt：
💡
Build a prototype to match this design. Match it exactly. Use Tailwindcss. Match styles, fonts, spacing, and colors. [Include a single screenshot from Figma]
（创建一个完全符合这个设计的原型图，可以用 Tailwindcss。风格、字体、空格和颜色都要保持一致。[包含一个 Figma 的截图]）
工具：Bolt
示例：https://spectacular-jelly-78231b.netlify.app/
2：从头开始构建具有良好 UI 设计的原型
Prompt：
💡
Build a prototype for [x]. This tool should:
[Behavior 1]
[Behavior 2]
[Behavior 3]
Implement a simple initial iteration that meets these exact requirements.
（为[x]创建一个原型，这个工具应该：
[行为1]
[行为2]
[行为3]
实现一个简单的版本，以满足这些确切的需求。）
工具：v0
示例：https://v0.dev/chat/zMcDEi4HTuf?b=b_blmQipLxqTK
3.构建仪表板来可视化数据
Prompt:
💡
Build a prototype for [x].
Use Python and Streamlit.
（为[x]创建一个原型，使用 Python 和 Streamlit）
工具：Replit
示例：https://product-analytics-dashboard-colinmatthews2.replit.app/
4.将手绘模型转换为原型
Prompt：
💡
Convert the hand-drawn sketch to a functional prototype. Focus on frontend functionality.
Make it in the style of [product you like].
（讲这个手绘草稿转化为功能性原型，专注在前端功能实现。它的设计风格要参考[你喜欢的产品]）
工具：v0
5.将 PRD 转换为原型
Prompt：
💡
Implement a prototype to match the features in this PRD. Follow the exact specifications in the document. Focus on front end functionality -- do not include a server or database. Use Tailwindcss.
[Copy/paste PRD. Include any relevant images!]
（构建一个符合这个 PRD 中产品特性的原型。完全按文档中的要求来。专注前端功能实现——不需要包含服务器或数据库。使用 Tailwindcss。
[复制粘贴 PRD 文档，包含所有相关的图片！]）
工具：Bolt
示例：https://musical-pegasus-eb007e.netlify.app/
6.构建你的个性化生产力工具
Prompt：
💡
Build a tool that does [x]. This tool should:
[Behavior 1]
[Behavior 2]
[Behavior 3]
（创建一个能实现[x]功能的工具，这个工具应该：
[行为1]
[行为2]
[行为3]）
工具：Replit
四、解决原型设计问题——无需知道如何编码
构建初始原型相对简单，但构建功能性原型就会复杂很多，可能会遇到障碍。下面我们来介绍，如何在不懂代码的情况下，高效的获得功能性原型。主要有以下几种方法：
Reflection（反思模式）
Batching（批量处理）
Be specific（Prompt 要具体）
Lost context（上下文丢失问题）
1.Reflection
Reflection 是从 AI 获得有价值输出的最重要策略。AI 工具一般会默认通过编写代码来响应任何问题，这就意味着缺乏计划。通过强制 AI 首先制定计划而不是直接编写代码，可以获得更好的结果，并让过程更加透明。
示例：
💡
Build me a calorie tracking app with only a front end. Start by detailing out the minimum requirements. Do not write any code.
（为我构建一个只有前端的卡路里跟踪应用。首先详细说明最低要求，不要编写任何代码。）
这个思路就是，与其让 AI 修复语法错误，不如让它提出产生错误的原因列表。要明确表示你不需要代码，只想让他制定计划。
2.Batching
Batching 有点违反直觉，大多数人认为一次性向 AI 提供更多的上下文效果更好，但事实恰恰相反。应该构建最小的功能性单元，然后逐步扩展。尝试将 Prompt 分解的更细，而不是一开始就要求一个复杂的原型。建议首先从数据模型开始，因为这是原型存储信息的基础。
示例：
💡
“Implement only the client-side view for calorie tracking. Use a basic data model that tracks entries with a description and number of associated calories. Display a table of all current entries and the sum of total calories in the top right corner.”
（仅实现卡路里追踪的客户端视图；使用一个基本的数据模型记录包含描述和相关卡路里量的条目；显示一个包含所有当前条目的表格，并在右上角显示卡路里总和。）
3.Be specific
对待 AI 要向对待小白工程师一样，更具体的指令会获得更好的结果。“具体”提现在各种形式——在用什么技术、在构建产品的什么板块、哪些具体文件或代码需要改变等。
示例：
“Add the ability to track calories on each day.
Extend the data model to include a date for the entry
Display a date picker in the entry form, defaulted to today’s date
Display today’s date inline with the total calorie amount
Add a left and right navigation arrow inline with the calorie amount to switch days backward
and forward
The total calorie amount should show the sum of calories on the specified date.”
（添加按日追踪卡路里的功能。
扩展数据模型，为条目添加日期字段
在输入表单中显示日期选择器，默认设置为当天日期
将当天日期与总卡路里数值并排显示
在卡路里数值旁添加左右导航箭头，用于前后切换日期
总卡路里数值应显示指定日期的卡路里总和。”）
4.Lost context
使用 AI 原型工具时，最令人沮丧的经历莫过于它们会重写你原型的整个部分，导致你数小时的工作付之东流。这种情况通常发生在你的指令不够具体、AI 无法确定需要做出哪些正确修改时，因此它会直接重写所有内容。幸运的是，大多数工具都内置了检查点系统，让你能够轻松回滚到之前的版本。
示例：
你还可以通过让 AI 专注于产品中需要更改的特定部分来避免上下文丢失。这可以通过结合之前提到的策略来实现：
Reflection：明确需要修改哪些文件
Batching：在每次迭代中限制更改范围
Be specific：最小化产生错误结果的可能性
AI 原型设计正在改变产品团队的工作方式。无需花费数周或数月等待功能上线，你可以快速构建原型并立即获得反馈：在一天内发布内部工具以验证其是否真正解决问题，在白板上勾勒草图并在同一天将其转化为应用程序。
这听起来像魔法，但也存在局限性。大多数产品经理应根据需求选择以下云开发环境：
v0：默认提供精美设计
Bolt：适合快速构建设计灵活的原型
Replit：用于开发内部工具或数据驱动型应用
Lovable：擅长构建可投入生产的应用及实现与其他应用的集成
在构建原型的过程中，你很可能会遇到很多问题，记住让你的 Prompt “Be specific”，“Reflection”，以及通过“Batching”来获得最佳结果。
end