easy-vibe 实战：用 AI IDE 从业务提问到交付多页面产品原型，打造电商素材工作台

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