Cursor+Claude3.7开发App完整过程，全程0代码，从开发到运行30分钟都不到！

Cursor+Claude3.7开发App完整过程，全程0代码，从开发到运行30分钟都不到！

一、生成提示词

​ 如果你想通过AI开发一款界面美观的App，那么提示词非常重要，提示词能够让AI更加清楚我们想做的东西。做出来的效果也会更加符合我们的需求，如果一上来就直接让它开始生成代码，写出来的东西会非常难看。下面是我用ChatGPT帮我生成一份标准的提示词，当然如果你觉得提示词中有些内容和你的预期不太符合你也可以自己修改。这里我只是给出一份标准的提示词给大家参考哈，这不是我的这篇文章中开发这款健身打卡App所使用的提示词，大家可以参考这个进行修改或者你让AI给你生成一份也是可以的。

主题： 健身打卡 App UI/UX 设计
目标： 设计一个现代、简约且美观的健身打卡 App UI/UX，并将其展示在一个 HTML 页面上，适用于 Android 设备。
界面风格：
- 现代、简约、专业，符合健身行业的设计趋势。
- 采用清新健康的配色方案（如蓝色、绿色、橙色、黑色等）。
- 以卡片式设计呈现信息，确保视觉层次分明，用户体验流畅。
- 适配暗黑模式，支持流畅动画与过渡效果。
核心功能页面：
1. 首页（Dashboard）
   - 展示用户的每日打卡情况（进度条/统计数据）。
   - 显示最近的健身记录和成就徽章。
   - 快捷入口（开始健身、查看历史数据、设置目标）。
2. 打卡页面（Workout Tracker）
   - 显示当前健身计划（如有氧、力量训练等）。
   - 计时器与健身进度条。
   - 记录完成的运动，并支持添加备注。
   - 结束后弹出“打卡成功”动画反馈。
3. 历史数据（Workout History）
   - 以图表形式展示一周/月的健身数据趋势。
   - 显示每日健身时间、卡路里消耗等。
   - 允许用户筛选不同时间段的数据。
4. 个人中心（Profile）
   - 展示用户头像、昵称、健身目标。
   - 设置健身计划（如每周健身目标）。
   - 切换主题模式（浅色/深色）。
   - 账号管理（登录/退出）。
交互与动画效果：
- 页面切换采用平滑的渐变动画。
- 打卡完成后弹出动态徽章或庆祝动画。
- 按钮具有点击反馈，提升交互体验。
HTML 页面要求：
- 采用 HTML + CSS + JavaScript 编写，并可使用 Tailwind CSS 进行快速布局。
- UI 需能完整展示各个页面的设计方案，并带有交互动效。
- 页面整体美观、布局合理，可直接用于开发参考。

二、通过提示词生成App的UI/UX

​ 接下来就可以使用你生成的提示词让Claude来生成App的UI/UX界面，这一步也很重要我们需要Claude先将生成的UI/UX放到一个HTML上展示出来效果，如果出来的效果不符合预期的话我们也可以让它调整到我们满意的样子。这一步生成的UI/UX效果就是后面生成的App产品原型图，如果你的界面相对复杂，生成出来的App可能会有所差异。下面展示的我生成的App产品原型图，谈不上好看谈不上难看。

三、根据UI/UX生成App代码

​ 这一步相对简单，我们只需要告诉Claude照着我这个原型生成一个一模一样的App出来，在代码生成的过程中可能会因为太长导致它自己停下来了，只需要告诉它继续生成即可。等代码生成完毕我们就可以使用Android Studio打开项目了，如果你没有安装手机模拟器请先安装手机模拟器，如果你运气好第一次就能跑起来。但多数情况下会有问题，你需要在Cursor中打开你的App的项目文件，然后将报错的信息粘贴到输入框中告诉AI帮你解决报错，它就会开始扫描文件帮你解决问题。

四、运行效果

​ 当报错解决完成后你就可以运行起来了，下面展示的是App运行在手机模拟器上面的截图，是不是和上面的产品原型图一毛一样。不得不说Claude确实有点厉害，半个小时写一个App。

五、打包

​ 当你的App成功运行起来后，你可以给自己的App添加一个Logo下面的图中有教程，照着图片来就可以了。当整个App开发完毕后你可以打包然后发布到应用商店，前提是你得先申请发布App的资格。