Cursor实战：抢产品经理工作——画原型AI发展起来后，到处都是产品经理在做程序员的工作——写代码。今天咱就抢一抢产

前言

AI发展起来后，到处都是产品经理在做程序员的工作——写代码。

今天咱就抢一抢产品经理的工作——画原型。

背景及任务

背景

产品经理画原型，可以理解为用可视化草图描绘产品效果的过程。就像建筑师用设计图展示房屋结构一样，产品经理通过原型将抽象的产品概念转化为直观的图形，帮助客户、团队理解产品的功能、交互和布局。

原型是个好东西，非常适合同步产品设计思路、验证客户需求理解。

但是原先绘制原型的过程太麻烦了，做一套原型出来，工作量接近前端实现UI的过程了，所以很多团队就跳过了这个步骤。

现在有了任劳任怨的 Cursor，这不得安排它干起来。

任务

为了方便大家更好的体会 Cursor 生成原型的效果，就挑了个大家差不多都了解的 OA 场景进行实践。

主要分了两步：

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

操作过程

经过个人多次实验，目前生成效果最好的是 Cursor + Claude 3.7。

Claude 3.5 在代码生成方面足够使用了，但是在原型绘制方面，在我手里目前不如 3.7 效果好。

当然，这有可能是个人使用习惯导致，大家如果在3.5上有比较好的效果，欢迎交流。

功能分析

这一步不是重点，我就直接通过 Cursor 进行生成了。

提示词：

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

结果：

20250317122021

生成结果调整为个人喜欢的格式，如下：

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

为了分享效果，我没有保留全部的功能，实际使用过程，大家可以选择保留全部功能。

如果全部功能过长导致无法一次性生成完毕，可以在提示词中增加分模块/分部分生成指令，通过多次交互的方式完成生成。

生成原型

现在功能清单也有了，我们直接使用以下提示词进行原型生成。

来杯茶，看着“产品经理”打工，不胜美哉~

提示词：

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

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

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