Easy Vibe Coding 学习心得（二）：从产品原型到 AI 应用——我的第一个完整项目

一、从"玩具"到"产品"——认知的转变

1.1 前一篇的回顾

在上一篇《AI 原生贪吃蛇》中，我做出了一个能生成诗歌和绘画的游戏。那个项目让我很兴奋——毕竟，能把三个看似不相关的东西组合在一起，创造出全新的体验。

但兴奋过后，我开始思考一个问题：

这个贪吃蛇，到底是个"玩具"，还是个"产品"？

它能玩，能创作，甚至还能收藏作品。但如果我想把它分享给别人用，会遇到什么问题？

• 数据存在本地，换个设备就没了
• 没有用户系统，谁都能看我的收藏
• 报错了就白屏，没有任何提示
• 刷新页面，生成的作品就消失了

这些问题，在"玩具"阶段可以忽略。但如果要变成"产品"，就必须解决。

1.2 新的目标

带着这个疑问，我进入了 Stage 1 的最后一章——完整项目实战。

这一章的目标很明确：

• 从一个模糊的业务需求出发
• 设计并实现一个完整的产品原型
• 接入真实的 AI 能力
• 处理错误、持久化数据、完善用户体验
• 最终交付一个能给别人演示的完整原型

这不是课堂作业，而是模拟真实工作场景的毕业设计。

二、需求分析：从模糊命题到具体方案

2.1 老板的"一句话需求"

教程给了一个很真实的场景：

老板说：“现在公众号里都在用 AI 做图做文案，我看都挺简单的。你帮我搞一下，让我们在抖音电商上新商品时效率高一点。”

这句话听起来很简单，但仔细一想，信息量少得可怜：

• “效率高一点”——具体是多少？
• “新商品”——是什么类目的商品？
• “AI 做图做文案”——具体要做什么内容？

这就是真实世界的产品需求——不会有人给你写好的 PRD 文档，只有一个模糊的方向。

2.2 我的第一次尝试

我一开始在 AI IDE 里输入：

帮我做一个电商素材生成工具，能生成商品文案和图片

AI 给我的回复是一个简单的页面：一个输入框，一个生成按钮，一个结果展示区。

看起来能用了，但总觉得哪里不对。

2.3 学会"问业务"

教程里提到一个关键方法：从业务场景出发，挖掘真实痛点。

我试着问了自己几个问题：

1. 谁在用这个工具？

• 电商运营人员，可能不太懂技术

2. 他们在什么场景下用？

• 每天要上新几十个商品，时间紧任务重
• 需要在多个平台发布（抖音、淘宝、小红书）
• 文案和图片要符合平台调性

3. 他们现在的痛点是什么？

• 写文案耗时：每个商品要花 30 分钟写描述
• 做图困难：不会设计软件，只能套模板
• 重复劳动：同样的商品要在不同平台发不同的版本

4. 什么功能最能解决他们的问题？

• 一键生成多平台文案（抖音风、淘宝风、小红书风）
• 自动抠图、换背景、加文字
• 批量处理，一次上传十个商品

2.4 需求文档的雏形

基于以上分析，我重新整理了需求：

电商素材工作台 - 产品需求

【目标用户】
电商运营人员，负责多平台商品上架

【核心痛点】
1. 写文案耗时，每个商品 30 分钟+
2. 做图困难，不会专业设计软件
3. 多平台重复劳动，效率低

【核心功能】
1. 商品文案生成
   - 输入商品基本信息（名称、卖点、价格）
   - 选择平台风格（抖音/淘宝/小红书）
   - 一键生成文案，支持多次生成挑选

2. 商品图片处理
   - 上传商品原图
   - 自动抠图、换背景
   - 添加促销标签和文字

3. 批量处理
   - 一次上传多个商品
   - 批量生成文案和图片
   - 导出为各平台要求的格式

【非功能需求】
- 操作简单，3 分钟上手
- 生成速度快，单个商品<1 分钟
- 数据持久化，刷新不丢失

这次 AI 给我的方案，明显比第一次要完善得多。

心得：需求描述得越具体，结果越接近预期。这不仅是跟 AI 沟通的技巧，也是产品经理的基本功。

三、原型实现：从单页面到多页面应用

3.1 第一步：验证核心功能

教程建议：先做单页面原型，验证核心功能，再扩展成多页面应用。

我选择先实现"文案生成"这个最核心的功能。

提示词示例：

帮我创建一个单页面的电商文案生成工具：
1. 左侧是输入表单（商品名称、卖点、价格、目标平台）
2. 右侧是生成结果展示区
3. 点击"生成文案"按钮后，调用 AI 生成对应风格的文案
4. 支持多次生成，历史记录显示在下方

大概 5 分钟后，一个能用的原型就出来了。

3.2 第二步：扩展成多页面

核心功能验证OK后，我开始扩展成完整的应用。

页面结构：

- 首页/工作台
  └─ 商品列表（已创建的商品）
  └─ 新建商品按钮

- 商品详情页
  ├─ 商品信息编辑
  ├─ 文案生成区
  ├─ 图片处理区
  └─ 预览与导出

- 设置页
  ├─ API Key 配置
  ├─ 默认参数设置
  └─ 数据管理

提示词示例：

基于现有的单页面原型，扩展成多页面应用：
1. 使用 Vue Router 实现页面路由
2. 首页显示商品列表，支持搜索和筛选
3. 点击商品进入详情页，可以编辑和生成素材
4. 顶部导航栏支持页面切换

3.3 第三步：数据模型设计

多页面应用需要统一的数据管理。我定义了以下数据结构：

// 商品数据结构
{
  id: 'unique-id',
  name: '商品名称',
  description: '商品描述',
  price: 99.9,
  images: ['image1.jpg', 'image2.jpg'],
  platform: 'douyin', // 目标平台
  generatedContent: {
    copywriting: '生成的文案',
    images: ['生成的图片 URL']
  },
  createdAt: '2026-03-20 10:00:00',
  updatedAt: '2026-03-20 12:00:00'
}

数据管理方案：

方案	优点	缺点
LocalStorage	实现简单，刷新不丢	无法跨设备，数据量有限
JSON 文件	结构清晰，易调试	需要后端支持
Supabase	完整数据库能力	学习成本高

考虑到这是原型阶段，我选择了 LocalStorage 方案。

四、接入 AI 能力：让原型"活"起来

4.1 API 基础概念

教程里对 API 的解释很形象：你按对方要求的格式"发一个问题"，对方就按同样的格式"回一个结果"。

关键要素：

• API Key：你的通行证和钱包钥匙
• Endpoint：接口路径，告诉服务器你要用什么功能
• 请求内容：你发给 AI 的具体指令
• 响应结果：AI 返回的内容
• 错误处理：出问题时如何排查

4.2 获取 API Key

我选择了教程推荐的 DeepSeek 作为文本生成服务。

步骤：

1. 注册 DeepSeek 账号
2. 进入控制台创建 API Key
3. 复制 Key，准备配置

安全提醒：

• API Key 直接关联账户和费用
• 不要分享到群聊或上传网络
• 不要硬编码到代码中提交到 Git
• 如怀疑泄露，立即更换

4.3 接入 DeepSeek 文本生成

第一步：让 AI IDE 生成调用代码

// 调用 DeepSeek 生成文案
async function generateCopywriting(productInfo, platform) {
  const prompt = buildPrompt(productInfo, platform)
  
  const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      model: 'deepseek-chat',
      messages: [
        {
          role: 'system',
          content: '你是一位专业的电商文案写手，擅长根据不同平台风格撰写吸引人的商品描述。'
        },
        {
          role: 'user',
          content: prompt
        }
      ],
      temperature: 0.7,
      max_tokens: 500
    })
  })

  const data = await response.json()
  return data.choices[0].message.content
}

// 构建提示词
function buildPrompt(productInfo, platform) {
  const platformStyles = {
    douyin: '抖音风格：口语化、有感染力、多用 emoji、突出卖点和优惠',
    taobao: '淘宝风格：详细描述、参数清晰、突出性价比',
    xiaohongshu: '小红书风格：种草语气、真实体验分享、精致生活感'
  }

  return `
请为以下商品撰写文案：
- 商品名称：${productInfo.name}
- 商品卖点：${productInfo.description}
- 价格：${productInfo.price}元

平台风格要求：${platformStyles[platform]}

请生成 3 个不同版本的文案，每个版本 100 字左右。
  `
}

第二步：处理加载状态

AI 生成需要几秒钟，不能让用户干等。

// 添加加载状态
const isLoading = ref(false)

async function handleGenerate() {
  isLoading.value = true
  try {
    const result = await generateCopywriting(productInfo, platform.value)
    results.value.push(result)
  } catch (error) {
    showError('生成失败，请稍后重试')
  } finally {
    isLoading.value = false
  }
}

第三步：错误处理

// 统一的错误处理
function showError(message) {
  // 显示 Toast 提示
  ElMessage.error(message)
  
  // 记录错误日志
  console.error('API Error:', message)
}

// 处理常见错误
function handleApiError(error) {
  if (error.status === 401) {
    showError('API Key 无效，请检查设置')
  } else if (error.status === 429) {
    showError('请求太频繁，请稍后再试')
  } else if (error.status === 500) {
    showError('服务器错误，请稍后重试')
  } else {
    showError('网络错误，请检查网络连接')
  }
}

4.4 接入图像生成（可选）

如果时间充裕，还可以接入图像生成能力。

平台选择：

平台	特点	适用场景
SiliconFlow Qwen-Image	中文理解好，生成速度快	电商海报、商品图
Recraft	矢量图、图标生成	Logo、图标设计
Seedream	高质量艺术创作	创意海报、插画

接入代码类似文本生成：

async function generateImage(prompt) {
  const response = await fetch('https://api.siliconflow.cn/v1/images/generations', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      model: 'Qwen/Qwen-Image',
      prompt: prompt,
      size: '1024x1024',
      n: 1
    })
  })

  const data = await response.json()
  return data.data[0].url
}

五、完善用户体验：从"能用"到"好用"

5.1 数据持久化

问题： 刷新页面，数据就没了。

解决方案：使用 LocalStorage

// 保存数据到 LocalStorage
function saveToLocalStorage(key, data) {
  localStorage.setItem(key, JSON.stringify(data))
}

// 从 LocalStorage 读取数据
function loadFromLocalStorage(key) {
  const data = localStorage.getItem(key)
  return data ? JSON.parse(data) : null
}

// 自动保存
watch(productInfo, (newVal) => {
  saveToLocalStorage('currentProduct', newVal)
}, { deep: true })

// 页面加载时恢复数据
onMounted(() => {
  const saved = loadFromLocalStorage('currentProduct')
  if (saved) {
    productInfo.value = saved
  }
})

5.2 用户反馈机制

问题： 用户操作后不知道成功还是失败。

解决方案：添加 Toast 提示

// 成功提示
ElMessage.success('文案生成成功！')

// 错误提示
ElMessage.error('生成失败，请检查 API Key 配置')

// 警告提示
ElMessage.warning('正在生成中，请稍候...')

5.3 加载状态优化

问题： AI 生成需要时间，用户不知道发生了什么。

解决方案：添加 Loading 状态

<template>
  <el-button 
    type="primary" 
    @click="handleGenerate"
    :loading="isLoading"
    :disabled="isLoading"
  >
    {{ isLoading ? '生成中...' : '生成文案' }}
  </el-button>
  
  <!-- 加载动画 -->
  <div v-if="isLoading" class="loading-container">
    <el-skeleton :rows="3" animated />
  </div>
</template>

5.4 空状态处理

问题： 新用户进来，页面空空如也，不知道怎么用。

解决方案：添加空状态引导

<template>
  <div v-if="products.length === 0" class="empty-state">
    <el-empty description="还没有商品，点击右下角按钮创建一个吧">
      <el-button type="primary" @click="createNew">新建商品</el-button>
    </el-empty>
  </div>
</template>

六、踩过的坑和解决方案

6.1 API Key 配置问题

问题： 把 API Key 硬编码到代码里，结果不小心提交到了 Git。

解决：

// 错误做法 ❌
const API_KEY = 'sk-1234567890abcdef'

// 正确做法 ✅
// 1. 在设置页让用户输入 API Key
// 2. 保存到 LocalStorage
const API_KEY = localStorage.getItem('api_key')

// 3. 或者使用环境变量（需要构建工具支持）
const API_KEY = import.meta.env.VITE_API_KEY

6.2 网络超时问题

问题： AI 生成时间长，网络不稳定时会超时。

解决：

// 添加超时重试机制
async function fetchWithRetry(url, options, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url, {
        ...options,
        signal: AbortSignal.timeout(30000) // 30 秒超时
      })
      return response
    } catch (error) {
      if (i === maxRetries - 1) {
        throw error
      }
      // 等待一段时间后重试
      await sleep(1000 * (i + 1))
    }
  }
}

6.3 数据格式不一致

问题： 不同平台返回的数据格式不一样，处理起来很麻烦。

解决：

// 统一数据格式
function normalizeApiResponse(data, platform) {
  switch (platform) {
    case 'deepseek':
      return {
        content: data.choices[0].message.content,
        usage: data.usage
      }
    case 'siliconflow':
      return {
        content: data.data[0].url,
        usage: null
      }
    default:
      return data
  }
}

6.4 界面太乱

问题： 功能太多，界面挤在一起，用户体验差。

解决：

• 采用分步设计：第一步填信息，第二步生成文案，第三步处理图片
• 使用 Tabs 切换不同功能区
• 添加折叠面板，不常用的功能收起来
  

七、成果展示

7.1 最终功能清单

经过 3 天的迭代，我的电商素材工作台完成了以下功能：

核心功能：

• ✅ 商品信息管理（增删改查）
• ✅ 多平台文案生成（抖音/淘宝/小红书）
• ✅ 商品图片处理（上传、预览）
• ✅ 批量操作（一次处理多个商品）

用户体验：

• ✅ 数据持久化（LocalStorage）
• ✅ 加载状态提示
• ✅ 错误处理和 Toast 提示
• ✅ 空状态引导
• ✅ 响应式布局（支持手机和平板）

技术栈：

• Vue 3 + Element Plus
• DeepSeek API（文本生成）
• SiliconFlow API（图像生成）
• LocalStorage（数据持久化）

7.2 使用流程

1. 创建商品：填写商品名称、卖点、价格
2. 选择平台：选择要发布的平台（抖音/淘宝/小红书）
3. 生成文案：点击按钮，等待 AI 生成 3 个版本
4. 处理图片：上传商品图，自动生成海报
5. 导出素材：下载文案和图片，用于实际发布

7.3 性能数据

• 文案生成：平均 3-5 秒
• 图片生成：平均 10-15 秒
• 页面加载：<1 秒
• 数据保存：实时自动保存

八、关键收获

8.1 产品思维：从"功能"到"场景"

以前我想功能，都是从技术出发：

• “这个功能很酷，加上！”
• “那个 API 很好用，试试！”

现在我学会了从场景出发：

• “用户在什么情况下用这个功能？”
• “这个功能解决了什么具体问题？”
• “不用这个功能会怎样？”

产品不是功能的堆砌，而是场景的解决方案。

8.2 工程思维：从"能跑"到"能用"

玩具级项目，能跑就行。产品级项目，要考虑更多：

• 数据持久化
• 错误处理
• 用户反馈
• 性能优化
• 安全性

这些"隐形"的工作，往往比核心功能更耗时，但也更重要。

8.3 迭代思维：从"完美"到"完成"

一开始我想一次性把所有功能都做好，结果进度很慢。

后来我改变了策略：

1. 先实现核心功能（文案生成）
2. 再扩展周边功能（图片处理、批量操作）
3. 最后完善体验（错误处理、加载状态）

完成比完美更重要。先做出能用的，再慢慢优化。

8.4 沟通思维：从"模糊"到"具体"

跟 AI 沟通，跟跟人沟通一样，需要具体：

• ❌ “帮我做个电商工具”
• ✅ “帮我做个能生成抖音风格文案的工具，输入是商品名称、卖点、价格，输出是 3 个版本的文案”

描述得越具体，结果越接近预期。这不仅是跟 AI 沟通的技巧，也是职场沟通的基本功。

九、下一步计划

这个电商素材工作台还可以继续优化：

9.1 短期优化（1 周内）

• 添加用户登录系统
• 接入云端数据库（Supabase）
• 支持更多平台风格（京东、拼多多）
• 添加文案模板库

9.2 中期优化（1 个月内）

• 接入更多 AI 能力（视频生成、语音合成）
• 添加数据分析功能（文案效果追踪）
• 支持团队协作（多人编辑同一商品）
• 部署上线，邀请真实用户测试

9.3 长期规划

• 做成 SaaS 产品，对外提供服务
• 探索商业模式（订阅制、按量付费）
• 建立用户反馈循环，持续迭代

十、写给同样想学习的你

10.1 关于"学不会"

我刚开始学的时候，也经常怀疑自己：

• “这个 API 怎么配置？”
• “这个错误是什么意思？”
• “我是不是不适合学编程？”

后来我发现，这些困惑都是正常的。每个人都会遇到，关键是不要放弃。

10.2 关于"没时间"

很多人说"工作太忙，没时间学"。

我的建议是：把学习融入工作。

比如我这次做的电商素材工作台，就是为了解决实际工作中的问题。这样学习就不是"额外负担"，而是"投资未来"。

10.3 关于"用不上"

有人说"我又不是产品经理，学这个干嘛"。

我想说：Vibe Coding 不是某个岗位的技能，而是这个时代的基础能力。

就像 20 年前学 Office，10 年前学智能手机，现在学 AI 编程，都是为了更好地工作和生活。

10.4 最后的话

完成这个项目的过程中，我最大的感受是：

编程不再是少数人的专利，而是每个人都能掌握的工具。

关键不是你有多聪明，而是你愿不愿意动手尝试。

完成比完美更重要。

这句话我会一直记着。

---

下一篇：《学习心得（三）：前端之美——从设计稿到精美界面》