从业务分析到多页面原型：easy-vibe 教你用 AI IDE 构建电商内容工坊实战指南

从业务分析到多页面原型：easy-vibe 教你用 AI IDE 构建电商内容工坊实战指南

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe

本文是 easy-vibe（vibe coding 101｜AI-native 产品构建者入门课程）第三章节「构建你的原型」的中文深度导读。核心主题是：如何把一个模糊的老板指令（"用 AI 提升电商上新效率"）经过业务访谈 → 痛点收敛 → 单页原型 → 多页面扩展 → 打磨测试的完整链路，转化为一个真正可用的电商内容工坊（atelier de contenus e-commerce）原型。读完本文，你将掌握面向 AI IDE 的三类 Prompt 撰写法、单页到多页的迭代策略、以及用测试数据验证用户旅程的完整方法，并看到 easy-vibe 仓库中同类示例项目的落地形态。

本教程与仓库中的示例项目（如 examples/trae-linear-dashboard 的数据看板 Demo）遵循同一套「口语化描述需求 → AI 生成代码 → 打开预览迭代」的 Vibe Coding 方法论。全文覆盖从"玩具"到"应用"的关键一跃：先理解用户，再让 AI 写代码。

章节地图：四个阶段的完整闭环

本章遵循一条明确的学习主线，共四个阶段：

1. 需求分析：从模糊到具体，先访谈、再收敛；
2. 单页验证：用 AI IDE 在 10 分钟内实现关键功能；
3. 多页扩展：补齐应用完整结构；
4. 打磨：提升交互体验，让原型"能说服人"。

对应产出物：一个电商内容工坊的交互式 Web 原型，预计耗时约 8 小时。

1. 写代码之前，先把需求定义清楚

在前面的章节里，我们用 AI IDE 轻松生成了贪吃蛇、计算器等小游戏——但这些只是玩具项目，无法直接应用到工作与生活中。要让 AI 能力真正产生价值，必须把 Vibe Coding 与真实生活、工作场景结合起来。

上一章我们学会了找到"有人愿意为之付费的好点子"，但找到方向只是开始。真正做产品时会发现："做什么"和"怎么做"之间横亘着巨大的鸿沟，这个鸿沟就是需求规格（spécification des besoins）。

1.1 三个典型的"伪需求"陷阱

在课堂或个人项目中，我们习惯从最简单可运行的功能出发：

• "做一个看板，把任务列出来。"
• "帮我做一个绘图工具。"
• "帮我做一个问卷收集软件。"

这些往往只是一个工具、一个功能模块，甚至连清晰的业务问题都算不上。更关键的是：这些想法常常是"你觉得有用"，而不是"用户真正需要"。

而在企业或创业项目中，产品经理和工程师通常面对的是一个更宽泛的业务命题。比如本教程设定的场景：

你是某电商店铺的产品经理。老板扔给你一个模糊但紧迫的需求："现在大家都在用 AI 做社交媒体图片和文案，看起来很简单。帮我也搞一套，让我们在 TikTok Shop 上新品时效率更高。"

面对这种一句话决策，很多人第一反应是："直接用 AI 啊！把需求丢给 Agent 不就行了？"于是写出这样的 Prompt：

请参考我的需求 xxxx， 帮我设计一个电商内容工坊， 包括商品描述、图片、视频等内容的生产和管理。

如果真把这个产物直接交给老板——恭喜，这个季度的奖金没了。原因正是本章要解决的核心痛点：

• 你不是用户：老板说"提升效率"，但你并不知道运营每天怎么工作、卡在哪里；
• AI 不懂业务：把模糊需求丢给 AI，它只能按常识猜测，结果"看起来像回事，用起来没法用"；
• 好点子不等于好产品：你觉得"加个 AI 生成功能"很酷，但用户可能不需要，或者用起来比以前更麻烦。

所以必须学会"从点子走向用户理解"：只有通过提问、深入理解业务，你的想法才能真正解决别人的问题。好的点子甚至比好的技术更重要。

1.2 从想象走向现实：学会提业务问题

先厘清两个概念：

• 需求（requirement）：用户真正想要的东西，TA 遇到的问题、想解决的事。例如"老板希望我更快地上新商品"——这是需求。
• 业务（business）：用户每天实际做的事、工作方式。例如电商运营每天要上新、改价、做图、看数据……这些是业务。

为什么要关注业务？因为不理解业务，你做出来的工具很可能"好看但没人用"。只有真正理解用户每天怎么工作、卡在哪里，才能做出真正帮到他们的东西。

从最简单的角度出发，可以先问自己几个问题：

• 老板说"提升效率"，到底是更快？更省钱？还是卖得更多？
• 现在商品是怎么上新的？哪里卡壳？
• 每天要处理多少新品？每个商品要多少张图、多少段文案？
• 现有工作里，最烦、最想躲开的是哪件事？

但这些都还是猜测。必须直接去问 TikTok Shop 运营："你们有什么困难？最关注什么？"通过沟通拿到更精确的答案。教程记录了一次真实访谈的结果：

痛点一：事情太多太散

• 一个人管多家店铺，每家店都有大量商品要处理；
• 每天像打仗：上新、改价、做图、看数据，一件事没做完就要切换到下一件。

痛点二：内容不是一次做好的，而是迭代出来的

• 先用厂家图、旧内容或网上找的参考图快速上新试水；
• 花少量推广费看能不能卖；
• 只有对卖得好的商品，才花时间认真做图、写详情、拍视频。

访谈之后，先别急着兴奋。如果试图"一次性满足所有诉求"，产品会变得极其庞大，无法在课时内交付。必须继续筛选收敛，锁定真正的核心痛点。

1.3 从发散到收敛：锁定核心业务痛点与功能

为什么要"收敛"？用户能说出很多问题：A 烦、B 烦、C 烦……但如果同时解决所有问题，大概率什么都做不好。所以要收敛——在所有问题里，挑出最痛、最急、最可解的先做。

什么是痛点？是用户觉得最烦、最花时间、最想解决的具体问题。不是"我觉得有用"，而是用户天天抱怨、每次碰到都痛的事。

从访谈中我们看到运营有大量问题：节奏被促销打乱、多店管理、上新/改价/做图/看数据多头切换……如果"全部解决"，最终会得到一个大而不精的工具。把这些问题分类（AI 可以协助归纳），大致是三类：

1. 节奏问题：何时上新、何时调价；
2. 效率问题：如何同时管理多家店铺和商品；
3. 内容问题：如何快速产出商品图与文案。

对本课程而言，最适合先解决的是第 3 类：内容问题。但"快速产出内容"仍太抽象，再追问运营到底卡在哪里：

痛 A：图文批量生产太累

• 内容散落在云盘、微信消息、平台后台……难找；
• 一次要上很多品，没时间精雕细琢，都是拼凑；
• 要求不高，能看、能发就行，不追求精美。

痛 B：好方案存不下来复用

• 以前的好标题、好排版，下次再也找不回来；
• 方案散落在聊天记录、旧商品链接里；
• 想用的时候要翻几个小时、复制粘贴改几个小时；
• 缺一个能保存、管理、直接套用的工具。

基于这两个痛点，我们要做的工具就非常聚焦：帮运营批量生产图文，并且能把好方案存下来、下次直接复用。它只做两件事：

功能 1：批量生成电商商品图文

类别	内容
输入	商品信息（名称、类目、品牌、材质、尺寸、颜色等）
商品图片（白底图或简单场景图）
参考图（爆款截图或参考链接）
导入方式（Excel 批量导入，或页面直接录入）
输出	主图：带卖点文案的商品展示图（用户刷到的第一张图）
商品标题：可被搜索命中的关键词组合
卖点文案：1-2 句吸引买家的话
全部是微调即可发布的成品

结果：以前每个商品都要从零做图写文；现在把一批商品丢进系统，拿到草稿后只需要挑选、微调。

功能 2：把好方案存成模板

类别	内容
输入	一套完整方案（主图 + 标题 + 文案）
输出	应用：用模板自动生成新品内容
修改：直接改标题和文案
管理：命名、打标签（如"男包模板""促销标题"）便于检索

使用流程：导入新品 → 选择"系统默认生成"或"用我保存的模板" → 系统自动套用模板风格，产出新的图文。

---

小结刚才做的事：先提问（不急着动手，先问运营"最烦什么"）→ 找到痛点（最烦"做图写文太累"和"好方案存不下来"）→ 收敛范围（不做大而全的平台，只做"批量图文 + 模板保存"两个功能）。

为什么重要？很多产品新人的误区是"功能越多越好"，但用户真正需要的，是你解决最痛的那个问题。与其做一堆半吊子功能，不如做一两个真正帮到用户的功能。

产品与业务思考的核心：不臆想"我觉得用户需要这个" → 去问用户"你每天干什么？哪里最痛？" → 在所有问题里收敛到最痛且最可解的 → 先做最小可用版本，再逐步迭代。

这就是写代码之前必须想清楚的事。代码只是工具——理解用户、找准问题，才是第一步。

2. 10 分钟产出原型：用 AI IDE 落地"关键功能"

思考是好事，但不要过度思考。停止空想，从单页开始尝试。

提示：如果觉得当前 IDE 不够聪明、或免费额度消耗太快，可以考虑购买编程套餐（Plan de programmation）。可先参阅 docs/fr-fr/stage-2/backend/modern-cli/index.md（现代命令行/用 Claude 编程的进阶文章）提前了解。

2.1 第一步：用大白话告诉 AI 你要什么

一开始不要追求完美 Prompt。从最自然的表达出发——就像跟同事描述需求一样，先用口语告诉 AI 你想做什么，再让 AI 帮你优化成更专业的表述。

2.1.1 从口述开始（新手推荐）

先用你自己的话描述想法，哪怕很粗糙：

我想做一个工具，帮电商运营自动生成商品主图和文案。 现在运营要一个个手动做图和文案，非常痛苦。 我的想法：他们上传商品信息，系统批量生成一批草稿， 运营挑好的，稍微改改就能用。 先做最简单的一版：单页，左边填商品信息， 右边显示生成结果。可以传图片、填文字， 生成后能看到主图预览和文案。

然后把这段文字发给任意大模型（如 ChatGPT、Claude 等）帮你扩写。AI 通常会帮你补齐没想到的细节、把想法结构得更清晰，最终产出一个适配 AI IDE 的 Prompt。你可以这样要求：

帮我把上面的想法扩写，整理成一份清晰的业务逻辑文档， 然后生成一个适配 AI IDE（如 Cursor、Trae）的 Prompt， 用于生成一个单页原型的代码。

AI 会返回结构化的需求和对应 Prompt。自己审核一遍，删掉没用的功能，确认后再拿去生成代码。

这种做法的优点：口述是最真实的想法，只是可能漏掉重要细节。AI 扩写时可能反问"是否支持批量上传？"之类你没想过的问题，帮你进一步验证。根据反馈决定保留或删除非核心功能，经过几轮修改后确定给 AI 的初始 Prompt。

2.1.2 跳过扩写：直接把业务文档丢给 AI

如果前面章节已经备好了业务逻辑文档（例如大白话版的需求说明书），可以直接用下面的格式发给 AI IDE，跳过扩写环节。适合需求已清晰、想直接进入代码的情况：

请参考以下业务逻辑，帮我实现一个单页应用，用于验证关键功能。 参考业务逻辑如下： 1. 帮助运营批量生成图文草稿初版： - **输入（支持直接上传和批量导入内容）：** - 商品基础信息：名称、类目、品牌、材质、尺寸、颜色、目标人群等； - 商品图片：白底图 / 简单场景图； - 每次生成可额外上传爆款商品截图或参考链接，作为参考； - 支持通过 Excel 批量导入，或页面在线录入 / 上传。 - 支持在页面上指定是否将内容保存到素材库，便于复用 - **输出（可直接发布或微调后发布的内容）：** - 每个商品一张"能看、包含基本卖点"的主图草稿； - 一个"结构完整、包含关键关键词"的标题 + 1-2 句卖点文案。 - **使用方式的变化预期：** 从每个批次商品都从零创作，变成把一批商品交给系统，再挑选和调整生成的草稿。 先做第一个功能，第二个（模板库）后面再加。

2.1.3 程序员进阶路线：让 AI 写"Prompt 的 Prompt"

如果想更精细地控制代码生成过程，可以先让通用大模型根据你的需求，专门生成一个面向 AI IDE 的 Prompt：

基于下面的想法，帮我写一个面向 Coding Agent 的 Prompt， 我需要用这个 Prompt 去生成代码。 [粘贴你的业务逻辑描述] 要求： 1. Prompt 里必须包含清晰的页面布局描述 2. 明确数据结构与交互逻辑 3. 指定技术栈（如 React + Tailwind） 4. 列出要落地的关键功能点

AI 会生成结构化的 Prompt（如下图所示），微调后即可发给 AI IDE 生成代码：

2.2 第二步：让 AI IDE 直接生成代码

2.2.1 准备工作：了解 AI IDE 的基本操作

如果还不熟悉 Cursor、Trae、Windsurf 等 AI IDE 的基础用法，建议先读附录中的 IDE 基础教程，学习：新建项目、与 AI Agent 对话、理解 AI 生成代码的过程。

2.2.2 开始生成代码

拿到初始 Prompt 后（以第一种风格为例），让 AI 帮我们生成代码。先创建一个窗口与对应文件夹，打开该文件夹（在你喜欢的位置初始化一个新项目）：

• 在侧边栏选一个你喜欢的模型（推荐：gemini、gpt、glm、kimi、minimax 等），输入第一步得到的 Prompt；
• 点击生成后，会看到熟悉的流程：AI 规划项目目录结构、需要的文件，并给出每个文件的初始内容。

特别注意：AI 可能停下来等你确认。生成过程中，AI Agent经常停下来等待你的输入或确认，例如：询问是否进入下一步、要求按回车确认某个操作、询问某个技术细节的选择。如果你看到 AI 不动了，先检查聊天界面是不是在等你回复。很多新手以为 AI 在思考，其实是它停下来在等你。主动回复或按回车，AI 就会继续干活。

别忘了按回车确认（否则会一直卡在等待状态——部分 AI IDE 没有这个问题）。如果出现"本地服务已启动"的提示，需要点击跳过，否则会一直停留在这个画面（如果生成代码后没有显示内容，要主动说"帮我启动这个项目"）。

这里顺带解释几个概念（更深入的内容可参考附录 端口与 localhost）：

• 场景：你用npm create vite@latest创建了 React + TypeScript 项目（如 easy-vibe-web）。创建完成后，电脑会自动"启动"网页，让你立刻看到结果。
• 本地服务（service local）：可以理解为你电脑上临时打开的一个网页展示窗口，只在当前机器上运行——其他人访问不到。
• localhost（本地地址）：localhost表示"这台电脑本身"。浏览器访问它，实际访问的是运行在你电脑上的网页。
• 端口（port）：用于区分同一台电脑上的不同 Web 服务。本项目使用5174 端口。
• 访问地址http://localhost:5174/：意思是"访问这台电脑上编号 5174 的网页"。在浏览器打开即可看到结果。
• 端口自动切换：系统原本想用 5173 端口，但已被占用，于是自动切换到了 5174——这是正常现象。

全部确认完毕后，等 Agent 运行片刻，就能得到第一版可运行的结果。此时页面还很丑，可以直接与 AI 对话优化界面呈现。优化后得到更美观的界面：

你可以按需修改页面功能、贴截图自由提问，例如："批量导入功能暂时不需要，帮我删掉""左边要填的字段太多了，只保留 xxxxx"。甚至可以参考成熟网站——比如直接"借鉴"一个你看中的网站（可以把喜欢的成熟站点截图贴给它），最终得到满意的效果。

仓库里的 examples/trae-linear-dashboard 就是这类实践的缩影：它的 prompt.txt 只有一句话"帮我做一个像这样的数据看板。数据可以先随便写。做好后帮我打开看看"——先用口语提出需求、让 AI 生成并自动打开预览，再逐轮迭代，与本教程的单页原型流程完全同构。

2.3 遇到错误怎么办

实践中遇到报错是不可避免的——这很正常，不代表你做错了什么。你不需要理解错误，只需把"看到的现象"原封不动地转述给 AI。常见的处理方式只有三种：

• 方式一：页面或终端报错。页面变红、白屏，或终端刷出一堆红字——截图或完整复制错误信息发给 AI 修。
• 方式二：功能不生效但没报错。比如按钮没反应、数据没显示、样式错乱——用大白话描述"发生了什么 + 你想要什么"，必要时附图。
• 方式三：不确定是否有问题。直接问 AI："帮我检查下这个功能有没有明显问题，需不需要调整什么。"

新手高频问题

• Q：不知道去哪找报错信息？A：一般找所有"红字"。终端、控制台或页面上找到红色提示，全选复制发给 AI。
• Q：AI 改了但错误还在？A：很常见。继续截图或复制最新报错发给它，在上一轮修改基础上继续修。
• Q：必须完全理解 AI 的修复方案吗？A：不需要一次全懂。每次聚焦一两个点即可，随着时间推移你会看懂越来越多代码，就像积累英语词汇一样。
• Q：改了很多轮还是不行？A：可以尝试：使用 IDE 的"回退"功能，在 Agent 对话里找返回按钮，回退到可用版本重来；或换模型、调整 Prompt，把现象和报错描述得更精确；或把"当前代码 + 报错日志 + 期望行为"打包一次性发给 AI，让它整体重构问题部分。

3. 从单页应用到多页面应用

关键功能的逻辑生成后，就可以继续生成其余内容。此时如果点击"设置"或某些按钮，往往完全没有反应。可以要求 AI 按业务 Prompt 核对、补齐缺失部分，或直接补全未实现的页面；也可以指定某个页面让 AI 单独完善，直到所有页面可点击、功能可交互。

经过一段时间运行，程序会在已有基础上补全多个页面与交互功能。随后需要手动逐个点击感兴趣的功能和按钮，确认交互正常；如果某个功能不可交互，就和 AI 沟通修复。完成后的多页面应用一般包含：首页（看板概览）、商品任务列表（核心功能）、模板库、设置页等，并通过侧边栏导航切换：

4. 让原型"能说服人"

多页面结构搭好之后，最后一步是让原型从"能跑"进化到"好用且看起来专业"。这需要手动测试整个用户旅程（parcours utilisateur），让 AI 修复跑不通的部分，使每次刷新后都能模拟一个新用户走完全流程并得到预期结果。

回到最初的需求：

1. 帮助运营批量生成图文草稿初版： - **输入（支持直接上传和批量导入内容）：** - 商品基础信息：名称、类目、品牌、材质、尺寸、颜色、目标人群等； - 商品图片：白底图 / 简单场景图； - 每次生成可额外上传爆款商品截图或参考链接； - 支持通过 Excel 批量导入，或页面在线录入 / 上传。 - 支持在页面上指定是否将内容保存到素材库 - **输出（可直接发布或微调后发布的内容）：** - 每个商品一张"能看、包含基本卖点"的主图草稿； - 一个"结构完整、包含关键关键词"的标题 + 1-2 句卖点文案。 - **使用方式的变化预期：** 从每个批次商品都从零创作，变成把一批商品交给系统，再挑选和调整生成的草稿。 2. 把好的产出沉淀为可复用的模板库： - **能保存什么？** - 运营觉得"好"的任何产出都可以一键保存： - 可以是"主图 + 标题 + 卖点文案"的完整组合； - 也可以只保存一部分，比如标题结构或某段卖点文案。 - **保存后能做什么？** - **复用：** - 用这份保存套用到一批新的商品参数上，重新生成图文草稿； - 或在同一个商品上，基于该模板生成多个变体做 A/B 测试。 - **编辑：** - 直接修改标题 / 卖点文案； - 若支持图片编辑，可在主图上精修文字、贴纸等。 - **管理：** - 给保存命名、打标签（如"男包主图模板""促销标题结构"）、按店铺分类，便于检索。 - **下次上新怎么用？** - 导入新商品后，运营可以选择： - 用系统默认逻辑，或 - 指定"用我保存的某个模板生成"； - 系统自动把模板的结构与风格套用到新商品数据上，生成新的主图 + 标题 + 卖点文案草稿。

如果每次测试都要造新数据，会非常耗时。这时通常使用所谓的"测试数据"。可以这样与 AI 沟通，让它生成快速填充测试数据的入口，便于验证所有功能：

我需要测试这个用户旅程，确保它能完整跑通。 请基于以下需求生成测试数据的填充入口， 让我能快速点击验证整个流程是否正常： 1. 帮助运营批量生成图文草稿初版： - **输入（支持直接上传和批量导入内容）：** - 商品基础信息：名称、类目、品牌、材质、尺寸、颜色、目标人群等； - 商品图片：白底图 / 简单场景图； - 每次生成可额外上传爆款商品截图或参考链接； - 支持通过 Excel 批量导入，或页面在线录入 / 上传。 - 支持在页面上指定是否将内容保存到素材库 - **输出（可直接发布或微调后发布的内容）：** - 每个商品一张"能看、包含基本卖点"的主图草稿； - 一个"结构完整、包含关键关键词"的标题 + 1-2 句卖点文案。 - **使用方式的变化预期：** 从每个批次商品都从零创作，变成把一批商品交给系统，再挑选和调整生成的草稿。

很容易就能得到结果（如果觉得一条数据太少，可以让 AI 生成多个测试用例）。点击后直接出结果，中间没有"模拟生成过程"。如果想模拟真实的生成过程，可以直接告诉 AI："请模拟真实的生成过程，点击后要等一会儿再给我结果。"

生成功能验证通过后，还要确保模板库功能正常。在页面生成卡片上，可以看到模板库收藏功能尚未实现，需要继续深入对话："请确保需求[粘贴上面第 2 点内容]能正常工作，点击某个结果可以保存对应模板，打开后能看到生成参数"。生成往往不是一次到位，需要定期用截图纠偏，最终得到预期效果。

除了手动测试需求旅程，还可以让 AI 直接做需求核查，例如：

• "请对照我的初始需求，检查当前应用是否覆盖了所有关键功能。"
• "帮我列一份功能清单 checklist，标明哪些已完成、哪些还没实现或体验不足。"

AI 会生成一份 checklist，据此决定是否继续改进。经过迭代修改，你会得到一个相当完整的原型。

5. 练习：复刻你自己的 TikTok 电商内容工坊

参考本课程的 Prompt 与内容，完成一个完整闭环：

• 全流程实践：业务需求汇总 Prompt 生成 → 单页原型生成 → 多页面原型生成；
• 成果分享：给你的程序截图，分享给大家；
• 思考题：为下一节"LLM 能力与文生图集成"预留空间，预想：你的工坊如何集成"AI 写文案 / AI 生成图片 / AI 生成脚本"等能力？

下一步：接入真正的 AI 能力

下一节将在该内容工坊基础上接入具体 AI 能力（文生文、图生文、文生图），例如：

• 为一个内容任务自动生成文案草稿和多个标题候选；
• 根据任务描述自动生成图片草稿（文生图）；
• 自动分类、总结过往内容任务，帮你规划下一轮促销选题。

可继续按推荐顺序学习：集成 AI 能力 → 完整项目实战 → 设计工程。同时，附录中的 编程能力（modern-cli） 与 IDE 基础 可为本流程提供更底层的能力支撑。

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe