【Easy-Vibe】【task5】完整项目实战

拒绝 "Happy Path"：完善核心链路

很多初学者做原型，往往只做"Happy Path"（最理想的路径）：用户点击 -> API 响应成功 -> 显示结果。但在真实世界里，事情往往没那么顺利。为了让你的原型看起来像个真正的产品，你需要考虑以下几个"隐形"的环节。

增加"等待"与"反馈"

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

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

处理"失败"与"异常"

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

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

对话历史持久化

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

存储方案选择：

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

[
{
"role": "user",
"content": "帮我生成一款蓝牙耳机的抖音带货文案",
"timestamp": "2026-01-20 10:30:00"
},
{
"role": "assistant",
"content": "【蓝牙耳机种草文案】\n\n🎧 告别延迟，沉浸式听歌体验\n\n姐妹们！这款蓝牙耳机真的太绝了👇\n\n✅ 40dB主动降噪，瞬间进入音乐世界\n✅ 30小时超长续航，一周通勤不用充电\n✅ 通话清晰如面对面，地铁嘈杂也能聊\n✅ 半入耳设计，久戴不痛不闷耳\n\n💰 限时优惠，点击下方链接入手！",
"timestamp": "2026-01-20 10:30:05"
}
]

实现提示词：

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

注入灵魂：模拟真实数据 (Mock Data)

让 AI 帮你设计数据结构

我们不需要自己去想每一个字段叫什么（比如是叫 name 还是 title），这件事完全可以交给 AI。

你只需要告诉 AI 你的业务场景：

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

AI 会根据你的描述，自动帮你构思出类似 productName, generatedContent 这样的字段。

让 AI 批量生产"逼真"数据

有了数据结构后，下一步就是让 AI 帮你"填空"，生成一批看起来真实的数据。

提示词技巧：你不能只告诉 AI "帮我生成数据"，你需要像给实习生布置任务一样，告诉它业务背景和内容要求：

业务背景：告诉 AI 我们是做"抖音电商"的，所以商品标题要吸睛（比如"显瘦神器"、"学生党必入"），文案要口语化。
图片要求：为了让原型好看，图片不能是黑白的占位符，最好是随机的彩色风景或实物图。

提示词示例： "请基于刚才设计的结构，帮我生成 10 条逼真的模拟数据。（备注：不一定要 JSON

格式。如果你正在写前端，可以让它直接生成 JavaScript 数组；如果你用 Python，可以让它生成 List。）

业务场景要求：

假设这是一家综合百货店，商品涵盖'女装'、'数码'、'美妆'三个类目。

生成的标题和文案要非常'抖音风'：比如标题要包含 Emoji(🔥, ✨)，文案要用'绝绝子'、'亲测好用'这种语气。

图片字段：请统一使用

https://picsum.photos/seed/{random_id}/300/400 这个格式，确保每张图都不一样。"

生成的 Mock Data 示例：

复制代码

export const mockProductTasks = [
  {
    id: 'task_001',
    name: '夏季法式复古碎花裙',
    status: 'completed',
    input: {
      category: '女装',
      features: ['收腰', '显瘦', '气质'],
      originalImage: 'https://picsum.photos/seed/dress_input/300/400'
    },
    output: {
      generatedTitle: '✨谁穿谁好看！这条法式碎花裙真的绝绝子🔥',
      generatedCopy:
        '姐妹们！这条裙子真的太显瘦了！收腰设计绝了，穿上立马有腰身。面料很透气，夏天穿完全不闷。约会逛街首选！👗',
      generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
    },
    createdAt: '2026-01-20T10:00:00Z'
  },
  {
    id: 'task_002',
    name: '超强降噪蓝牙耳机 Pro',
    status: 'completed',
    input: {
      category: '数码',
      features: ['降噪', '超长续航', '低延迟'],
      originalImage: 'https://picsum.photos/seed/tech_input/300/400'
    },
    output: {
      generatedTitle: '🎧 终于被我找到了！这款耳机降噪太强了吧！🔇',
      generatedCopy:
        '戴上它，世界瞬间安静了。音质绝佳，听歌就像在现场。续航也很给力，充一次电用一周！学生党必入！',
      generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
    },
    createdAt: '2026-01-21T14:30:00Z'
  }
  // ... 更多数据
]

收集反馈与快速迭代

找谁测？怎么测？

找朋友/同事：不需要他们懂技术，只需要让他们试着用一下。
观察而非引导：不要说"点这里"，而是看他们会点哪里。如果他们找不到按钮，说明设计有问题。
"Wizard of Oz" (绿野仙踪法)：如果你的 AI 还没接好，你可以人工在后台（或数据库）手动修改数据来模拟 AI 的返回，先验证用户是否需要这个功能。

面对 Bug 和吐槽

样式错乱：不同屏幕尺寸下可能会乱。
Action: 截图发给 AI IDE -> "在这个屏幕宽度下乱了，帮我修一下。"
操作别扭："这个流程太繁琐了"。
Action: 把建议告诉 AI IDE -> "用户觉得先上传再生成太慢，能不能改成一键生成？"
需求新增："如果有这个功能就好了"。
Action: 评估是否核心，如果是，让 AI 快速实现一个简化版。

阶段大作业：完成你的"毕业设计"

项目必须综合运用前几节课学到的所有内容：

原型的构建：使用前端技术搭建美观、易用的界面。
需求的控制：不求大而全，但求核心功能逻辑闭环。
API 的接入：接入真实的 AI 模型（LLM/VLM 等），赋予应用真正的智能。
实现一个可玩的应用：不仅仅是静态页面，而是有数据流转、有交互反馈的动态应用。

项目效果：

【Easy-Vibe】【task5】完整项目实战