@@ -13,8 +13,16 @@ const duration = '约 <strong>8 小时</strong>'
<ChapterIntroduction :duration="duration" :tags="['业务分析', '原型设计', 'AI 辅助编程', '多页面应用']" coreOutput="1 个电商素材工作台原型" expectedOutput="可交互的 Web 原型">
在本节中，我们会从零开始，借助 AI IDE 搭建一个可以实际运行的「电商素材工作台」 原型。
你将体验一遍，从业务分析到多页面产品原型实现的“完整闭环”，为之后独立制作应用原型打下基础。
前面玩的是 AI 游戏，这一章却要解决一个现实问题：老板丢给你一句"用 AI 提高商品发布到电商平台的效率" —— 你怎么把它变成能用的产品 原型？
和前面做贪吃蛇、计算器不同，真实业务不能凭空想功能：
1. **明确痛点 ** ：找运营聊聊，从模糊的"提高效率"里挖出真正的痛点
2. **挑重点做 ** ：一堆问题里先解决最痛的那个，别想着一次性做全
3. **快速验证 ** ：用 AI IDE 先做单页面原型，跑通了再扩展成多页面
4. **做出能用的东西 ** ：最后交付一个能演示、能操作的电商素材工作台
我们将学会从做玩具到做应用的转变，学会共情和思考客户的真实需求。
</ChapterIntroduction>
@@ -65,7 +73,17 @@ const duration = '约 <strong>8 小时</strong>'
包含商品描述、图片、视频等素材的生成和管理功能。
```
如果你兴高采烈的直接把这个需求转换成了原型，然后发给了老板 —— 恭喜你，这个季度的奖金要取消了！因为你做的完全不符合真实场景，只是停留在 AI 的建议和自己的遐想，真正的业务需求需要开口提问，有了好问题才会有好答案。（好的点子甚至大于好的技术）
如果你兴高采烈的直接把这个需求转换成了原型，然后发给了老板 —— 恭喜你，这个季度的奖金要取消了！
**为什么会这样？这就是我们要解决的核心痛点： **
以前我们学 AI IDE，做的都是贪吃蛇、计算器这种**自己用的玩具项目**——功能简单、自己清楚要什么、做出来自己用就行。但**真实业务场景完全不同**：
- **你不是用户**：老板要的是"提高效率"，但你不知道运营每天具体怎么工作、卡在哪里；
- **AI 也不懂业务**：你丢给 AI 一个模糊需求，它只能基于通用知识瞎猜，做出来的东西看着像那么回事，实际根本用不了；
- **好点子不等于好产品**：你以为"加个 AI 生成功能"很酷，但用户可能根本不需要，或者用起来比原来更麻烦。
**这就是为什么我们必须学会"从想到点子到理解用户" ** 只有你的创意真正解决别人的问题，开口问、深入了解业务，才能做出真正意义上有价值的事情。（好的点子甚至大于好的技术）
### 1.1 从想象到真实：学会向业务提问
@@ -107,71 +125,113 @@ const duration = '约 <strong>8 小时</strong>'
### 1.2 从发散到收敛：锁定业务的核心痛点和功能
通过上述简单调研或访谈，一线运营遇到的问题可以罗列出一大串： 上新节奏被活动节点打断、多店多品同时推进、在上新 / 调价 / 换素材 / 看数据之间来回切换……
如果一个产品应用一开始就试图“这些都要管”，很容易变成既要又要还要的“**大而全工具**”。
::: info 💡 为什么要"收敛"？什么叫"痛点"？
让我们进一步细化拆解（可以让 AI 帮忙），首先其大致混杂着三类问题：
**问题很多，但先做哪一个？ **
1. 上新 / 调价 / 上架节奏（运营节奏问题）；
2. 多店多品整体效率（中台 / 工作台问题）；
3. 为商品快速产出图片和文案（内容生产问题）。
用户可能告诉你一堆问题：A也麻烦、B也麻烦、C也麻烦……但如果你试图一次性解决所有问题，最后可能什么都做不好。所以要**收敛**——就是从一堆问题里，挑出**最痛、最急、最能解决**的那个先动手。
如果我们想要把产品做得轻、做得清楚，则需要先选定一个切入点。在这三类问题中，对于课堂时间和难度而言，最适合优先下手的是**第三类：内容生产，为商品快速产出图片和文案**。然而，为商品快速产出图片和文案本身也还是很抽象的需求，我们可以咨询业务方得到更具体的困难和想实现的效果。
**什么是痛点？ **
就是用户**最烦、最花时间、最想解决**的那个具体问题。不是"我觉得有用"，而是用户**每天都在抱怨、每次做都很痛苦**的事。
**业务方（抖音运营）：就内容生产而言，主要有两个最大的难题（痛点）： **
:::
- **批量制作普通商品首版图文耗时耗力**
- 素材分散在网盘、聊天记录、平台后台，厂家图、历史素材、竞品截图混杂
- 上新多为批量推进，无逐个打磨条件，只能拼凑主图和标题卖点
- 核心诉求是 “能上架、不太丑” 的基础内容，而非惊艳创意
- **优质图文结构难以系统化复用**
- 手中有有效方案（高点击率标题结构、大促稳定主图排版等）
- 方案散落在大脑、聊天记录、历史商品链接中，无统一管理载体
- 复用需反复翻旧链接、复制替换参数，流程繁琐
- 本质问题是缺少可收藏、管理、直接套用的沉淀工具
通过上面的采访，我们发现运营遇到的问题有很多：被活动打断节奏、要管多个店、在上架/改价/做图/看数据之间忙来忙去……
基于以上两个痛点，我们将产品收敛成一个简单清晰的小应用： **给多店多品抖音运营用的「批量图文草稿机 + 个人模板库」 **
如果我们试图"这些问题我全都要解决"，最后会做出一个**大而全但不好用**的工具。
它只做两件事（可以让 AI 帮忙细化实现，并且在和业务方的沟通中反复修改打磨，你需要根据业务方的反馈不断删减功能） ：
让我们把这些问题分分类（可以让 AI 帮忙），大致有三类 ：
**1. 帮运营批量生成第一版图文草稿： **
1. **节奏问题 ** ：什么时候上架、什么时候调价；
2. **效率问题 ** ：怎么同时管好多个店、多个商品；
3. **内容问题 ** ：怎么快速做出商品图片和文案。
- **输入（支持直接上传和批量导入素材）：**
- 商品基础信息：名称、类目、品牌、材质、尺寸、颜色、适用人群等；
- 商品图片：白底图 / 简单场景图；
- 每次生成支持上传额外上传历史爆款截图或参考链接，允许有参考物；
- 支持通过 Excel 批量导入，或在页面上在线录入 / 上传。
- 支持页面上指定是否保存商品素材到素材库，方便下次使用
- **输出（能直接拿去上架或轻改就能上架的内容）：**
- 每个商品一张“看得过去、包含基础卖点”的主图草稿；
- 一条“结构合理、含核心关键词”的标题 + 1–2 句卖点文案。
- **期望的使用方式变化：**
从每批商品白手起稿变为把一批商品丢进系统，拿系统生成的草稿做筛选和微调。
对于我们的课程来说，最适合先解决的是**第3类：做内容的问题**。但"快速做内容"还是有点抽象，我们再问问业务方具体卡在哪里：
**2. 把好用的输出沉淀成可复用的模板库： **
::: info 📋 业务方说：做内容有两个最痛苦的地方
- **什么可以被收藏？
- 任意一条运营觉得“好用”的输出都可以一键收藏：
- 可以是“主图 + 标题 + 卖点”的完整组合 ；
- 也可以只收藏其中一部分，例如某个标题结构、某条卖点文案 。
- **收藏之后能做什么？**
- **复用：**
- 用这条收藏，套一批新商品参数，重新生成图文草稿；
- 或在同一商品上，基于该模板生成多版变体做 A/B 测试。
- **编辑：**
- 直接修改标题文案 / 卖点文案；
- 如果支持图片编辑，可以微调主图中的文字、贴纸等元素。
- **管理：**
- 给收藏起名字、打标签（如“男包主图模板”“大促标题结构”）、支持按照店铺分类，方便后续检索。
- **下次上新时如何使用？**
- 导入新商品后，运营可以选择：
- 使用系统默认逻辑生成，或
- 指定“使用我收藏的某个模板来生成”；
- 系统基于新商品数据，自动套用模板的结构与风格，输出新的主图 + 标题 + 卖点草稿。
**痛苦1：批量做图做文案太费劲 **
- 素材到处放：网盘、微信记录、平台后台……**找起来很费劲**；
- 一次要上很多商品，**没时间逐个精心做**，只能随便拼一下；
- 要求不高，**能看、能上架就行**，不需要多精美
由上述可见，一线业务并不是在线性的流程中工作，而是在多重压力下被频繁打断、碎片化地解决问题。在这样的背景下，那种“功能面面俱到的大平台”往往上手成本高、落地困难；解决一两件具体麻烦的小工具更容易真正被使用。
**痛苦2：好用的方案没法存下来复用 **
- 之前做得好的标题、排版，**下次想用却找不到了**；
- 方案散落在聊天记录、以前的商品链接里；
- 想用的时候得**翻半天、复制粘贴改半天**；
- 缺一个能**收藏、管理、直接套用**的工具。
这就是我们在写代码之前必须建立的产品思维：**不要被需求的表象迷惑，不要试图一口气做大做全，而是通过提问、拆解、收敛，找到那个既能解决真实痛点、又能在有限时间内落地的最小可行方案。** 基于梳理得到的两大核心功能，我们会在下一阶段真正实现这个应用。
:::
基于上面两个痛点，我们要做一个简单的小工具：**帮运营批量做图做文案，还能把好用的方案存下来下次直接用**。
它只做两件事（可以让 AI 帮忙细化，记得根据业务反馈不断删减功能）：
::: info 功能1：批量生成电商商品图和文案
**这是做什么的？ **
给系统一些商品信息，它自动帮你生成能在电商平台（如抖音、淘宝）上架用的商品图和文字。
**输入 **
| 类型 | 内容 |
|------|------|
| 商品信息 | 名字、类别、品牌、材质、尺寸、颜色等 |
| 商品图片 | 白底图或简单场景图 |
| 参考图 | 以前卖得好的商品截图或参考链接 |
| 导入方式 | Excel 批量导入，或直接在页面上填写 |
**输出（生成的电商素材） **
- **商品主图**：带文字卖点的产品展示图（用户刷到时第一眼看到的图）
- **商品标题**：搜索时能搜到的关键词组合
- **卖点文案**：1-2句吸引买家的话
- 都是**改改就能上架**的成品
**效果 **
- 以前：每个商品都要从零开始做图写文案
- 现在：把一批商品丢给系统，生成草稿后挑挑改改就行
:::
::: info 功能2：把好用的方案存成模板
**输入 **
| 类型 | 内容 |
|------|------|
| 一整套 | 主图 + 标题 + 文案 |
**输出 **
| 功能 | 说明 |
|------|------|
| 套用 | 下次做新商品时，用模板自动生成 |
| 修改 | 直接改标题、改文案 |
| 管理 | 起名字、打标签（如"男包模板""大促标题"），方便找 |
**效果 **
1. 导入新商品
2. 选择：让系统默认生成，或**用我存好的模板**
3. 系统自动套用模板风格，输出新的图和文案
:::
---
**回顾我们刚才做了什么： **
1. **先问问题 ** ：不是直接动手做，而是先问运营"你们最烦什么"；
2. **找到痛点 ** ：发现他们最痛苦的是"做图写文案太费劲"和"好用的方案没法存"；
3. **收敛范围 ** ：不做大而全的平台，只做"批量生成图和文案 + 存模板"这两个功能。
**为什么这样做很重要？ **
很多新手做产品的误区是：功能越多越好。但用户真正需要的是**解决最痛的那个问题**。做一堆功能但都不好用，不如做一两个功能但真的帮到用户。
**产品和业务思维的核心： **
- 不要自己想"我觉得用户需要什么"
- 要去问用户"你每天在做什么？哪里最痛苦？"
- 从一堆问题里**收敛**到最痛、最能解决的那个
- 先做出**最小可用**的版本，再慢慢迭代
这就是我们在写代码之前要想清楚的事。代码只是工具，**理解用户、找准问题**才是第一步。
<div style="margin: 50px 0;">
<ClientOnly>
@@ -190,15 +250,42 @@ Thinking 是好事，但不可 over thinking，我们就此控制过度反思，
### 2.1 第一步：用大白话告诉 AI 你要什么
只需把上一小节整理好的业务资料作为参考资料进行对话，即可直接生成原型；或者，你也可以让 AI 给你返回推荐的 AI 提示词后进行生成：
刚开始不用追求完美的提示词，先从你最自然的表达开始。就像跟同事描述需求一样，用大白话告诉 AI 你想做什么，然后让 AI 帮你优化成更专业的表达。
#### 2.1.1 示例 1：直接让 AI 生成
#### 2.1.1 从口述开始（推荐新手）
先用自己的话描述想法，哪怕很粗糙也没关系：
```
帮我参考业务逻辑实现一个单页面应用，用来验证核心玩法功能，包括：
1.帮运营批量生成第一版图文草稿；
2.把好用的输出沉淀成可复用的模板库。
由于第一个更重要你可以先生成第一个的内容 。
我想做一个工具，帮电商运营自动生成商品的主图和文案。
运营平时要一个个手动做图写文案，很麻烦。
我的想法是：他们上传商品信息，系统自动生成一批草稿，
运营挑选好用的稍微改改就能用 。
先做最简单的版本：一个页面，左边填商品信息，
右边显示生成的结果。能上传图片，能填文字，
生成后显示主图预览和文案。
```
接下来，把这段话发给 AI（比如 ChatGPT、Claude 等），让它帮你扩写一下。AI 通常会帮你补充一些你没考虑到的细节，把你的想法整理得更清晰，最后生成一个适合发给 AI IDE 的提示词。
你可以这样跟 AI 说：
```
帮我把上面的想法扩写一下，整理成一份清晰的业务逻辑文档，
然后生成一个适合发给 AI IDE（比如 Cursor、Trae）的提示词，
用来生成单页面应用的原型代码。
```
AI 会返回一份结构化的需求和对应的提示词。你自己检查一遍，删减不需要的功能，确认无误后再拿去生成代码。
这样做的好处是：口述的东西是最真实的想法，可能会漏掉一些重要的细节。而 AI 帮你扩写的时候，可能会问"要不要支持批量上传？"这种没想到的问题，帮助你进一步验证。你可以根据反馈需要选择保留或删除不实际的功能，在反复修改中确定给 AI 的初版提示词。
#### 2.1.2 跳过扩写环节：直接把你整理好的业务文档丢给 AI
如果你已经在前面的章节整理好了业务逻辑文档（比如用大白话写的需求说明），可以直接套用下面的格式发给 AI IDE，省去了让 AI 扩写的中间步骤。适合需求已经很清晰、想直接动手写代码的情况：
```
帮我参考业务逻辑实现一个单页面应用，用来验证核心玩法功能。
业务逻辑参考如下：
1. 帮运营批量生成第一版图文草稿：
@@ -209,82 +296,47 @@ Thinking 是好事，但不可 over thinking，我们就此控制过度反思，
- 支持通过 Excel 批量导入，或在页面上在线录入 / 上传。
- 支持页面上指定是否保存商品素材到素材库，方便下次使用
- **输出（能直接拿去上架或轻改就能上架的内容）：**
- 每个商品一张“ 看得过去、包含基础卖点” 的主图草稿；
- 一条“ 结构合理、含核心关键词” 的标题 + 1–
- 每个商品一张" 看得过去、包含基础卖点" 的主图草稿；
- 一条" 结构合理、含核心关键词" 的标题 + 1–
- **期望的使用方式变化：**
从每批商品白手起稿变为把一批商品丢进系统，拿系统生成的草稿做筛选和微调。
2. 把好用的输出沉淀成可复用的模板库：
- **什么可以被收藏？**
- 任意一条运营觉得“好用”的输出都可以一键收藏：
- 可以是“主图 + 标题 + 卖点”的完整组合；
- 也可以只收藏其中一部分，例如某个标题结构、某条卖点文案。
- **收藏之后能做什么？**
- **复用：**
- 用这条收藏，套一批新商品参数，重新生成图文草稿；
- 或在同一商品上，基于该模板生成多版变体做 A/B 测试。
- **编辑：**
- 直接修改标题文案 / 卖点文案；
- 如果支持图片编辑，可以微调主图中的文字、贴纸等元素。
- **管理：**
- 给收藏起名字、打标签（如“男包主图模板”“大促标题结构”）、支持按照店铺分类，方便后续检索。
- **下次上新时如何使用？**
- 导入新商品后，运营可以选择：
- 使用系统默认逻辑生成，或
- 指定“使用我收藏的某个模板来生成”；
- 系统基于新商品数据，自动套用模板的结构与风格，输出新的主图 + 标题 + 卖点草稿。
先做第一个功能，第二个功能（模板库）后面再加。
```
#### 2.1.2 示例 2：让 AI 基于需求生成 “生成程序” 的提示词后再生成
#### 2.1.3 程序员的做法（进阶）：让 AI 帮你写 "提示词的提示词"
如果你想更精细地控制代码生成过程，可以先让 AI（如 ChatGPT）基于你的需求，生成一份专门给 AI IDE 的提示词：
```
基于下面的想法和内容 ，帮我写一个发给 coding Agent 的写代码用的提示词，我需要用这个提示词来生成代码。
基于下面的想法，帮我写一个发给 coding Agent 的写代码用的提示词，
我需要用这个提示词来生成代码。
我想参考业务逻辑实现一个单页面应用，用来验证核心玩法功能，包括：
1.帮运营批量生成第一版图文草稿；
2.把好用的输出沉淀成可复用的模板库。
由于第一个更重要你可以先生成第一个的内容。
[把你的业务逻辑描述贴在这里]
业务逻辑参考如下 ：
1. 帮运营批量生成第一版图文草稿：
- **输入（支持直接上传和批量导入素材）：**
- 商品基础信息：名称、类目、品牌、材质、尺寸、颜色、适用人群等；
- 商品图片：白底图 / 简单场景图；
- 每次生成支持上传额外上传历史爆款截图或参考链接，允许有参考物；
- 支持通过 Excel 批量导入，或在页面上在线录入 / 上传。
- 支持页面上指定是否保存商品素材到素材库，方便下次使用
- **输出（能直接拿去上架或轻改就能上架的内容）：**
- 每个商品一张“看得过去、包含基础卖点”的主图草稿；
- 一条“结构合理、含核心关键词”的标题 + 1–2 句卖点文案。
- **期望的使用方式变化：**
从每批商品白手起稿变为把一批商品丢进系统，拿系统生成的草稿做筛选和微调。
2. 把好用的输出沉淀成可复用的模板库：
- **什么可以被收藏？**
- 任意一条运营觉得“好用”的输出都可以一键收藏：
- 可以是“主图 + 标题 + 卖点”的完整组合；
- 也可以只收藏其中一部分，例如某个标题结构、某条卖点文案。
- **收藏之后能做什么？**
- **复用：**
- 用这条收藏，套一批新商品参数，重新生成图文草稿；
- 或在同一商品上，基于该模板生成多版变体做 A/B 测试。
- **编辑：**
- 直接修改标题文案 / 卖点文案；
- 如果支持图片编辑，可以微调主图中的文字、贴纸等元素。
- **管理：**
- 给收藏起名字、打标签（如“男包主图模板”“大促标题结构”）、支持按照店铺分类，方便后续检索。
- **下次上新时如何使用？**
- 导入新商品后，运营可以选择：
- 使用系统默认逻辑生成，或
- 指定“使用我收藏的某个模板来生成”；
- 系统基于新商品数据，自动套用模板的结构与风格，输出新的主图 + 标题 + 卖点草稿。
要求 ：
1. 提示词要包含清晰的页面布局描述
2. 明确数据结构和交互逻辑
3. 指定技术栈（如 React + Tailwind）
4. 列出需要实现的核心功能点
```
通常 AI 会生成类似下列 的结果，你可以尝试将 AI 生成的提示词用于之后的程序生成 ：
通常 AI 会生成类似下面 的结构化提示词 ：
你可以把这份提示词稍作修改后，发给 AI IDE 生成代码。
### 2.2 第二步：让 AI IDE 直接生成代码
#### 2.2.1 准备工作：了解 AI IDE 的基本操作
如果你还不熟悉 AI IDE（如 Cursor、Trae、Windsurf 等）的基本使用方式，建议先看附录中的[可视化教程 ](http://localhost:5173/easy-vibe/zh-cn/appendix/ide-intro/ )，了解如何：
- 创建新项目
- 与 AI Agent 对话
- 理解 AI 的代码生成过程
#### 2.2.2 开始生成代码
此时你已经获得了初始提示词，我们以第一种提示词风格为例，让 AI 协助我们生成代码。首先创建一个窗口和对应的文件夹，打开文件夹（在你喜欢的文件夹地址下初始化一个新项目）：
@@ -292,7 +344,18 @@ Thinking 是好事，但不可 over thinking，我们就此控制过度反思，
在侧边栏中选择一个你喜欢的模型（推荐 gemini、gpt、glm、kimi、minimax 等），输入第一步中得到的提示词：
点击生成后，我们会看到熟悉的环节，AI 会根据提示词，规划出项目的目录结构、必要的文件，并给出每个文件的初始内容。此时同样别忘记按回车确认信息（否则会陷入等待，有些 AI IDE 不会陷入这个问题）：
点击生成后，我们会看到熟悉的环节，AI 会根据提示词，规划出项目的目录结构、必要的文件，并给出每个文件的初始内容。
::: warning ⚠️ 特别注意：AI 可能会停下来等你确认
在生成过程中，AI Agent 经常会**停下来等待你的输入或确认**，比如：
- 询问你是否继续下一步
- 让你按回车确认某个操作
- 询问你某个技术细节的选择
**如果看到 AI 不动了，先检查一下对话界面，看看是不是在等你回复。 ** 很多新手以为 AI 在思考，其实它早就停在那等你了。主动回复或按回车，AI 就会继续工作。
:::
此时同样别忘记按回车确认信息（否则会陷入等待，有些 AI IDE 不会陷入这个问题）：
如果遇到如下场景，这个意思是已经在本地启动了一个服务，你需要点击跳过，否则会停留在这个界面（如果代码生成完没有东西出下，你就需要主动说“帮我启动这个项目”）：
sanbuphy