Cursor从入门到精通实战指南（二）：Cursor+Claude3.7快速生成零工市场APP原型

最近接手了一个零工市场的移动端开发项目，客户想简单看一下。考虑到我之前使用Cursor工具生成过多种类型的演示原型，决定把这次的设计思路系统地整理记录下来。

在开始前需确保已安装最新版Cursor编辑器（建议v0.46+），并开通Claude3.7 Sonnet模型权限。该技术栈的核心逻辑是：通过结构化提示词驱动AI完成需求分析→功能规划→界面设计→代码实现全流程，最终生成可直接用于开发的高保真HTML原型。

获取Cursor账号方法：在拼多多直接搜索即可，长期使用体验极佳。若预算充足，建议选择20美元套餐，代码工作效率可提升90%。

一、流程优化策略

1. 模块化分解：将UI拆分为布局框架、功能组件（输入/导航）、数据展示（图表/列表）三大模块分步生成
2. 多轮迭代法：
   • 第一轮生成低保真线框图
   • 第二轮注入品牌视觉规范
   • 第三轮补充交互状态说明
3. 增量式优化：通过"对比优化提示"生成2-3个备选方案，保留设计轨迹

二、提示词技巧

优化后的提示词内容会增多，如果全部整合到一个HTML文件中会导致文件过大，修改起来比较耗时。建议在页面数量较多时采用分页处理。例如使用Tailwind CSS优化样式设计，通过Unsplash自动获取高质量图片素材。

你是一位全栈工程师，同时精通产品规划和UI设计。我现在想要开发一个“零工市场”iOS App，需要输出一套完整的APP高保真原型图，请按照下面的要求执行：
- 模拟真实用户使用零工市场、家政服务类APP的真实场景和需求；
- 结合用户需求，以产品经理的视角去规划APP的功能、页面和交互；
- 结合产品规划，以设计师的视角去输出完整的UI/UX；
- 引入tai