AI生成APP原型，要先确定用户能完成哪件事，再列页面、内容和状态。输入“做一个社交APP”容易得到几张好看的独立页面；输入明确的三页范围和行为规则，才方便继续修改与评审。本文用“浏览动态—点赞—查看未读消息—返回动态”的任务，把初稿做成一份可讨论的社交APP原型。
这里的目标是可点击、可编辑的原型，包括默认、加载、无内容和失败状态；不是已经接通账号、消息推送和数据库的正式APP。可先打开墨刀AI，沿用下面的需求材料开始。
AI生成APP原型，哪些工作可以提前做好
AI适合根据文字组织页面初稿、尝试布局方向、补充说明文档，再围绕具体问题对话修改。生成速度与完成程度取决于任务、输入和服务状态，不能把一次生成当成业务规则已经确认。决定原型能否进入评审的，是字段一致、操作有结果、异常能恢复。
选择工具时先看结果去向：需要继续改组件，关注能否进入可编辑原型；需要演示，关注任务跳转和分享；需要研发接手，关注规则、版本和代码依赖。如果还在比较不同工作方式，可阅读AI原型生成的方法。下面直接用同一个社交任务跟做。
准备三页需求与一份固定数据
当前用户叫小林。第一版只包含动态、消息、个人中心三个一级页面，不制作发布、评论、分享、设置、隐私中心的完整流程；未实现的操作不放成看似可以点击的按钮。消息详情采用消息页内展开，避免无意中把三页练习扩展成十几个页面。
| 页面 | 本例内容 | 需要能完成的动作 |
|---|---|---|
| 动态 | POST-001：周岚发布的周末摄影；12个赞，当前用户未点赞 | 点赞/取消点赞，保留列表位置 |
| 消息 | MSG-001：周岚“照片发你了”，1条未读；MSG-002为已读通知 | 展开MSG-001并标为已读，返回列表 |
| 个人中心 | 小林，简介“记录产品与生活”，头像，个人动态入口 | 查看个人信息，切回其他一级页 |
点赞属于当前用户对POST-001的一次选择：第一次点击12变13，再点一次13变12；切到消息再回来不应重置。未读数是1，展开MSG-001后变0；不要只隐藏红点却让底部导航继续显示1。刷新是否保存暂不做要求，在交付说明中标为演示内状态。
准备一张有使用权的摄影图和一个头像，给POST-001使用固定标题“周末摄影练习”。图加载失败时仍显示标题与点赞入口；不能让图片是否加载决定动态能否操作。
把页面与规则一起交给AI
先让AI复述页面和规则，发现它增加了好友推荐、发布视频或付费会员时，先收回范围，再生成页面。可复制下面这段需求：
生成一个手机社交APP可评审原型，一级页只有动态、消息、个人中心。
当前用户小林，简介“记录产品与生活”，三页使用统一头像、导航和配色。
动态：POST-001，作者周岚，标题周末摄影练习，初始12赞，小林未点赞。
第一次点赞改为13，再次点击取消回12；切换一级页后保留本次选择。
消息：MSG-001“照片发你了”为1条未读；MSG-002为已读通知。
展开MSG-001后未读数归0，页面和底部导航同步，详情在消息页内展开。
个人中心展示昵称、简介和个人动态入口。暂不生成发布、评论、分享、设置的功能流程。
先列页面、状态和规则，等我确认后再生成。
补充动态加载中、无内容、加载失败重试，以及消息空列表。
只使用演示数据，不声称接入真实账号、消息推送或数据服务。
输出后列出没实现的行为，不用装饰按钮充当功能。
如果AI先给出功能文档，逐条对照三页、两个消息对象和点赞规则；如果直接出页面，也回到这些材料核对。产品入口和生成顺序会随版本变化，判断标准应是产物内容，不是必须点到某个固定按钮。
生成三页后，先走一次完整任务
- 打开动态，找到POST-001，确认初始数字12和未选中的点赞状态。
- 点赞一次，数字应为13；再取消，应回12。图标外观与数字同时变化。
- 再次点赞，切到消息，展开MSG-001；该条未读标识与导航未读数都归0。
- 进入个人中心，确认昵称仍为小林；回到动态，POST-001仍为13赞，滚动位置符合约定。
- 切换到动态加载失败状态，点击重试；失败提示消失后恢复同一任务，不能生成另一份作者或重置用户信息。
这条路径能暴露“每一页单独正确，连起来不一致”的问题。例如动态显示13，切回却变12，说明当前会话状态没有跨页保留；消息红点消失但导航仍为1，说明两个视图没有共享同一个状态。先修这些，再评价配色。
用三次局部修改补齐评审细节
先修复跨页状态
只修复POST-001与MSG-001的状态同步，不新增页面。
POST-001由同一份当前会话状态决定点赞外观和数字：未赞12，已赞13。
切换动态、消息、个人中心不重置；刷新后的保存能力不纳入本轮。
MSG-001展开后为已读，消息页与导航未读数同时从1变0。
保留现有布局、图片和文案，并说明修改了哪些状态来源。如果生成器不支持直接建立这类交互，可以把已赞、未赞、已读、未读分别做成原型状态页，并把跳转关系说明白。评审需要看懂预期行为，不能用“AI已经自动处理”掩盖未实现部分。
再补加载、空内容与失败
动态第一次加载可以使用骨架或加载提示；正常无内容显示“暂时没有动态”，网络失败显示“动态加载失败”与重试。消息空列表显示“暂时没有消息”，不展示错误图标。图片加载失败只影响图片区域，标题、作者与可用操作继续保留。
让AI只补这些状态并保持POST-001的数据，避免模型为失败页又创造一套不同的导航。没有实际网络请求时，可以在原型中提供演示入口切换状态，供评审者检查。
最后统一样式与内容长度
将按钮、顶部栏、导航选中态和字体整理为同一组规则。比如只把顶部栏改成统一色，不改点赞条件；昵称替换为“小林的城市摄影与产品观察笔记”时，规定最多两行或进入详情查看，不能压住头像和操作。宽度320px时再检查导航文字和主要操作。
若要系统推进更复杂的迭代，可继续阅读AI原型五轮迭代，把结构、业务状态和视觉分别处理。
进入墨刀原型后，把页面整理成可评审版本
根据当前工作区提供的能力，将结果转入可编辑原型，继续整理组件、页面命名与跳转。先确认落到哪个空间和文件，再检查文字、按钮和导航能否单独编辑；不能把一张合成图片当作可编辑页面。
页面建议命名为“动态-正常”“动态-失败”“消息-未读”“消息-已读”“个人中心”。将本例规则与任务编号放在对应页面附近。给评审者的指令不是“随便看看”，而是“先点赞，再读一条消息，回来确认点赞与未读状态”。
需要HTML时，先检查当前结果是否提供相应代码或导出能力。代码可用于演示与工程讨论，但不能把前端页面等同于真实消息服务。拿到代码后，可按AI生成HTML的预览、修改与交付方法整理资源和依赖。
社交APP原型的验收记录
| 任务 | 预期结果 | 优先修正的失败 |
|---|---|---|
| 点赞并取消 | 12→13→12，图标同步 | 只有颜色变化，数字没变 |
| 切换页面再回动态 | 本次点赞状态保持 | 每次回来重置 |
| 打开未读消息 | 消息与导航1→0 | 两处数字不一致 |
| 动态加载失败重试 | 显示可恢复入口，回到同一列表 | 只弹一条短提示，不能继续 |
| 文字变长与窄屏 | 昵称和导航可读，不重叠 | 用缩小全部文字硬塞 |
| 转入原型继续编辑 | 文字和组件可独立修改 | 只得到整页背景图 |
下载社交APP三页需求与提示词，或者使用8条验收用例记录你的结果。交付时一并提供页面链接、版本、当前演示范围与尚未接入的服务，团队就能判断哪些问题已解决、哪些仍需要研发实现。
掌握三页练习后，再把方法扩展到其他业务。比如做招聘APP原型时，把点赞对象替换为职位收藏、把未读对象替换为沟通消息，但重新确定规则，不能直接照搬社交逻辑。若目标转向应用页面与逻辑，可查看AI生成APP；如果仍处在初稿阶段，可按AI原型工具使用方法从已有需求继续。
教程中的操作跑通后，如果还需要比较不同实现方式，可查看AI生成APP原型工具，用相同需求检验编辑和交互能力。
准备好材料后，可以进入墨刀，开始三页APP原型。先完成一条连续任务，再扩展更多页面，通常比一次生成完整产品更容易发现并纠正问题。
