课程来源：Datawhale Easy-Vibe 教程

一、完善链路：从单点功能到完整闭环

为了让原型看起来像个真正的产品，需要考虑以下几个“隐形”的环节：

1、增加“等待”与“反馈”

当用户点击“生成文案”时，AI 往往需要几秒钟才能响应。如果界面毫无反应，用户会以为程序坏了。 需要让 AI IDE 加上 Loading 状态：

提示词示例： “当我点击生成按钮时，请把按钮变成‘生成中...’并不可点击，同时在右侧区域显示一个加载动画。直到 API 返回结果后，再恢复正常。”

2、处理“失败”与“异常”

API Key 可能会过期，网络可能会断开。 需要让 AI IDE 处理报错：

提示词示例： “如果 API 请求失败了，不要直接在控制台报错，请在页面顶部弹出一个红色的提示框（Toast），告诉用户‘生成失败，请稍后重试’，并允许用户重新点击生成。”

3、对话历史持久化

在与 AI 交互的过程中，我们需要保存对话内容，让用户能够回顾历史、继续之前的交流。目前阶段我们暂不引入数据库，可以选择以下轻量级方案：

存储方案选择：

方案	适用场景	特点
LocalStorage	纯前端项目，用户数据保存在浏览器	实现简单，刷新不丢失，无法跨设备同步
JSON 文件	本地原型，数据以文件形式存储	结构清晰，便于调试，可手动编辑
TXT 文件	最简方案，快速记录文本内容	格式自由，兼容性好

提示词示例：“请帮我实现对话历史的保存功能。支持将用户和 AI 的对话记录保存为 JSON 文件（或使用 LocalStorage）。每次进入页面时自动加载历史对话，支持查看和删除单条对话记录。”

二、注入灵魂：模拟真实业务数据

1、 让 AI 数据结构

提示词示例： “我正在做一个抖音电商素材工作台的原型。 请帮我设计一个 JSON 数据结构，用来描述一个‘商品任务’。 这个任务应该包含：商品的基本信息（名字、类目）、输入的素材（图片链接）、以及 AI 生成的结果（标题、文案、海报图）。 请直接给我一个 JSON 示例。”

2、让 AI 批量生产“逼真”数据

提示词技巧：告诉它业务背景和内容要求

提示词示例： “请基于刚才设计的结构，帮我生成 10 条逼真的模拟数据。 （备注：不一定要 JSON 格式。如果你正在写前端，可以让它直接生成 JavaScript 数组；如果你用 Python，可以让它生成 List。）

业务场景要求：

1. 假设这是一家综合百货店，商品涵盖‘女装’、‘数码’、‘美妆’三个类目。
2. 生成的标题和文案要非常‘抖音风’：比如标题要包含 Emoji (🔥, ✨)，文案要用‘绝绝子’、‘亲测好用’这种语气。
3. 图片字段：请统一使用 https://picsum.photos/seed/{random_id}/300/400 这个格式，确保每张图都不一样。”

3、(进阶) 使用 LocalStorage 实现“假增删改”

提示词示例： “请帮我实现一个数据存储功能。

1. 优先从 localStorage 读取数据。
2. 如果 localStorage 为空，则使用刚才生成的 Mock 数据初始化，并将它们存入 localStorage。
3. 同时帮我写 addProductTask 和 deleteProductTask 函数，每次操作都要同步更新 localStorage。”

三、反馈迭代：基于真实反馈修补体验

1、找谁测？怎么测？

• 找朋友/同事
• 观察而非引导
• “Wizard of Oz” (绿野仙踪法)

2、面对 Bug 和 吐槽

• 样式错乱：不同屏幕尺寸下可能会乱。
• 操作别扭：“这个流程太繁琐了”。
• 需求新增：“如果有这个功能就好了”。

四、最终大作业：你的毕业设计

智能评测平台

## 核心功能点

### 1. 电脑参数获取
- 支持搜索电脑型号
- 从多个数据源抓取参数（京东、天猫、官网）
- 参数数据清洗和标准化
- 缓存已获取的数据

### 2. 评价抓取系统
- 实时进度展示（WebSocket推送）
- 多平台并行抓取
- 评价数据去重和清洗
- 情感分析提取关键词
- 错误重试机制

### 3. AI分析功能
- 基于参数和评价生成优劣势
- 生成购买建议和适合人群
- 计算综合评分
- 多电脑对比分析

### 4. 对比功能
- 支持添加多台电脑对比
- 参数表格对比展示
- 雷达图可视化
- AI生成对比结论

### 5. 视频生成
- 基于评测数据生成脚本
- TTS配音生成
- 图片+字幕合成视频
- 导出MP4文件

### 已实现的功能：

首先需要配置大模型的api key

最终视频效果：