title: '完整项目实战：从想法到作品' description: '把已经接入 AI 的原型完整用一遍，请别人来试试，再把发现的问题改好。'

完整项目实战：从想法到作品

章节导读

前面几章里，我们从一个想法出发，做出了可以操作的原型，也让页面里的 AI 功能真正运行了起来。

做到这里，你当然知道应该填什么、点哪里。但换一个第一次打开页面的人，他可能连第一步都找不到；点完按钮没有立即出现结果，也可能以为页面坏了。

这一章先不加新功能。我们把产品从头到尾用一遍，把这些容易卡住的地方补好，再请别人来试试。最后，你会得到一个可以放心发给别人体验的作品。

1. 从头到尾用一次你的产品

先别急着添加登录、团队协作和数据看板。打开现在的产品，像用户一样从第一页开始，一直用到拿到结果。哪一步还需要你在旁边解释，哪一步就是接下来要改的地方。

在我们的电商内容工作台里，一次完整的使用大概是这样：

一位电商运营上传商品图片，补充必要信息，生成一版图文草稿，检查结果后复制或保存，用于后续修改和上架。

先把这一小段做好就够了。登录、团队权限和正式发布，都可以等产品真的需要时再加。

1.1 按真实的使用顺序走一遍

先别看代码和组件，照着用户会做的事情一步步往下走：

1. 打开页面，知道这个工具可以帮自己做什么；
2. 上传一张商品图片，填写名称、材质等必要信息；
3. 点击“生成文案”，看见页面正在处理；
4. 检查 AI 返回的标题和卖点，发现问题时可以修改或重新生成；
5. 复制、下载或暂时保存结果，完成这次任务。

走完以后问问自己：如果我不在旁边，对方会不会卡住？至于团队成员管理、复杂数据看板这些不影响本次使用的功能，先记下来，不必现在就做。

::: tip 这次要做到多大？ 如果你能用一句话告诉别人要完成什么，而且对方几分钟内就能动手尝试，这个范围通常正合适。 :::

1.2 换到一个空白页面再试

开发久了，页面里往往已经填好了数据，也留下了上一次生成的结果。我们因此很容易忘记，第一次打开时其实什么都没有。可以开一个无痕窗口，或者清空本地数据，再从头试一次。

不用检查很多内容，只试下面三次：

1. 空白打开一次：不填内容直接点击，看看页面会不会提示需要填写什么；
2. 正常生成一次：上传图片并生成内容，确认等待时有提示，结果出来后也有清楚的下一步；
3. 模拟出错一次：上传不支持的文件，或者让请求失败，确认刚才填写的内容还在，也可以重新尝试。

遇到卡住的地方就记下来，下一节我们再逐个补好。

可以请 AI IDE 帮你检查代码，但不要让它替代实际操作：

请先不要修改代码。

按照下面这条用户任务检查当前项目：
用户上传商品图片，填写必要信息，生成文案，
检查结果后复制或保存。

请告诉我这条流程涉及哪些页面和文件，
并列出目前可能中断流程的地方。

AI IDE 可以帮你找到可能有问题的代码，但页面好不好用，还是要自己点过才知道。

2. 把几个容易卡住的地方补好

自己从头用一遍后，问题通常会出现在四个地方：刚打开页面时、等待 AI 时、拿到结果以后，以及请求失败时。这里不需要复杂设计，只要让人知道发生了什么，接下来还能做什么。

2.1 第一次打开，知道该做什么吗？

空白页面不应只放一个输入框。可以准备一句简短说明、一组示例内容，或者在上传区域标明支持的图片格式和大小。

如果表单字段很多，先保留生成结果真正需要的部分。比如商品名称、图片和核心特点可能是必填项，品牌、参考链接和更多风格参数可以放到“更多设置”中。用户第一次使用时，不应该先完成一份很长的登记表。

2.2 点了按钮，页面有没有回应？

AI 请求往往需要几秒甚至更久。点击以后，按钮应该显示“生成中”并暂时避免重复提交；已经填写的内容不要突然消失，页面也不要立刻跳到一个空白结果区。

等待状态不需要复杂动画。让用户看见任务已经开始，并且原来的输入和页面位置仍然保留，就已经解决了大部分困惑。

如果图片或视频需要排队，可以进一步显示“正在排队”“正在生成”等阶段。不要编造一个看似精确的百分比，除非接口真的提供了进度。

2.3 结果出来以后，下一步是什么？

AI 返回内容不是流程的终点。用户通常还要检查事实、修改措辞，并把结果带到下一步。因此结果区至少应提供一种可继续操作的方式，例如编辑、复制、下载或重新生成。

这个页面先保留用户上传的商品图片，再把识别和生成结果放在下方。用户可以对照原图检查内容，而不是只能接受模型的一次回答。

如果结果中存在模型无法确认的信息，可以直接标出来，让用户补充或删除。比起把一段文字包装成“最终答案”，这种做法更符合真实工作过程。

2.4 出错以后，还能不能继续？

网络中断、额度不足和文件格式错误都会导致请求失败。页面不必向普通用户展示整段技术报错，但要说明这次操作没有完成，并提供重试或返回修改的入口。

例如：

• 图片格式不支持：说明当前支持的格式，并允许重新选择；
• 必填信息缺失：在对应字段附近提示，不要只弹出一句“参数错误”；
• AI 服务暂时不可用：保留已经填写的内容，并提供“重新生成”；
• 生成结果不符合预期：允许修改输入后再试，而不是让用户从头开始。

如果刷新页面会让用户丢掉一大段输入，可以使用 LocalStorage 暂时保存表单草稿。这里只保存继续任务所需的普通数据，不要把 API Key、真实客户资料或敏感文件写进浏览器存储。

可以把刚才发现的问题交给 AI IDE，一次处理：

请围绕“上传商品图片并生成文案”这条流程，
检查开始、等待、成功和失败四个时刻。

优先修复会阻止用户继续操作的问题：
- 必填项缺少提示；
- 请求期间可以重复点击；
- 失败后输入被清空；
- 结果没有编辑、复制或重新生成入口。

修改前先告诉我准备改哪些文件，
完成后给出一套手动测试步骤。

3. 请别人来用一次

自己做的页面，用久了以后怎么看都很顺。找一个没参与开发的人来用，往往几分钟就能发现我们一直没注意到的问题。

最好找真正可能使用它的人。电商内容工具可以请做过运营、开过网店或经常制作商品内容的人来试。如果暂时找不到，找一位没看过这个页面的朋友也可以。

3.1 只告诉他要完成什么

测试开始时，只说明目标：

请用这个工具，根据这张商品图片生成一版标题和卖点。检查内容以后，把你认为可以继续修改的版本复制出来。

接下来先观察，不要马上告诉对方该点击哪里。记录他停顿、返回、重复点击和向你提问的位置。如果你一开口就解释，原本应该由页面解决的问题就会被掩盖。

哪怕只找一两个人，也能发现不少明显问题。不用写正式报告，记住他在哪里停住就行。

比如，他打开页面后一直没有动，就补一句用途说明；反复点击“生成”，就让按钮清楚地显示“生成中”；拿到结果后不知道该做什么，就加上编辑或复制；出错以后又要重新填写，就保留原来的内容，再给一个重试按钮。

3.2 用完以后再聊一聊

用户完成或放弃任务以后，再问：

1. 刚才哪一步最不确定？
2. 生成结果中，哪些内容你会直接使用，哪些一定要修改？
3. 如果下次还要完成同样的工作，你愿不愿意再用一次？为什么？

不要只问“你觉得好不好用”。礼貌性的“挺好的”很难指导下一步修改，具体行为和具体例子更有价值。

::: warning 使用真实素材时 测试者上传的商品、录音或文档可能包含真实业务信息。开始前要说明内容会发送给哪类 AI 服务，避免使用没有授权的客户资料，并在测试后删除不再需要的文件。 :::

4. 看看哪里卡住，再改一遍

试用以后，你可能一下子记下很多问题。不用全部都改。先解决那些让人没法继续、或者让结果不可信的问题。

可以按照下面的顺序处理：

1. 无法完成任务：按钮无效、请求失败、结果无法带走；
2. 结果明显不可信：编造信息、无法核对、缺少必要来源；
3. 操作容易误解：不知道从哪里开始，不清楚当前状态；
4. 使用成本过高：步骤重复、内容丢失、等待没有反馈；
5. 样式和新增功能：不影响核心任务的美化与愿望清单。

先挑最重要的一到三个。改完以后，自己再试一次；条件允许的话，也可以请刚才的人回来看看。只有原来的卡点真的消失，这次修改才算有用。

4.1 把具体问题告诉 AI IDE

不要只说“帮我优化一下”。把你刚才看到的情况写进去，AI IDE 才知道应该改哪里。比如：

用户任务：上传商品图片并生成三条卖点。

观察到的问题：
两位测试者点击“生成”后再次连续点击，
因为页面没有明显显示请求已经开始，最后产生了重复任务。

请修改当前页面：
1. 请求开始后禁用生成按钮，并显示“正在生成”；
2. 请求结束或失败后恢复按钮；
3. 不要清空用户已经填写的内容；
4. 修改后告诉我怎样手动测试重复点击和失败情况。

这样写，改动不容易跑偏，你也知道稍后该怎样检查。

4.2 改完以后再从头试一次

一个地方改好了，也可能影响另一个地方。准备分享作品前，再试试下面四种情况：

• 一组信息完整的正常输入；
• 缺少一个必填字段；
• API 请求失败或超时；
• 得到结果后进行编辑、复制或重新生成。

如果产品会保存草稿，再补一次刷新页面后的测试。确认新功能正常以后，也要检查原来的核心流程没有被破坏。

5. 把作品整理好

现在，这个作品已经不只是在你的电脑上“能跑”了。别人用过它，你也根据真实问题改过一次。接下来把入口和说明整理好，就可以发给更多人看。

5.1 用一分钟介绍清楚

可以按照下面的顺序介绍：

1. 谁遇到了什么问题：例如电商运营准备首版图文时，要反复整理图片和卖点；
2. 产品怎样帮助他：上传商品图片和资料，生成一版可以继续修改的内容；
3. 接入了什么 AI 能力：图片理解与文本生成；
4. 用户怎样完成任务：上传、生成、检查、修改、复制；
5. 试用后改了什么：例如补充等待状态，并在失败后保留输入。

先让别人听懂你做了什么，再补充使用的框架和模型。这样比一上来罗列技术名词更容易看懂。

5.2 准备好别人需要的内容

分享之前，准备好下面三样东西：

1. 可以运行的应用：提供访问链接；如果还没有部署，则写清启动命令和访问地址；
2. 30～60 秒演示视频：从输入开始，完整展示一次核心任务，不要只快速切换页面；
3. 一页项目说明：写明目标用户、核心问题、主要流程、AI 能力、一次用户反馈，以及根据反馈完成的修改。

如果暂时无法让别人远程访问，本地运行加演示视频也可以作为第一阶段成果。重点是别人能够看懂你做了什么，并看到核心流程确实可以完成。

5.3 继续做这个作品，还是换一个？

你可以继续完成贯穿本章的电商内容工作台，也可以把同一套方法用到自己的场景，例如会议整理、有声内容、学习辅助或行业小工具。AI 应用场景参考可以帮助你扩展方向。

不必为了显得原创而重新做一个陌生题目。一个来自自己学习、工作或生活的问题，即使范围很小，只要经过真实试用和修改，也比功能很多但没有人用过的页面更有说服力。

发出去之前

最后再打开一次分享链接，从头用一遍。确认别人可以正常打开、AI 能返回结果，而且页面和截图里没有 API Key，就可以把作品发出去了。

如果使用了别人的图片、声音或文档，也记得先确认可以使用。

6. 📚 本章作业

下一步

完成这份作品后，你已经走过一条完整路径：从真实问题出发，收敛第一版方案，做出可交互原型，接入 AI，再把产品交给用户试用和修改。

进入 Stage 2 后，我们会继续学习数据库、用户系统、支付、部署和更完整的前后端工程。它们会让产品支持更多用户和更真实的数据，但出发点仍然是这一阶段学会的事情：先把一条有价值的用户任务做完整。