导读
在前面2天，我们学会了如何使用AI工具，今天来学习如何打造一个自己的产品
这一章，我们要解决一个现实问题：老板丢给你一句"用 AI 提高商品发布到电商平台的效率" —— 你怎么把它变成能用的产品原型？
如何设计产品原型？
核心转变：从“玩具”到“产品”
- 以前：做贪吃蛇、计算器，自己清楚需求，功能简单。
- 现在：真实业务需求模糊（如老板说“用AI提高效率”），必须先理解业务，再动手。
第一步：问对问题（不是自己猜，是问用户）
老板说“提高上新效率”，实际痛点是什么？问一线运营后发现：
- 事多：管多个店，上架、改价、做图、看数据，忙不过来。
- 做内容麻烦：
- 批量做图/文案太费时间，只能随便拼凑。
- 好用的标题、排版没法保存，下次还得重做。
第二步：收敛范围（只做最痛的点）
问题很多，但先聚焦最痛的：做内容太费劲。
具体拆成两个核心功能：
- 功能1：批量生成素材
- 输入：商品信息（名字、类目等）+ 商品图 + 参考图。
- 输出：能直接上架用的主图、标题、卖点文案。
- 效果：以前一个个做，现在一批商品丢进去，自动生成草稿。
- 功能2：模板管理
- 输入：把好用的主图+标题+文案存成一套。
- 输出：下次上新，直接套用模板，改改就能用。
- 效果：不用每次从零开始，好方案能复用。
关键原则：先做最小可用版
- 不要：试图一次性解决所有问题（如多店管理、数据分析）。
- 要：先做“批量生成 + 模板复用”这两个最痛的点，跑通再扩展。
写代码前，先搞清楚：用户真正痛苦的是什么？不是“AI很酷”，而是“做图写文案太麻烦”。
先问清楚，再动手，只做最痛的点，小步快跑。
实践
我这里用的AI工具是豆包，Vibe Coding工具是Claude Code + GLM-4.7
设计产品原型
方法有：
- 把“大白话”发给AI，让AI帮我们写提示词
- 把业务文档，业务流程等发给AI，让他总结，写提示词
- 让AI生成专门喂给AI IDE的提示词（用于写代码的提示词）
- 注意：最开始一定要做MVP（最小可行产品），之后再慢慢加功能
我之前没做过相关产品，这里直接让AI帮我把粗略想法变成细致的提示词
我想做一个工具，帮电商运营自动生成商品的主图和文案。 运营平时要一个个手动做图写文案，很麻烦。 我的想法是：他们上传商品信息，系统自动生成一批草稿， 运营挑选好用的稍微改改就能用。 先做最简单的版本：一个页面，左边填商品信息， 右边显示生成的结果。能上传图片，能填文字， 生成后显示主图预览和文案。
帮我把上面的想法扩写一下，整理成一份清晰的业务逻辑文档， 然后生成一个适合发给 AI IDE（比如 Cursor、Trae）的提示词， 用来生成单页面应用的原型代码。
得到
编码实现
把刚才的得到的提示词发给AI IDE
### 需求：电商商品主图&文案自动生成工具（单页面应用）
#### 核心目标
开发一个轻量化单页面应用，帮助电商运营自动生成商品主图预览和文案草稿，核心流程：左侧输入商品信息→一键生成→右侧展示结果。
#### 技术要求
1. 框架：使用HTML+CSS+JavaScript（原生，无需React/Vue，降低复杂度）；
2. 样式：使用Tailwind CSS实现响应式布局，风格简洁、符合电商工具调性（主色调：浅蓝色#4299e1，辅助色：浅灰色#f5f5f5）；
3. 交互：原生JS实现表单验证、加载状态、结果渲染、文案复制、图片预览等核心交互；
4. 模拟生成：无需对接真实AI接口，生成结果用模拟数据（固定模板+输入的商品信息拼接），重点实现前端交互逻辑。
#### 页面结构与功能细节
##### 1. 整体布局
- 页面宽度1200px，居中显示，左右分栏布局（左侧40%：输入区，右侧60%：结果区）；
- 顶部显示工具标题：“电商商品主图&文案自动生成工具”，底部显示简单的免责提示。
##### 2. 左侧输入区
- 表单标题：“商品信息填写”；
- 表单项：
✅ 商品名称：单行输入框（必填，placeholder：“例：夏季冰丝短袖T恤 男士宽松款”）；
✅ 核心卖点：多标签输入框（选填，支持回车/逗号分隔，最多5个，placeholder：“例：冰丝透气、宽松显瘦、抗皱免烫”）；
✅ 商品价格：单行输入框（选填，placeholder：“例：99元/件 或 满199减50”）；
✅ 适用场景：下拉选择框（选填，选项：日常穿搭、户外出行、居家使用、办公通勤、送礼）；
✅ 商品参考图：文件上传框（选填，支持JPG/PNG，≤5MB，上传后显示预览图+删除按钮）；
- 操作按钮：
✅ “一键生成”按钮（默认禁用，填写商品名称后启用，点击后显示加载状态）；
✅ “清空输入”按钮（重置表单，保留已上传图片）。
##### 3. 右侧结果区
- 初始状态：显示提示文字“填写商品信息后点击生成，即可查看结果”；
- 加载状态：显示加载动画+文字“正在生成主图和文案，请稍候...”；
- 生成完成状态：
✅ 主图预览区：标题“主图草稿（点击放大预览）”，展示3张模拟主图（用浅灰色背景+商品名称/卖点拼接成图片样式，尺寸300×300px），点击单张图片弹出弹窗放大预览；
✅ 文案展示区：标题“文案草稿（点击复制）”，展示3版不同风格的文案（分别标注“简洁版”“营销版”“详细版”），每版文案包含“标题+详情”，点击文案区域可一键复制全部内容；
- 操作按钮：“重新生成”“清空结果”（生成结果后显示）。
#### 交互逻辑要求
1. 表单验证：仅商品名称填写后，“一键生成”按钮从禁用变为可点击；
2. 图片上传：上传后即时显示预览图，点击删除按钮可移除图片；
3. 生成逻辑：点击“一键生成”后，禁用按钮并显示加载状态，2秒后加载模拟结果；
4. 文案复制：点击文案区域弹出“复制成功”提示，复制内容到剪贴板；
5. 图片预览：点击主图弹出居中弹窗，显示放大的图片，点击弹窗外部关闭；
6. 清空操作：“清空输入”仅重置表单文本内容，“清空结果”仅清空右侧生成内容。
#### 输出要求
1. 生成完整的HTML文件（引入Tailwind CSS CDN），所有JS逻辑内嵌在 `<script>`标签中；
2. 代码结构清晰，添加必要注释，便于后续修改；
3. 保证交互流畅，无控制台报错，样式适配PC端主流浏览器；
4. 模拟生成的结果需结合用户输入的商品信息（如商品名称、卖点等），而非固定静态文本。
之后微调，得到
之后再进一步优化
帮我补齐这个页面的功能，比如-首页：概览当前项目与整体进度；
-商品任务列表页：完成刚才实现的核心功能；-模板库页：查看与管理收藏的图文模板；
-设置页：配置基础参数（如默认生成规则、图文风格偏好等）。
保证每个页面都可以用，帮我仔细检查下
得到
测试
页面基本完成后，我们自己测试主要功能需要不断点击，刷新，要消耗大量精力。 我们可以让AI为我们生成测试数据，以测试系统功能
我现在需要测试这个用户使用过程，确保他能完全走通，请你结合下列需求生成测试数据入口，让我能够点击后很快测试全流程是否正常：
1. 帮运营批量生成第一版图文草稿：
- **输入（支持直接上传和批量导入素材）：**
- 商品基础信息：名称、类目、品牌、材质、尺寸、颜色、适用人群等；
- 商品图片：白底图 / 简单场景图；
- 每次生成支持上传额外上传历史爆款截图或参考链接，允许有参考物；
- 支持通过 Excel 批量导入，或在页面上在线录入 / 上传。
- 支持页面上指定是否保存商品素材到素材库，方便下次使用
- **输出（能直接拿去上架或轻改就能上架的内容）：**
- 每个商品一张“看得过去、包含基础卖点”的主图草稿；
- 一条“结构合理、含核心关键词”的标题 + 1–2 句卖点文案。
- **期望的使用方式变化：**
从每批商品白手起稿变为把一批商品丢进系统，拿系统生成的草稿做筛选和微调。
如此一来，我们就跑通了整个流程，之后再为这个系统接入真实的大模型API key即可
参考
datawhalechina/easy-vibe: Vibe coding from 0 to 1 ｜把想法做成真正能上线的产品｜首个交互式教程｜零基础也能学会的 AI 编程实战
部分文字用豆包润色
