在Day04:给原型加上AI能力中,我们实现了功能:
- 商品文案自动生成(文字生成文字)
- 图片转电商卖点 / 关键词(图片生成文字)
- 电商海报 / 首图生成(文字生成图片)
现在只是实现了 用户点击->发送请求->得到结果的过程,但是在用户实际使用过程中不一定能够按照我们预想的流程进行操作,为了更好的用户体验,这一章我们继续完善系统功能,把原型变为产品。
完善核心链路
增加“等待”与“反馈”
用户点击生成xx后,应该有个loading状态,表示请求正在进行。
提示词:当点击生成按钮后,应该有loading加载动画,表示请求正在进行。
失败和异常
当网络断开,API key过期,服务器宕机等问题出现时,请求会失败,此时需要给用户提示。
提示词:如果 API 请求失败了,不要直接在控制台报错,请附上报错信息,并允许用户重新点击生成。”
对话信息持久化
网页刷新后,填入的信息就消失了,可以通过持久化技术将相关信息保存。
提示词:现在页面刷新后,填入的数据就没了,把数据存入localstorage,保证刷新后数据仍可见。
保存所有的生成记录
把生成的结果保存,便于之后查看复盘
提示词:把已经完成的任务及其信息(输入信息+输出结果)保存到本地,并在”任务列表“中可以查看,共3种任务:文案生成,图片卖点,电商海报
添加模板
提示词:把“快速填充测试数据”改为“填充模板”,会显示一个卡片,其中有模板列表,每种任务有10个模板,点击后会填入对应模板。相关模板信息可在“模板库”页面管理
模板选择页面如下
模板管理页面如下
点击后可修改参数
最后完善下主页面
修改“工作台”页面,显示每种类型任务的完成个数,还有本系统的应用场景和使用流程(快速开始,告诉用户如何使用)
至此,系统完成
参考
datawhalechina/easy-vibe: Vibe coding from 0 to 1 |把想法做成真正能上线的产品|首个交互式教程|零基础也能学会的 AI 编程实战
部分文字用豆包润色