Easy-Vibe 实战：用 AI IDE 从业务分析到多页面产品原型的完整闭环

Easy-Vibe 实战用 AI IDE 从业务分析到多页面产品原型的完整闭环【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe本篇指南来自 Datawhale easy-vibe 项目 Stage 1「Prototyp erstellen构建可交互的产品原型」章节docs/de-de/stage-1/building-prototype/index.md以「电商运营素材工作台」为贯穿案例完整演示一条可复制的开发路径业务访谈 → 需求收敛 → 单页原型 → 多页面扩展 → 流程测试与美化。读完本篇你将掌握如何在写代码之前把模糊的老板需求拆成可验证的核心问题如何用 AI IDE 在十分钟内产出第一版可点击原型以及如何把它打磨成一个可以拿去演示、测试的电商内容工作台。1. 写代码之前先确定需求前面的小游戏贪吃蛇、计算器帮助我们熟悉了 AI IDE目标明确输入和结果容易判断。但业务应用完全不同——即使方向已经确定我们仍要把用户场景、核心流程和第一版范围说清楚。这一步可以称为需求的具体化把「想解决一个问题」拆成「谁在什么情况下做什么以及第一版怎样验证」。在课堂或个人项目中我们习惯从最简单的可执行功能出发「做个看板把任务列出来。」「帮我做个画画的工具。」「帮我做个可以收集问卷的软件。」这些描述只给出了功能方向却没有说明使用者、场景和成功标准。而在企业级或创业项目中产品经理和工程师通常是从一个更大的业务命题出发。例如假定这样一个场景业务场景你负责支持一家店铺的电商运营。团队提出了一个比较宽泛的目标 「我们想用 AI 辅助制作商品图片和文案让店铺上新的准备时间更短一些。」这句话说明了目标却没有说明运营当前怎样工作、时间花在哪里、怎样才算「更快」。如果直接把它丢给 AI IDE请你参考我的需求 xxxx 帮我设计一个电商素材工作台 包含商品描述、图片、视频等素材的生成和管理功能。这样的提示词可能生成一个结构完整的页面但页面里的功能顺序、字段和交互很可能来自 AI 的猜测。这里需要补上的不是更多技术细节而是业务信息理解使用者运营每天怎样完成商品上新哪一步最耗时定义结果「提高效率」具体指减少制作时间、降低返工还是增加可用素材数量控制范围第一版只验证一个核心流程暂时不实现完整平台。1.1 从想象到真实学会向业务提问先搞清楚两个基础概念需求是用户真正想要的进展以及当前遇到的阻碍。例如「运营希望缩短每个商品准备首版图文的时间」。业务是用户每天实际在做的事情、他们的工作方式。比如电商运营每天要做的事上架商品、改价格、做图片、看数据……这些都是业务。为什么要关注业务因为理解业务才能判断功能应该放在哪个环节以及它是否真的减少了用户的工作量。否则你的工具会「看起来不错但没人用」。从最简单的视角出发先问自己几个问题团队说「效率高一点」具体是什么意思是想更快完成、减少重复工作还是提高转化现在是怎么把商品上架的哪里做得不顺每天要做多少个新商品每个商品要做多少图、写多少字现在的工作中哪件事最麻烦、最不想做这些问题可以作为访谈提纲。接下来向一线电商运营了解实际流程记录更具体的事实真实业务采访结果1. 事情太多太杂一个人要管好几个店每个店都有很多商品要弄每天忙来忙去上架新商品、改价格、做图片、看数据一件事没做完又要做另一件。2. 做内容不是一次做好而是边做边试先用厂家给的图、以前用过的素材或网上找的参考图快速把商品上架试试花点小钱做推广看看有没有人买只有卖得好的商品才会认真做图、写详情、拍视频。1.2 从发散到收敛确定核心问题和功能为什么要「收敛」用户往往会提到多个问题。如果第一版全部实现范围会迅速扩大也很难判断究竟是哪项改动产生了效果。收敛就是根据出现频率、影响程度和验证成本先选择一个具体问题。什么是「痛点」它是用户最烦、最耗时、最想立刻解决的具体问题——不是「我觉得有用」而是用户每天抱怨、每次操作都难受的东西。把采访中发现的问题分类可以让 AI 帮忙大致有三类节奏问题什么时候上架、什么时候调价效率问题怎么同时管好多个店、多个商品内容问题怎么快速做出商品图片和文案。对于本课程最适合先验证的是第 3 类内容制作问题。继续追问业务方给出了两个具体痛点问题 1批量制作图文需要重复操作素材分散在网盘、聊天记录和平台后台查找需要时间一次要处理多个商品很难逐个从头制作首版内容只需达到测试要求后续再根据数据优化。问题 2已有方案不容易复用之前用过的标题和排版下次需要时不容易找到方案散落在聊天记录、以前的商品链接里重复查找、复制和修改占用了制作时间缺少统一收藏、管理和套用方案的工具。基于这两个痛点把原型范围定为帮助运营批量生成图文草稿并保存可复用的方案。它只做两件事功能 1批量生成电商商品图和文案给系统一些商品信息它自动帮你生成能在电商平台如抖音、淘宝上架用的商品图和文字。输入类型内容商品信息名字、类别、品牌、材质、尺寸、颜色等商品图片白底图或简单场景图参考图以前卖得好的商品截图或参考链接导入方式Excel 批量导入或直接在页面上填写输出生成的电商素材商品主图带文字卖点的产品展示图用户刷到时第一眼看到的图商品标题搜索时能搜到的关键词组合卖点文案12 句吸引买家的话可以继续编辑的首版草稿。效果以前每个商品都要从零开始做图写文案现在批量导入商品生成草稿后再筛选和调整。功能 2把好用的方案存成模板输入类型内容一整套主图 标题 文案输出功能说明套用下次做新商品时用模板自动生成修改直接改标题、改文案管理起名字、打标签如「男包模板」「大促标题」方便找效果导入新商品 → 选择「系统默认生成」或「用我存好的模板」→ 系统自动套用模板风格输出新的图和文案。回顾刚才做了什么先了解工作方式观察运营怎样准备商品内容找到关键问题确认重复制作和方案复用是主要阻碍收敛范围不做大而全的平台只做「批量生成图和文案 存模板」这两个功能。产品和业务思维的核心先了解用户每天怎样完成任务用具体事实判断问题的频率和影响从多个问题中收敛出一个可验证的切口先做最小版本再根据使用结果迭代。代码只是工具理解用户、找准问题才是第一步。2. 用 AI IDE 做出第一版原型工具说明AI IDE 的界面、可用模型和额度会持续变化。选择你当前能够稳定使用的工具即可本章关注的「需求表达 → 生成 → 检查 → 修改」流程并不依赖某个品牌。如果需要命令行编程工具可以参考现代 AI CLI 工具。需求足够清楚后先实现一个单页面用较小的成本检查核心流程。2.1 第一步用自然语言说明需求刚开始不必追求一次写出完整提示词。像向同事说明需求一样先写清用户、任务和预期结果再让 AI 帮助检查缺失信息。仓库中的真实示例也印证了这种口语化风格例如 examples/trae-linear-dashboard/prompt.txt 只有一句「帮我做一个像这样的数据看板。数据可以先随便写。做好后帮我打开看看。」examples/trae-block-game/prompt.txt 同样是自然语言描述。2.1.1 从口述开始推荐新手先用自己的话描述想法哪怕很粗糙也没关系我想做一个工具帮电商运营自动生成商品的主图和文案。 运营平时要一个个手动做图写文案很麻烦。 我的想法是他们上传商品信息系统自动生成一批草稿 运营挑选好用的稍微改改就能用。 先做最简单的版本一个页面左边填商品信息 右边显示生成的结果。能上传图片能填文字 生成后显示主图预览和文案。接下来把这段话交给一个通用对话模型如 ChatGPT、Claude 等让它帮助整理结构、指出缺失信息并生成适合 AI IDE 的实现说明帮我把上面的想法扩写一下整理成一份清晰的业务逻辑文档 然后生成一个适合发给 AI IDE 的实现说明 用来生成单页面应用的原型代码。AI 会返回一份结构化的需求和对应的提示词。你自己检查一遍删减不需要的功能确认无误后再拿去生成代码。这样做的好处是口述的内容是最真实的想法但可能漏掉重要细节而 AI 扩写时可能会问「要不要支持批量上传」这种你没想到的问题帮助你进一步验证需求。根据反馈决定保留或删除不实际的功能在反复修改中确定初版提示词。2.1.2 跳过扩写环节直接把你整理好的业务文档丢给 AI如果前面的章节已经整理好需求说明可以直接套用下面的格式交给 AI IDE适合范围清楚、准备开始实现的情况请参考下面的业务逻辑实现一个单页面应用用来验证核心流程。 业务逻辑参考如下 1. 帮运营批量生成第一版图文草稿 - **输入支持直接上传和批量导入素材** - 商品基础信息名称、类目、品牌、材质、尺寸、颜色、适用人群等 - 商品图片白底图 / 简单场景图 - 每次生成支持上传额外上传历史爆款截图或参考链接允许有参考物 - 支持通过 Excel 批量导入或在页面上在线录入 / 上传。 - 支持页面上指定是否保存商品素材到素材库方便下次使用 - **输出能直接拿去上架或轻改就能上架的内容** - 每个商品一张「看得过去、包含基础卖点」的主图草稿 - 一条「结构合理、含核心关键词」的标题 1–2 句卖点文案。 - **期望的使用方式变化** 从每批商品重新起稿变为批量导入后对系统生成的草稿进行筛选和调整。 先做第一个功能第二个功能模板库后面再加。2.1.3 程序员的做法进阶让 AI 帮你写「提示词的提示词」如果你想更精细地控制代码生成过程可以先让通用对话模型把需求整理成一份交给 AI IDE 的实现说明基于下面的想法帮我写一个发给 coding Agent 的写代码用的提示词 我需要用这个提示词来生成代码。 [把你的业务逻辑描述贴在这里] 要求 1. 提示词要包含清晰的页面布局描述 2. 明确数据结构和交互逻辑 3. 指定技术栈如 React Tailwind 4. 列出需要实现的核心功能点通常 AI 会生成结构化的提示词你可以稍作修改后发给 AI IDE 生成代码。2.2 第二步让 AI IDE 直接生成代码2.2.1 准备工作了解 AI IDE 的基本操作如果你还不熟悉 AI IDE 的基本使用方式建议先看附录中的 IDE 基础教程了解如何创建新项目、与 AI Agent 对话、理解 AI 的代码生成过程。2.2.2 开始生成代码AI IDE 的界面和确认方式会持续变化这里只保留一条稳定的工作流程新建并打开一个空项目文件夹可用npm create vitelatest初始化 React TypeScript 项目提交上一节整理好的实现说明在侧边栏选择你信任的模型教程推荐 gemini、gpt、glm、kimi、minimax 等查看 AI 准备修改的文件和命令遇到问题及时补充信息启动本地开发服务并打开终端给出的预览地址。⚠️ 重要AI 可能会停下来等待你的确认。生成过程中 AI Agent 常常暂停等待输入或确认例如询问是否继续下一步、请你按回车键确认某个操作、或询问某个技术细节的选择。如果 AI 不再响应先检查对话框是否在等你回复——很多新手以为 AI 还在思考其实它已经停下等你。主动回复或按回车AI 才会继续工作。本地服务与端口说明本地开发服务可以理解为运行在你自己电脑上的临时网页窗口只能本机访问。「localhost」意为「本机自己」在浏览器访问localhost时实际访问的是自己电脑上运行的网页。「端口」用于区分同一台电脑上的不同 Web 服务。例如教程场景中项目使用 Vite 默认端口 5173若被占用会自动切换为 5174在浏览器打开http://localhost:5174/即可看到当前项目页面——这是完全正常的现象。如果代码生成后页面没有出现需要主动告诉 AI「帮我启动这个项目」。完成第一轮生成后可以得到一版包含主要结构的页面见开头插图。初版页面信息层级和间距还有优化空间此时可以通过具体描述和页面截图让 AI 修改界面例如「第一版暂时不需要批量导入请先移除」「左侧字段太多请只保留完成核心流程所需的内容」。也可以参考成熟产品的信息结构和交互方式但应重新组织品牌、文案和视觉细节而不是直接复制页面。2.3 遇到报错怎么办在实际操作中遇到报错很常见这并不代表你做错了。处理时先保留一个可以运行的版本再把现象、错误信息和预期行为完整交给 AI——你甚至不需要完全理解错误本身。可以先从三类情况入手方式一页面或终端报错页面变红、白屏或终端出现错误信息时截图或复制完整日志发给 AI并说明刚才进行了什么操作。发送前检查日志中是否包含 API Key、账号等敏感信息。方式二功能不对但没报错比如按钮没反应、数据没显示、样式乱了用简单的话描述「现在发生了什么 预期是什么」必要时附一张截图。方式三不确定有没有问题直接问 AI「帮我检查一下这个功能有没有明显问题需不需要调整。」新手常见疑问Q我不知道错误信息在哪里A优先查看终端、浏览器控制台和页面提示凡是「红色」的提示基本就是错误复制错误本身及其前后几行并补充复现步骤。QAI 改完还是报同样的错怎么办A这是常见情况。继续截图或复制最新的错误信息发给它让它在上一次修改基础上进一步修复。Q我需要完全理解 AI 的修复方案吗A不必一次理解所有代码但要确认修改了哪些文件、问题是否消失以及原来能运行的功能是否仍然正常。每次聚焦一两个点像积累英语词汇一样慢慢建立代码语感。Q改了很多次问题还是没解决怎么办A可以尝试三种策略使用 IDE 的「版本回退」功能在智能体对话处找到撤回按钮回到一个可运行的版本重新开始更换模型或调整提示词把现象、错误信息描述得更具体把「当前代码 错误日志 预期行为」打包一次性发给 AI让它整体重构问题部分。3. 从单页面扩展到多页面应用核心流程可以运行后再检查导航、设置和列表等页面——初版中有些入口可能只有外观还没有对应行为比如点击「设置」或某些按钮毫无反应。可以让 AI 对照需求列出尚未实现的页面再按优先级逐个补充。也可以直接指定某个页面让 AI 实现直到所有页面可点击、所有功能交互正常。每完成一个页面都实际点击并检查关键交互。完成后按真实使用顺序走一遍完整流程录入商品 → 生成草稿 → 查看结果 → 收藏模板 → 再次使用。记录无法点击、跳转错误或内容缺失的位置再逐项修复。4. 完善原型的流程与反馈有了多页面结构之后最后一步是把原型从「能跑」变成「操作顺畅、观感专业」以新用户的视角完整走一遍流程检查输入、等待、结果、收藏和再次使用是否连贯。原型不需要拥有完整后台但每个要演示的入口都应给出合理反馈。首先回顾最初的需求这是整个原型的验收标准1. 帮运营批量生成第一版图文草稿 - **输入支持直接上传和批量导入素材** - 商品基础信息名称、类目、品牌、材质、尺寸、颜色、适用人群等 - 商品图片白底图 / 简单场景图 - 每次生成支持上传额外上传历史爆款截图或参考链接允许有参考物 - 支持通过 Excel 批量导入或在页面上在线录入 / 上传。 - 支持页面上指定是否保存商品素材到素材库方便下次使用 - **输出能直接拿去上架或轻改就能上架的内容** - 每个商品一张「看得过去、包含基础卖点」的主图草稿 - 一条「结构合理、含核心关键词」的标题 1–2 句卖点文案。 - **期望的使用方式变化** 从每批商品重新起稿变为批量导入后对系统生成的草稿进行筛选和调整。 2. 把好用的输出沉淀成可复用的模板库 - **什么可以被收藏** - 任意一条运营觉得「好用」的输出都可以一键收藏 - 可以是「主图 标题 卖点」的完整组合 - 也可以只收藏其中一部分例如某个标题结构、某条卖点文案。 - **收藏之后能做什么** - **复用** 用这条收藏套一批新商品参数重新生成图文草稿或在同一商品上基于该模板生成多版变体做 A/B 测试。 - **编辑** 直接修改标题文案 / 卖点文案如果支持图片编辑可以微调主图中的文字、贴纸等元素。 - **管理** 给收藏起名字、打标签如「男包主图模板」「大促标题结构」、支持按照店铺分类方便后续检索。 - **下次上新时如何使用** - 导入新商品后运营可以选择使用系统默认逻辑生成或指定「使用我收藏的某个模板来生成」 - 系统基于新商品数据自动套用模板的结构与风格输出新的主图 标题 卖点草稿。4.1 用测试数据快速走通流程如果每次测试都要手动录入新数据会浪费大量时间。此时可以请 AI 在界面上生成一个「载入示例」的测试数据入口每次刷新后快速复现同一条用户流程我现在需要测试这个用户使用过程确保他能完全走通请你结合下列需求生成测试数据入口让我能够点击后很快测试全流程是否正常 1. 帮运营批量生成第一版图文草稿 - **输入支持直接上传和批量导入素材** - 商品基础信息名称、类目、品牌、材质、尺寸、颜色、适用人群等 - 商品图片白底图 / 简单场景图 - 每次生成支持上传额外上传历史爆款截图或参考链接允许有参考物 - 支持通过 Excel 批量导入或在页面上在线录入 / 上传。 - 支持页面上指定是否保存商品素材到素材库方便下次使用 - **输出能直接拿去上架或轻改就能上架的内容** - 每个商品一张「看得过去、包含基础卖点」的主图草稿 - 一条「结构合理、含核心关键词」的标题 1–2 句卖点文案。 - **期望的使用方式变化** 从每批商品重新起稿变为批量导入后对系统生成的草稿进行筛选和调整。可以准备一个正常示例再补充信息缺失、图片格式不符等边界示例。如果结果「立即出现」用户无法判断系统是否正在处理——可以请 AI 加入一个短暂的加载状态用来验证等待过程中的按钮、提示和占位内容例如「请模拟一个真实的生成过程点击后过一段时间再显示结果。」4.2 确保模板库功能闭环走通生成功能后还要确保模板库功能正常。从页面的生成卡片上通常可以发现模板库收藏功能尚未实现此时与 AI 深入对话「请你帮我确保需求 [粘贴上面第 2 点的内容] 正常可以点击一个结果收藏对应的模板点开后能看到生成参数。」第一次实现通常还会遗漏一些状态比如收藏后无反馈、模板列表为空态可以结合截图逐项修正直到每个环节都有合理反馈。4.3 让 AI 帮你做需求检查除了手动体验需求流程还可以让 AI 直接做需求对照「请对照我最开始的需求检查当前应用是否已经覆盖所有核心功能。」「帮我列一个功能清单标出哪些已经完成、哪些尚未实现或体验不足。」AI 会输出一份检查清单但最终仍要由你实际操作并确认结果。经过几轮「生成 → 截图 → 反馈 → 修改」的循环后就可以得到一个相对完整、可以交给其他人试用的原型。5. 本章作业完成你的电商内容工作台参考本章的提示词和内容完成一次完整闭环完整闭环实践业务梳理 → 提示词生成 → 单页原型生成 → 多页原型生成成果分享截图你的程序分享给大家看思考题为下一节「接入大语言模型LLM和文生图能力」预留空间提前思考你的工作台里可以怎样嵌入「AI 写文案 / 生成配图 / 生成脚本」等能力下一步从原型到真实 AI 能力在下一节 docs/de-de/stage-1/integrating-ai-capabilities/index.md 中我们将在这个内容生产工作台的基础上接入具体的 AI 能力文字生文字、图片生文字、文字生图片例如为某条内容任务自动生成文案初稿和多个标题备选根据任务描述自动生成配图草稿文生图对历史内容任务做自动归类和摘要帮助你规划下一个活动的选题。当前仓库还提供了若干可直接运行的口语化提示词示例供参考examples/trae-linear-dashboard/prompt.txt、examples/trae-block-game/prompt.txt、examples/trae-3d-block-game/prompt.txt它们展示了「一句话 参考图」驱动 AI IDE 的最小工作方式。把本章的「先收敛需求、再生成、再验证」思路套用到任何业务场景你都能快速产出值得展示给用户的真实原型。【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址: https://gitcode.com/datawhalechina/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考