Cursor+Claude-3.7-sonnet 生成一整套APP原型图：AI英语口语学习助手app

一、引言

在 AI 技术快速发展的今天，特别是随着 Claude 3.7 的发布，AI 辅助设计和开发已经达到了一个新的高度。
本文将详细介绍如何使用 Cursor IDE 配合 Claude-3.7-sonnet 来设计一个 AI 英语口语学习助手的完整原型图。

二、设计准备

2.1 工具选择

Cursor IDE（版本 0.48.8+）
Claude 3.7 Sonnet 模型

2.2 提示词设计

你是一位全栈工程师，同时精通产品规划和UI设计。  
我想开发一个AI英语口语学习助手app，现在需要输出完整的APP原型图，请通过以下方式帮我完成app所有原型图片的设计。  
1、思考用户需要AI英语口语学习助手app实现哪些功能  
2、结合用户需求，以产品经理的视角去规划APP的功能、页面和交互；  
3、作为设计师思考这些原型界面的设计，并以设计师的视角去输出完整的UI/UX； 
4、使用html在一个界面上生成所有的原型界面，原型颜色风格以文件命名为:english_learn_app.html，可以使用FontAwesome等开源图标库，让原型显得更精美和接近真实  
5、我希望这些界面是需要能直接拿去进行开发的

2.3 实现过程

1. 在 Cursor IDE 中创建新项目
2. 输入设计提示词
3. 等待 AI 生成原型界面
4. 当一次对话完成直接输入：继续即可
   
   

三、功能界面查看

代码生成后直接去运行在浏览器查看

四、自动生成README.md功能描述

五、总结

通过 Cursor+Claude-3.7-sonnet 的组合，我们能够快速生成高质量的 APP 原型图，这不仅提高了设计效率，也为后续开发提供了清晰的参考。
这种 AI 辅助设计的方式代表了未来产品设计的新趋势。当然当前做到生产级别的设计显然是不现实，不过我相信未来可期。