无需UI设计，Cursor带你快速生成专业原型稿！

今天用cursor生成原型稿，仅用一句提示词，就可以完成一整个App的原型设计

模型使用Claude 3.7 sonnet，并且使用Agent模式

Cursor

Agent模式，能够主动分析问题，制定计划，调用各种工具，分步骤完成复杂任务。号称最强大模式

因为要让Cursor从0生成原型稿，所以需要Cursor充当三个角色

所以我们的提示词也遵循这个设计，现在我要开发一个背单词的app,根据三个角色设计提示词

我想开发一个英语背单词的app要输出原型图，请通过以下方式帮我完成app所有原型图片的设计。
1、作为产品经理先设计出这个app实现哪些功能
2、作为UI设计师完成这些原型界面的设计
3、使用html在一个界面上生成所有的原型界面，使用Tailwind CSS创建高保真UI原型，可从Unsplash获取图片素材，使用FontAwesome等开源图标库，让原型显得更精美和接近真实
4、我希望这些界面可直接用于项目开发

可以看到Cursor正在帮我们梳理需求，生成代码

作为产品经理，Cursor规划这些主要功能：

• 单词学习
  • 每日推荐单词列表
  • 单词详情（发音、释义、例句、记忆技巧）
  • 单词收藏功能
• 复习系统
  • 智能复习提醒
  • 多种复习模式（选择题、拼写、连线等）
  • 错题本功能
• 学习计划
  • 自定义学习目标
  • 进度追踪
  • 学习数据统计
• 个人中心
  • 学习历程记录
  • 成就系统
  • 个人设置

作为UI设计师，Cursor给出以下设计风格：

• 配色方案：使用清新的蓝色系为主色调，体现学习氛围
• 布局：简洁直观，重点突出学习内容
• 交互：流畅自然，减少学习负担
• 视觉元素：使用扁平化设计，适当加入插画增加趣味性

最后Cursor输出如下原型文件

这是一个简单的应用，输出的内容比较少，如果是一个复杂的项目，会出现tokens过长，终止输出的问题，可以让Cursor分步骤生成解决这个问题