用AI生成手机APP，可以先做出能点击、能演示的移动端页面，再通过对话修改，最后分享预览或导出React代码。这篇教程以“学习打卡APP”为例，带你完成创建计划、每日打卡和查看统计。这里的成果是应用前端初稿，原生安装包和应用商店上架还需要后续开发。
打开墨刀AI生成APP，登录后进入“生成应用”，就可以使用下面的提示词开始。第一次跟做时，先完成学习打卡这条主流程，注册登录、消息提醒等功能可以等初稿清楚后再补。
复制这段提示词，做一个学习打卡APP
不必先写一大份PRD。这个例子的用户是学生和备考人群，最重要的任务是“建立学习计划，并记录今天有没有完成”。把页面、字段和操作规则写进同一段需求，AI才有具体内容可以生成。
请设计一个适合手机使用的学习打卡APP前端演示，面向学生和备考人群，风格清爽、文字清晰，以蓝紫色为主。
页面包括：首页、计划列表、创建计划、打卡记录、学习统计和个人中心。首页突出今日任务；底部导航保留首页、计划、统计、我的。先用示例数据，不接入真实登录、支付和服务端接口。
创建计划时填写计划名称、每日学习分钟数、开始日期和结束日期。请以“每天阅读30分钟”为示例：用户创建计划后，可以在首页完成当天打卡，查看打卡记录，再到统计页查看累计学习时长和连续打卡天数。
当天打卡成功后，按钮变为“已打卡”，当天不能重复计数；没有计划时显示“创建第一个学习计划”；计划名称为空或结束日期早于开始日期时，给出明确提示。统计页的数字需要与本例的打卡记录对应，不用随机数字装饰图表。
生成可以点击预览的多页面界面，保持页面间的导航、样式和示例数据一致。
做记账APP时，可以把“学习计划、打卡、学习时长”换成“账本、收支记录、分类统计”；做预约APP时，则换成“服务、预约时段、预约记录”。保留一个能完整走完的任务，比一次要求几十种功能更容易发现问题。
把需求放进墨刀AI，生成多页面初稿
在“生成应用”的输入区粘贴提示词并提交。需要贴近已有品牌时，可以补充主色和界面参考；没有明确视觉规范，就先使用示例中的简单风格。下面的截图展示学习打卡案例的需求输入，界面入口名称可能随版本调整。
- 确认生成对象。需求应指向手机使用的应用页面。若当前结果只给出文字方案，补充“请继续生成可点击的应用界面”。
- 有追问时补充关键细节。例如一次打卡对应哪项计划、统计按天还是按周查看。没有出现追问时，直接查看生成结果，不必等一个固定的确认流程。
- 浏览页面和入口。首页应能进入创建计划和打卡记录，底部导航能到计划、统计与个人中心。缺少某页时，指出页面名称及入口位置继续修改。
这一步得到的应是可浏览的前端初稿。启动页、登录注册页和提醒设置可以随后添加；登录表单的存在不代表已经接通真实账号，提醒界面也不等于手机已经具备系统推送能力。
让创建计划、打卡和统计连起来
第一版出来后，先让同一条学习记录在几个页面之间连起来。按以下顺序试一次，就能分清“页面都有了”和“主流程能演示”之间的差别。下面写的是本例希望达到的效果，发现不符时可继续向AI描述修改要求。
- 新建“每天阅读30分钟”的计划，设置有效的起止日期。保存后，计划列表应出现它，首页也应显示今天的学习任务。
- 在首页完成第一次打卡，按钮应变成“已打卡”，打卡记录应出现今天这一条记录。
- 当天再次操作时，不应多出一条记录，也不应额外累加30分钟。
- 如果示例中只有这一次打卡，累计学习时长应为30分钟、连续打卡为1天；有其他示例记录时，统计数字也要能从记录中对应出来。
如果要增加完成率，可以先采用一个清楚的口径：已打卡天数除以截至今天应打卡的天数，不把未来日期算进分母。连续天数、完成率和趋势图都沿用同一组记录，后续评审才不会出现几个页面各说各话的情况。
如果打卡后统计没变化，可以直接输入这一条修改指令：
请修复学习打卡的数据联动：完成“每天阅读30分钟”的当天打卡后，首页显示已打卡，记录页新增当天记录，统计页同步更新累计时长和连续天数。同一天重复点击不新增记录。只修改相关状态和计算逻辑，保留其他页面布局与配色。
墨刀AI支持通过对话继续调整页面。描述修改时给出具体页面和预期变化，例如“把首页改成今日任务卡片”“在统计页增加近七天趋势”“底部导航保留四个入口”。一次处理一类问题，完成后再统一字号、颜色、卡片圆角和间距。
计划保存了，刷新后为什么不见了？
先分清数据保存在什么地方。演示中的记录可能只保留在当前页面状态中，刷新后就会重置。用于方案演示时，可以要求保留必要的示例数据，或让开发确认是否需要浏览器本地保存；多账号、跨设备同步则要由开发接入真实的数据服务，不能仅靠“保存成功”的提示判断已经完成。
新用户没有计划时，页面应该显示什么？
不要留下空白列表。可以补充：“没有学习计划时显示一句说明和创建入口；计划名称为空时，保留已填写内容并提示补全。”登录失败、网络请求失败也应有相应反馈；尚未接入真实服务时，把这些作为需要演示和后续开发的状态来设计。
在手机上试一遍，再发给团队
在项目中找到分享或预览入口，把在线链接发到手机浏览器。重点不是把电脑窗口缩小，而是确认真实触控、输入和滚动时，创建计划与打卡这条任务仍然顺畅。
- 点击计划名称输入框，确认键盘出现后仍能找到保存按钮，必要时可以滚动到按钮。
- 将计划名称改成长一点的中文，观察是否换行，是否挤掉学习时长和打卡入口。
- 切换首页、计划和统计，确认底部导航没有遮住最后一条记录，当前页面状态清楚。
- 打开分享链接时核对访问权限，只使用示例姓名和记录，避免将真实个人信息带入公开演示。
若某个模块在手机上被截断，可以说明具体位置：“在窄屏手机上，统计页图表超出屏幕，请让图表随容器缩放，保留坐标标签，页面不要出现横向滚动。”发给团队时附上一句任务：“创建一个七天阅读计划，并完成首次打卡。”这样收回的意见通常比一句“看看效果”更具体。
导出React代码后，开发还要做什么？
墨刀AI支持导出React代码，适合把前端初稿交给开发继续实现。在项目中使用代码下载入口后，先查看实际导出文件和项目说明，再按该项目的依赖与启动方式运行；不要把其他项目的命令直接套用过来。
这个案例进入真实项目后，还需要接入账号体系、计划与打卡的数据接口、服务端日期和去重规则，并处理访问权限、异常反馈与测试。页面组件、路由和状态管理也要与团队的工程规范保持一致。需要了解更完整的协作过程，可以继续阅读AI辅助APP开发流程。
导出React前端代码不等于获得Android APK或iOS安装包。如果目标是安装到手机并上架应用商店，还要选择原生或跨端实现方案，完成设备能力适配、构建签名和相应平台的提交审核。React与React Native也不是同一个交付结果，可参考React Native官方入门文档了解原生开发这一环节。
第一次尝试到这里就有了清楚的目标：一套能演示学习计划、打卡和统计的页面，以及可继续开发的前端初稿。现在可以用墨刀AI试做这个学习打卡APP，先复制提示词走完主流程，再把页面和数据换成自己的业务。
