想当产品经理？快来看看我如何用Cursor画出完美原型！

2025年3月17日发布于公众号，为了保持系列文章的连贯性，特此迁移。

前言

随着AI的发展，很多产品经理现在都在做程序员的活儿——写代码。

今天我们就来试试抢一抢产品经理的工作——画原型。

你可能感兴趣：哇！Cursor竟然全面限制国内使用Claude模型，快来看看还有哪些替代方案！

背景及任务

背景

产品经理画原型，其实就是用可视化的草图展示产品效果的过程。想象一下，建筑师用设计图展示房子的结构，产品经理也是通过原型把抽象的产品概念转化为直观的图形，帮助客户和团队理解产品的功能、交互和布局。

原型真是个好东西，特别适合同步产品设计的思路，验证客户的需求理解。

不过，以前画原型的过程实在是太繁琐了，做一套原型所花的时间和精力几乎可以和前端的UI实现相提并论，这也是很多团队选择直接跳过这一步的原因。

现在有了可靠的Cursor，真得让它大显身手了。

任务

为了让大家更好地体验Cursor生成原型的效果，我们挑选了一个大家比较熟悉的OA场景来进行实践。

这个过程主要分为两步：

第一步：Cursor生成功能需求，这可以是客户提出的，也可以是大家自行分析出来的。
第二步：Cursor根据功能清单来设计原型界面。

操作过程

经过多次实验，我发现目前效果最好的组合是Cursor + Claude 3.7。

虽然Claude 3.5在代码生成方面也能满足需求，但在原型绘制上，真的不如3.7的效果好。

当然，这也可能是因为个人使用习惯的原因，如果大家在3.5上取得了不错的效果，欢迎分享经验。

功能分析

这一部分其实不是重点，我直接通过Cursor来生成了。

提示词：

我要去实现一套OA系统APP，请帮我设计一套直接可用的功能清单。
直接输出功能名称+一句话描述即可，比如：
登录：用户登录界面，支持账号密码、手机验证码等方式。
工作台：主要展示统计指标、待办事项等内容，统计指标采用卡片方式、待办事项不要使用表格样式。

结果：

生成的结果我调整了一下，变成了我喜欢的格式，如下：

登录：支持账号密码、手机验证码、人脸识别等多种登录方式。
工作台：个性化首页，展示统计指标卡片、待办任务流、公告消息等内容。
通讯录：企业员工目录，支持组织架构查看、快速搜索联系人。
待办事项：以卡片流形式展示需要处理的任务，支持优先级标记。
日程管理：个人及团队日程安排，支持日、周、月视图切换。
任务协作：团队任务分配、进度跟踪和完成情况统计。
审批界面：处理各类审批流程。
个人中心：个人信息和设置，包括用户设置、消息提醒等。

为了展示效果，我没有保留所有功能，实际使用时大家可以选择保留所有功能。

如果功能太多导致不能一次性生成，可以在提示词中添加分模块或分部分生成的指令，通过多次交互来完成。

生成原型

现在功能清单已经准备好了，咱们直接用下面的提示词生成原型吧。

泡杯茶，看看“产品经理”如何干活，真是有意思~

提示词：

我想开发一个OA系统APP，现在需要输出高保真的原型图，请通过以下步骤帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、功能分析：作为产品经理，按照下文的“功能清单”，分析App主要功能和用户需求，明确核心交互逻辑，确定关键界面。
2、高保真 UI 设计：作为UI设计师，参考主流APP效果，设计效果精致、贴近真实 iOS 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
3、HTML 原型实现：作为前端工程师，使用 HTML + CSS 生成所有原型界面，生成接近真实的 App 设计。
  - 使用 iconfont 图标库让界面更加精美。
  - 如果有图表需求，使用 echarts。
  - 字体使用阿里巴巴普惠体

功能清单：
登录：支持账号密码、手机验证码、人脸识别等多种登录方式。
工作台：个性化首页，展示统计指标卡片、待办任务流、公告消息等内容。
通讯录：企业员工目录，支持组织架构查看、快速搜索联系人。
待办事项：以卡片流形式展示需要处理的任务，支持优先级标记。
日程管理：个人及团队日程安排，支持日、周、月视图切换。
审批界面：处理各类审批流程。
个人中心：个人信息和设置，包括用户设置、消息提醒等。

实现规范：
- 每个页面独立html文件。
- CSS使用内联。
- 注意移动端适配效果。
- 图片直接使用upsplash api的真实URL。
- 拆分代码文件，保持结构清晰：每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。        
- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。

结果：