---
title: '完整项目实战：从想法到作品'
description: '把已经接入 AI 的原型完整用一遍，请别人来试试，再把发现的问题改好。'
---
# 完整项目实战：从想法到作品
## 章节导读
前面几章里，我们从一个想法出发，做出了可以操作的原型，也让页面里的 AI 功能真正运行了起来。
做到这里，你当然知道应该填什么、点哪里。但换一个第一次打开页面的人，他可能连第一步都找不到；点完按钮没有立即出现结果，也可能以为页面坏了。
这一章先不加新功能。我们把产品从头到尾用一遍，把这些容易卡住的地方补好，再请别人来试试。最后，你会得到一个可以放心发给别人体验的作品。
## 1. 从头到尾用一次你的产品
先别急着添加登录、团队协作和数据看板。打开现在的产品，像用户一样从第一页开始，一直用到拿到结果。哪一步还需要你在旁边解释，哪一步就是接下来要改的地方。
在我们的电商内容工作台里，一次完整的使用大概是这样：
> 一位电商运营上传商品图片，补充必要信息，生成一版图文草稿，检查结果后复制或保存，用于后续修改和上架。
先把这一小段做好就够了。登录、团队权限和正式发布，都可以等产品真的需要时再加。
### 1.1 按真实的使用顺序走一遍
先别看代码和组件，照着用户会做的事情一步步往下走：
1. 打开页面，知道这个工具可以帮自己做什么；
2. 上传一张商品图片，填写名称、材质等必要信息；
3. 点击“生成文案”，看见页面正在处理；
4. 检查 AI 返回的标题和卖点，发现问题时可以修改或重新生成；
5. 复制、下载或暂时保存结果，完成这次任务。
走完以后问问自己：如果我不在旁边，对方会不会卡住？至于团队成员管理、复杂数据看板这些不影响本次使用的功能，先记下来，不必现在就做。
::: tip 这次要做到多大？
如果你能用一句话告诉别人要完成什么，而且对方几分钟内就能动手尝试，这个范围通常正合适。
:::
### 1.2 换到一个空白页面再试
开发久了，页面里往往已经填好了数据，也留下了上一次生成的结果。我们因此很容易忘记，第一次打开时其实什么都没有。可以开一个无痕窗口，或者清空本地数据，再从头试一次。
不用检查很多内容，只试下面三次：
1. **空白打开一次**：不填内容直接点击，看看页面会不会提示需要填写什么；
2. **正常生成一次**：上传图片并生成内容，确认等待时有提示，结果出来后也有清楚的下一步；
3. **模拟出错一次**：上传不支持的文件，或者让请求失败，确认刚才填写的内容还在，也可以重新尝试。
遇到卡住的地方就记下来，下一节我们再逐个补好。
可以请 AI IDE 帮你检查代码，但不要让它替代实际操作：
```text
请先不要修改代码。
按照下面这条用户任务检查当前项目：
用户上传商品图片，填写必要信息，生成文案，
检查结果后复制或保存。
请告诉我这条流程涉及哪些页面和文件，
并列出目前可能中断流程的地方。
```
AI IDE 可以帮你找到可能有问题的代码，但页面好不好用，还是要自己点过才知道。
## 2. 把几个容易卡住的地方补好
自己从头用一遍后，问题通常会出现在四个地方：刚打开页面时、等待 AI 时、拿到结果以后，以及请求失败时。这里不需要复杂设计，只要让人知道发生了什么，接下来还能做什么。
### 2.1 第一次打开，知道该做什么吗？
空白页面不应只放一个输入框。可以准备一句简短说明、一组示例内容，或者在上传区域标明支持的图片格式和大小。
如果表单字段很多，先保留生成结果真正需要的部分。比如商品名称、图片和核心特点可能是必填项，品牌、参考链接和更多风格参数可以放到“更多设置”中。用户第一次使用时，不应该先完成一份很长的登记表。
### 2.2 点了按钮，页面有没有回应？
AI 请求往往需要几秒甚至更久。点击以后，按钮应该显示“生成中”并暂时避免重复提交；已经填写的内容不要突然消失，页面也不要立刻跳到一个空白结果区。
*等待状态不需要复杂动画。让用户看见任务已经开始，并且原来的输入和页面位置仍然保留，就已经解决了大部分困惑。*
如果图片或视频需要排队，可以进一步显示“正在排队”“正在生成”等阶段。不要编造一个看似精确的百分比，除非接口真的提供了进度。
### 2.3 结果出来以后，下一步是什么？
AI 返回内容不是流程的终点。用户通常还要检查事实、修改措辞，并把结果带到下一步。因此结果区至少应提供一种可继续操作的方式，例如编辑、复制、下载或重新生成。
*这个页面先保留用户上传的商品图片，再把识别和生成结果放在下方。用户可以对照原图检查内容，而不是只能接受模型的一次回答。*
如果结果中存在模型无法确认的信息，可以直接标出来，让用户补充或删除。比起把一段文字包装成“最终答案”，这种做法更符合真实工作过程。
### 2.4 出错以后，还能不能继续？
网络中断、额度不足和文件格式错误都会导致请求失败。页面不必向普通用户展示整段技术报错，但要说明这次操作没有完成，并提供重试或返回修改的入口。
例如：
- 图片格式不支持：说明当前支持的格式，并允许重新选择；
- 必填信息缺失：在对应字段附近提示，不要只弹出一句“参数错误”；
- AI 服务暂时不可用：保留已经填写的内容，并提供“重新生成”；
- 生成结果不符合预期：允许修改输入后再试，而不是让用户从头开始。
如果刷新页面会让用户丢掉一大段输入，可以使用 LocalStorage 暂时保存表单草稿。这里只保存继续任务所需的普通数据，不要把 API Key、真实客户资料或敏感文件写进浏览器存储。
可以把刚才发现的问题交给 AI IDE，一次处理：
```text
请围绕“上传商品图片并生成文案”这条流程，
检查开始、等待、成功和失败四个时刻。
优先修复会阻止用户继续操作的问题：
- 必填项缺少提示；
- 请求期间可以重复点击；
- 失败后输入被清空；
- 结果没有编辑、复制或重新生成入口。
修改前先告诉我准备改哪些文件，
完成后给出一套手动测试步骤。
```
## 3. 请别人来用一次
自己做的页面，用久了以后怎么看都很顺。找一个没参与开发的人来用，往往几分钟就能发现我们一直没注意到的问题。
最好找真正可能使用它的人。电商内容工具可以请做过运营、开过网店或经常制作商品内容的人来试。如果暂时找不到，找一位没看过这个页面的朋友也可以。
### 3.1 只告诉他要完成什么
测试开始时，只说明目标：
> 请用这个工具，根据这张商品图片生成一版标题和卖点。检查内容以后，把你认为可以继续修改的版本复制出来。
接下来先观察，不要马上告诉对方该点击哪里。记录他停顿、返回、重复点击和向你提问的位置。如果你一开口就解释，原本应该由页面解决的问题就会被掩盖。
哪怕只找一两个人，也能发现不少明显问题。不用写正式报告，记住他在哪里停住就行。
比如，他打开页面后一直没有动，就补一句用途说明；反复点击“生成”，就让按钮清楚地显示“生成中”；拿到结果后不知道该做什么，就加上编辑或复制；出错以后又要重新填写，就保留原来的内容，再给一个重试按钮。
### 3.2 用完以后再聊一聊
用户完成或放弃任务以后，再问：
1. 刚才哪一步最不确定？
2. 生成结果中，哪些内容你会直接使用，哪些一定要修改？
3. 如果下次还要完成同样的工作，你愿不愿意再用一次？为什么？
不要只问“你觉得好不好用”。礼貌性的“挺好的”很难指导下一步修改，具体行为和具体例子更有价值。
::: warning 使用真实素材时
测试者上传的商品、录音或文档可能包含真实业务信息。开始前要说明内容会发送给哪类 AI 服务，避免使用没有授权的客户资料，并在测试后删除不再需要的文件。
:::
## 4. 看看哪里卡住，再改一遍
试用以后，你可能一下子记下很多问题。不用全部都改。先解决那些让人没法继续、或者让结果不可信的问题。
可以按照下面的顺序处理：
1. **无法完成任务**：按钮无效、请求失败、结果无法带走；
2. **结果明显不可信**：编造信息、无法核对、缺少必要来源；
3. **操作容易误解**：不知道从哪里开始，不清楚当前状态；
4. **使用成本过高**：步骤重复、内容丢失、等待没有反馈；
5. **样式和新增功能**：不影响核心任务的美化与愿望清单。
先挑最重要的一到三个。改完以后，自己再试一次；条件允许的话，也可以请刚才的人回来看看。只有原来的卡点真的消失，这次修改才算有用。
### 4.1 把具体问题告诉 AI IDE
不要只说“帮我优化一下”。把你刚才看到的情况写进去，AI IDE 才知道应该改哪里。比如：
```text
用户任务：上传商品图片并生成三条卖点。
观察到的问题：
两位测试者点击“生成”后再次连续点击，
因为页面没有明显显示请求已经开始，最后产生了重复任务。
请修改当前页面：
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 应用场景参考](../appendix-industry-scenarios/index.md)可以帮助你扩展方向。
不必为了显得原创而重新做一个陌生题目。一个来自自己学习、工作或生活的问题，即使范围很小，只要经过真实试用和修改，也比功能很多但没有人用过的页面更有说服力。
### 发出去之前
最后再打开一次分享链接，从头用一遍。确认别人可以正常打开、AI 能返回结果，而且页面和截图里没有 API Key，就可以把作品发出去了。
如果使用了别人的图片、声音或文档，也记得先确认可以使用。
## 6. 📚 本章作业
不要再添加新功能。把现在的作品整理好，真正交给一个人使用。
-
完整用一次
-
请一个人来试
- 先不教他怎么操作，观察他停在哪里，再改好其中一个问题。
-
把作品发出去
- 准备访问链接或启动方式、30～60 秒演示视频，以及一段简短介绍。
当别人能打开作品并独立完成一次使用，Stage 1 就真正完成了。
## 下一步
完成这份作品后，你已经走过一条完整路径：从真实问题出发，收敛第一版方案，做出可交互原型，接入 AI，再把产品交给用户试用和修改。
进入 Stage 2 后，我们会继续学习数据库、用户系统、支付、部署和更完整的前后端工程。它们会让产品支持更多用户和更真实的数据，但出发点仍然是这一阶段学会的事情：先把一条有价值的用户任务做完整。