共计 2130 个字符，预计需要花费 6 分钟才能阅读完成。
引言
随着人工智能的不断进步，许多产品经理逐渐承担起程序员的角色——编写代码。
今天，我们要尝试一下产品经理的工作——绘制原型。
背景与任务
背景
产品经理绘制原型，可以看作是 通过可视化草图展示产品效果 的过程。就像建筑师利用设计图呈现房屋结构一样，产品经理通过原型将抽象的产品概念转化为可视化的图形，从而帮助客户和团队理解产品的功能、交互和布局。
原型是一个非常有用的工具，特别适合于同步产品设计思路和验证客户需求的理解。
然而，之前制作原型的过程相当繁琐，完成一套原型的工作量几乎与前端实现 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 代码，并确保其可用于实际开发。结果：
效果：
挑选几个典型界面展示一下，效果相当不错。
工作台
待办事项
通讯录
总结
本文主要分享了如何借助 Cursor 绘制原型界面，依据文中验证过的提示词，整个过程显得非常顺畅且高效。
而且，在与客户的沟通中，我们能够迅速响应和修改，这将团队的效率提升到了一个新的高度。
