从业务分析到多页面原型easy-vibe 教你用 AI IDE 构建电商内容工坊实战指南【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文是 easy-vibevibe coding 101AI-native 产品构建者入门课程第三章节「构建你的原型」的中文深度导读。核心主题是如何把一个模糊的老板指令用 AI 提升电商上新效率经过业务访谈 → 痛点收敛 → 单页原型 → 多页面扩展 → 打磨测试的完整链路转化为一个真正可用的电商内容工坊atelier de contenus e-commerce原型。读完本文你将掌握面向 AI IDE 的三类 Prompt 撰写法、单页到多页的迭代策略、以及用测试数据验证用户旅程的完整方法并看到 easy-vibe 仓库中同类示例项目的落地形态。本教程与仓库中的示例项目如 examples/trae-linear-dashboard 的数据看板 Demo遵循同一套「口语化描述需求 → AI 生成代码 → 打开预览迭代」的 Vibe Coding 方法论。全文覆盖从玩具到应用的关键一跃先理解用户再让 AI 写代码。章节地图四个阶段的完整闭环本章遵循一条明确的学习主线共四个阶段需求分析从模糊到具体先访谈、再收敛单页验证用 AI IDE 在 10 分钟内实现关键功能多页扩展补齐应用完整结构打磨提升交互体验让原型能说服人。对应产出物一个电商内容工坊的交互式 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 可以协助归纳大致是三类节奏问题何时上新、何时调价效率问题如何同时管理多家店铺和商品内容问题如何快速产出商品图与文案。对本课程而言最适合先解决的是第 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 vitelatest创建了 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。QAI 改了但错误还在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 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考