Easy Vibe 实战从一句话需求到可演示的电商素材工作台原型Vibe Coding 原型构建全流程【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇技术指南以 Easy Vibe 课程第三课Prototyp erstellen构建原型为核心完整拆解一条真实的产品落地路径面对老板一句模糊的用 AI 提升抖音电商上新效率如何通过业务访谈澄清痛点、收敛需求范围再借助 AI IDE 在 10 分钟内产出单页原型、扩展为多页应用最终交付一个可以演示、可被 LLM 接管的电商素材工作台原型。读完本文你将掌握一套可复用的业务分析 → Prompt 生成 → 原型验证 → 迭代优化实战方法论并能在本仓库的课程体系docs/de-de/stage-1/building-prototype/index.md中找到每一步的原始教材依据。从玩具到应用为什么要先学会把需求问清楚在 Easy Vibe 课程的前几课里我们借助 AI IDE 轻松生成了贪吃蛇、计算器等小游戏——但这些都只是玩具项目无法直接用于职场或日常。真正的产品开发企业项目或创业项目通常从一个更大颗粒度的业务命题出发而不是做一个看板这类工具级描述。本课设定了一个非常典型的业务场景你是某店铺的电商运营产品经理老板交给你一句模糊但有压力的任务——大家都在用 AI 做公众号的图、文很简单。你也搞一下让咱们在抖音电商上新产品更高效。如果你激动地直接把这个需求丢给 AI IDE生成一个看上去很全的电商素材工作台发给老板——按本课的说法你的季度奖金大概率就没了。原因在于真实业务场景和玩具项目有三点本质差异你不是用户老板要提效但你并不知道运营团队每天怎么干活、卡在哪里AI 不懂业务你给 AI 一个模糊需求它只能基于通用知识猜结果看起来像那么回事实际却没法用好点子不等于好产品你自认为加个 AI 生成很酷但用户可能根本不需要或者用起来比原来更麻烦。因此本课的核心主张是知道做什么与知道怎么做之间存在巨大的鸿沟这条鸿沟就是需求的具体化。代码只是工具先理解用户、找到正确的问题才是第一步。1. 写代码之前先学会把业务问清楚1.1 区分需求与业务在动手之前先厘清两个经常混淆的概念原文以提示框形式给出需求Anforderung用户真正想要的东西是他们想解决的问题。例如老板想让我更快上新产品——这是需求。业务Geschäft用户每天在做的事即他们的工作方式。例如电商运营上新产品、改价格、做图片、分析数据……这些都是业务。为什么要关心业务因为如果不懂业务你的工具就会看起来不错但没人用。只有真正理解用户每天怎么干活、卡在哪里才能做出真正帮到他们的东西。从最简单的角度出发可以先问自己几个问题老板说更高效一点到底指什么更快省钱卖得更多现在是怎么上新的哪里不顺畅每天有多少新品每件商品有多少图、多少文案最烦的是什么、最不想做的是什么但这些只是猜测必须直接找抖音电商运营团队沟通你们的难点在哪关注什么——通过沟通获得更精确的答案。1.2 真实的业务访谈结果本课记录了对电商运营人员的实际访谈结论这正是从分歧走向收敛的起点问题一任务太多、太乱一个人要管多个店铺每个店铺都有大量商品每天来回奔波上新品、改价格、做图片、分析数据——一件事没做完下一件又来了。问题二内容不是一次做完而是迭代式产出先用厂家图、过往素材或网上的参考图把商品快速上架试水花点钱投广告看有没有人买只有卖得好的商品才会精心制作图片、详情文案和视频。1.3 从发散到收敛识别业务的核心痛点面对访谈得到的这么多问题如果试图一次性全部解决得到的只会是一个庞大但没用的工具。因此必须收敛konvergieren——从众多问题中挑出最痛、最急、最好解决的那个先做。把运营问题大致分成三类AI 可以帮助归类类型说明本课判断节奏类问题什么时候上新品、什么时候调价不适合本课范围效率类问题如何同时管理多店铺多商品不适合本课范围内容类问题如何快速产出商品图和文案最适合作为课程切入点追问业务团队后内容创作方向又收敛出两个最痛的点痛点一批量做图做文案极其繁琐素材散落各处云盘、微信聊天记录、平台后台……很难找同时上架大量商品没时间精雕细琢只能快速拼凑要求不高能看、能上架就行不需要多精致。痛点二好的方案无法保存复用之前写过的优秀标题和排版下次再也找不到了方案散落在聊天记录和旧商品链接里需要时找半天、复制、再改缺少一个收集、管理、直接复用的工具。1.4 定义最小可行的两个功能基于上述两个痛点最终将工具收敛为只做两件事原文档明确要求在业务反馈基础上不断做减法而不是堆功能功能一批量生成电商商品图和文案做什么把商品信息交给系统自动生成可直接用于电商平台如抖音、淘宝上架的商品图和文案。输入类型内容商品信息名称、类目、品牌、材质、尺寸、颜色等商品图片白底图或简单场景图参考图过往爆款截图或参考链接导入方式Excel 批量导入或页面直接填写输出生成的电商素材商品主图带文字卖点的商品展示图用户滑动时第一眼看到的图商品标题能被搜索到的关键词组合卖点文案1–2 句吸引买家的话全部内容稍加修改即可上架。结果对比以前每件商品从零开始做现在把一批商品丢进系统、生成草稿、挑选微调。功能二把好的方案存成模板输入完整的一套主图 标题 文案。输出能力功能描述应用下次上新品时自动套用模板编辑直接修改标题和文案管理命名、打标签如男包模板爆款标题方便查找使用流程1. 导入新商品 → 2. 选择系统默认生成或用我保存的模板 → 3. 系统自动套用模板风格生成新的图文。1.5 复盘为什么先收敛这么重要原文档在此处总结出产品/业务思维的核心值得原样保留先提问不要上来就写代码先问运营团队你们最烦什么找痛点发现他们最痛的是做图做文案太麻烦和好方案存不下来收范围不建大而全的平台只做批量图文生成 模板保存这两个功能。新手做产品最常见的错误是功能越多越好。但用户真正需要的是最痛问题的解法——一堆都不好用的功能远不如一两个真正帮到用户的功能。本课还点明了贯穿全程的四个步骤与后续章节一一对应澄清痛点找运营团队聊从模糊的提效中挖出真实痛点排优先级先解决最痛的那个而不是一次全做快速验证先用 AI IDE 做单页原型跑通后再扩展多页做出可用的东西最终交付一个能演示、能操作的电商素材工作台。2. 10 分钟做出原型让 AI IDE 把核心功能变成现实想清楚了就动手但也不要过度纠结。本课建议先用单个页面把原型做出来。值得说明的是这种一句话 Prompt → 可运行原型的做法在本仓库中有真实落地示例例如 examples/trae-block-game/prompt.txt帮我做一个像这样的方块小游戏……做好后帮我打开看看和 examples/trae-linear-dashboard/prompt.txt帮我做一个像这样的数据看板……做好后帮我打开看看——它们展示了单页原型的最小 Prompt 形态而本课要做的则是把这种能力升级到真实业务场景。2.1 第一步用大白话告诉 AI 你想要什么一开始不需要追求完美的 Prompt先从最自然的表达开始——像跟同事描述需求一样用大白话讲给 AI再让 AI 帮你优化成更专业的表述。方式 A从口头描述开始新手推荐先用你自己的话把想法写下来哪怕再粗糙我想做一个工具帮电商运营人员自动生成商品主图和文案。 运营人员现在要一张图一张图、一段文案一段文案地手动做非常累。 我的想法上传商品信息系统自动生成一整套草稿 运营人员挑能用的稍微改改就能用。 先做最简单的版本一个页面左边输入商品信息 右边展示生成结果。上传图片、输入文字 生成后展示主图预览和文案。把这段文字发给通用 AI如 ChatGPT、Claude 等请它扩写通常它会帮你补充没想到的细节、理清思路最终产出一个适合 AI IDE 的 Prompt。可以这样请它帮忙帮我扩写上面的想法整理成清晰的业务逻辑文档。 然后生成一个适合 AI IDE如 Cursor、Trae的 Prompt 用来生成单页原型代码。AI 会返回结构化需求与对应 Prompt。请自行检查、砍掉不必要的功能确认后再生成代码。这种方式的优势在于口头描述保留了你最真实的创意但可能漏掉关键细节AI 扩写时会反向追问你例如要不要支持批量上传正好帮你把需求验证得更完整。方式 B跳过扩写直接把业务文档交给 AI如果你在前几课已经写过业务逻辑文档用大白话写的需求说明可以直接用下面的格式发给 AI IDE省去中间扩写步骤——适合需求已经清晰、想直接开工的情况帮我根据业务逻辑实现一个单页应用验证核心功能。 业务逻辑参考 1. 帮运营人员批量生成第一版图文草稿 - **输入支持直接上传和批量导入** - 商品基础信息名称、类目、品牌、材质、尺寸、颜色、目标人群等 - 商品图片白底图 / 简单场景图 - 每次生成时可额外上传过往爆款截图或参考链接 - 支持 Excel 批量导入或页面在线填写/上传 - 页面可指定是否将商品素材存入素材库供后续使用。 - **输出可直接上架或稍加修改的内容** - 每个商品一个能看且含基础卖点的主图草稿 - 一个结构合规的标题核心关键词 1-2 句卖点文案。 - **期望的工作方式变化** 从每批商品都从零开始做变为把一批商品丢进系统、 用系统草稿挑选微调。 先实现第一个功能第二个功能模板库后续再加。方式 C程序员进阶——让 AI 帮你写Prompt 的 Prompt如果你想更精细地控制代码生成过程可以先用通用 AI 基于你的需求生成一个专门面向 AI IDE 的 Prompt基于下面这个想法帮我写一个给 Coding Agent 用的 Prompt 用来生成代码。我要拿这个 Prompt 去生成代码。 [在这里粘贴你的业务逻辑描述] 要求 1. Prompt 里要有清晰的页面布局描述 2. 明确数据结构和交互逻辑 3. 指定技术栈如 React Tailwind 4. 列出要实现的核心功能AI 通常会返回一份结构化 Prompt例如包含项目概述、核心功能需求、商品素材输入、TypeScript 接口ProductInput等内容的单页应用需求文档——这就是原文档配图所展示的形态把这份 Prompt 稍作调整发给 AI IDE即可生成代码。2.2 第二步让 AI IDE 直接生成代码准备工作如果还不熟悉 AI IDE如 Cursor、Trae、Windsurf 等建议先读 docs/de-de/appendix/2-development-tools/ide-basics.md 了解如何新建项目、如何与 AI Agent 对话、如何理解 AI 的代码生成过程。开始生成创建窗口和对应文件夹打开该文件夹在你喜欢的目录初始化新项目。在侧边栏选择模型原文推荐 gemini、gpt、glm、kimi、minimax 等输入第一步的 Prompt。点击生成后AI 会基于 Prompt 规划项目目录结构、必要文件并给出每个文件的初始内容。重要提示AI 可能停下来等你的确认。生成过程中 AI Agent 经常暂停等待你的输入或确认例如询问是否继续下一步、要求按回车确认某个操作、询问技术细节的选择。如果 AI 没有反应先检查对话界面是否在等你回答——很多新手以为 AI 还在思考其实它已经停下来等你了。主动回应或按回车AI 就会继续干活。另一个常见场景是用npm create vitelatest创建 React TypeScript 项目例如 easy-vibe-web后电脑会自动启动网页。这里涉及几个基础概念原文逐条解释过本地服务可以理解为临时网页显示窗口只在你自己的电脑上运行别人访问不到localhost本地地址意为本机自己浏览器访问它实际是在访问跑在你电脑上的网页端口可理解为区分同一台电脑上不同 Web 服务的编号。本课示例项目使用 5174访问链接http://localhost:5174/意为访问本机 5174 号网页在浏览器打开即可看到结果场景说明系统原本想用 5173但该端口已被占用于是自动切到 5174这是正常现象。确认后等待 Agent 完成工作即可得到第一版可用的页面。此时界面通常还比较简陋但已经具备基本功能。接下来就可以直接和 AI 对话来优化界面比如我现在不需要批量导入功能请删掉左侧要输入的东西太多只保留 xxx甚至可以粘贴一张你喜欢的成熟网站截图作为参考设计原文示例是用 Google 的一个设计作品当参考。经过几轮对话优化后就能得到一版界面明显更专业、交互更清晰的单页原型——左侧是商品录入含单品录入/批量导入选项卡、基础信息、属性规格、视觉素材上传、立即生成草稿按钮右侧是生成结果区你可以按自己的需要继续调整页面功能、附截图、自由提问。2.3 出错了怎么办实践中出错是难免的这很正常不代表你做错了什么。你不需要理解错误——只需要把你看到的完整地丢给 AI。基本上有三种处理方法方法一页面或终端报错页面变红、变白或终端出现大量红色报错——截图或整段复制报错信息发给 AI请它修复方法二功能不对但没报错例如按钮没反应、数据没显示、布局错乱——用大白话描述刚才发生了什么 你本来想要什么必要时附截图方法三不确定是否有问题直接问 AI帮我检查这个功能有没有明显问题、需不需要调整。新手高频问题原文 FAQ 摘录Q我不知道报错信息在哪A找一切红色的东西——终端、控制台或页面上找到红色提示全部选中复制给 AI。QAI 修了但还是同样的错误A这是常见情况继续截图或复制最新报错发给 AI让它基于上一次改动继续修。Q必须完全理解 AI 的修法吗A不必一次全懂每次专注搞懂一两个点日积月累——就像积累英语词汇。Q改了很多次还是不行A可以尝试用 IDE 的版本回退功能回到可运行版本重来换一个模型或调整 Prompt把现象和报错描述得更具体把当前代码 错误日志 预期行为打包一次性给 AI让它整体重构问题区域。3. 从单页扩展到多页应用当核心功能的逻辑基本生成后就可以补全其余内容了——此时点击设置或某些按钮可能还是完全无效的。你可以让 AI 基于业务 Prompt 的要求自查并生成尚未产出的部分也可以让 AI 直接补全实现不完整的页面或指定某个具体页面让 AI 实现直到所有页面可点击、所有功能都能正常交互等待片刻后程序会在原有基础上补充多个页面和交互功能——例如首页之外还出现了设置页可配置默认品牌与目标受众、生成风格语气、自动增强图片开关等。之后你需要手动逐个点击每个功能和按钮确认交互正常如果有不生效的交互再和 AI 沟通请它修复。4. 让原型像真的全流程跑通与测试有了多页结构之后最后一步是把原型从能跑提升到操作顺畅、看起来专业。做法是以新用户的身份把完整流程用户流亲自走一遍把不通的地方交给 AI 修复让每次刷新后都能以新用户身份模拟完整流程并得到预期结果。4.1 复盘原始需求原文在此完整复述了最初的两大功能需求作为验收依据1. 帮运营人员批量生成第一版图文草稿 - **输入支持直接上传和批量导入** - 商品基础信息名称、类目、品牌、材质、尺寸、颜色、目标人群等 - 商品图片白底图 / 简单场景图 - 每次生成时可额外上传过往爆款截图或参考链接 - 支持 Excel 批量导入或页面在线填写/上传 - 页面可指定是否将商品素材存入素材库供后续使用。 - **输出可直接上架或稍加修改的内容** - 每个商品一个能看且含基础卖点的主图草稿 - 一个结构合规的标题核心关键词 1-2 句卖点文案。 - **期望的工作方式变化** 从每批商品都从零开始做变为把一批商品丢进系统、 用系统草稿挑选微调。 2. 把好的产出保存为可复用的模板库 - **能存什么** - 任何运营觉得效果好的产出都可以一键保存 - 可以是主图 标题 卖点的完整组合 - 也可以只存一部分例如某个标题结构或某句卖点文案。 - **存完能做什么** - **复用** 用保存的模板填入新商品参数生成新的图文草稿 或在同一商品上基于模板生成多个变体做 A/B 测试。 - **编辑** 直接改标题文本 / 卖点文本 若支持图片编辑可对主图中的文字、贴纸等微调。 - **管理** 给保存的模板命名、打标签如男包主图模板、 爆款标题结构、按店铺归类方便后续查找。 - **下次怎么用** - 导入新商品后运营可选择 - 使用系统默认逻辑或 - 指定使用我保存的模板 - 系统基于新商品数据自动套用模板的结构与风格 生成新的主图 标题 卖点草稿。4.2 用测试数据快速验证流程如果每次测试都要手动造新数据会非常耗时。此时可以用一种叫测试数据的方法——直接和 AI 沟通请它在界面上生成一个快速测试数据入口我现在要测试这个使用流程确保能完整走通。 请根据下面的需求生成一个测试数据入口 让我一键点击后快速测试整个流程是否正常 1. 帮运营人员批量生成第一版图文草稿 - **输入支持直接上传和批量导入** - 商品基础信息名称、类目、品牌、材质、尺寸、颜色、目标人群等 - 商品图片白底图 / 简单场景图 - 每次生成时可额外上传过往爆款截图或参考链接 - 支持 Excel 批量导入或页面在线填写/上传 - 页面可指定是否将商品素材存入素材库供后续使用。 - **输出可直接上架或稍加修改的内容** - 每个商品一个能看且含基础卖点的主图草稿 - 一个结构合规的标题核心关键词 1-2 句卖点文案。 - **期望的工作方式变化** 从每批商品都从零开始做变为把一批商品丢进系统、 用系统草稿挑选微调。很快就能得到结果如果觉得一条数据太少可以让 AI 生成多个可测试的用例。点击后即可直接看到生成结果。这里要注意一个细节直接得到的结果没有模拟生成过程——如果想模拟真实的生成过程可以继续和 AI 对话请模拟一个真实的生成过程点击后过一会儿再展示结果从而让原型演示更接近真实产品体验。4.3 确保模板库功能闭环生成功能跑通后还需要确认模板库正常工作。在页面的生成卡片上你可能发现模板库保存功能还没实现。此时继续和 AI 深入沟通请帮我确保满足需求[粘贴上面第 2 点的内容]点击某个结果可以保存为对应模板打开后能看到生成参数。生成往往不是一步到位的经常需要反复截图、修改。最终会得到预期结果——例如点击结果可弹出生成参数详情商品名、品牌、类目、属性、参考链接等确认模板保存链路完整可用。4.4 让 AI 直接做需求核对除了手动核对需求流程还可以让 AI 直接做需求审查例如请对照我最初的原始需求检查当前应用是否覆盖了所有核心功能。帮我列一份功能清单标注哪些已完成、哪些未实现或做得不够。AI 通常会输出一份核对清单。根据结果判断是否需要继续改进。经过反复打磨就能得到一个相对完整的原型。5. 实战作业完成你自己的抖音电商内容工作台参照本课的 Prompt 与内容完成一个完整闭环完整实践闭环业务梳理 → Prompt 生成 → 单页原型生成 → 多页原型生成成果分享给你的程序截图分享给别人看思考题为下一课接入大模型LLM与文生图能力做准备提前想清楚如何把AI 写文案 / 文生图 / 脚本生成嵌入你的工作台下一步从原型到真实 AI 能力下一课将在这个内容生产工作台的基础上接入具体的 AI 能力文生文、图生文、文生图例如为一个内容任务自动生成文案草稿和多个标题备选基于任务描述自动生成图片草稿Text-to-Image自动归类、总结历史内容任务辅助你规划下一次活动。这些能力在 Easy Vibe 课程体系的下一阶段有对应的进阶内容可参考 docs/de-de/stage-2/ai-capabilities/ 目录下的课程例如知识库与 AI 能力接入的实践讲解。至此你已完成从一句话需求到可演示多页产品原型的完整 Vibe Coding 闭环——先问清楚业务、收敛到最痛的 1–2 个功能、用 AI IDE 快速生成单页验证、再扩展多页并全流程测试这正是 AI 原生产品构建者最重要的基本功。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Easy Vibe 实战：从一句话需求到可演示的电商素材工作台原型（Vibe Coding 原型构建全流程）
Easy Vibe 实战从一句话需求到可演示的电商素材工作台原型Vibe Coding 原型构建全流程【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本篇技术指南以 Easy Vibe 课程第三课Prototyp erstellen构建原型为核心完整拆解一条真实的产品落地路径面对老板一句模糊的用 AI 提升抖音电商上新效率如何通过业务访谈澄清痛点、收敛需求范围再借助 AI IDE 在 10 分钟内产出单页原型、扩展为多页应用最终交付一个可以演示、可被 LLM 接管的电商素材工作台原型。读完本文你将掌握一套可复用的业务分析 → Prompt 生成 → 原型验证 → 迭代优化实战方法论并能在本仓库的课程体系docs/de-de/stage-1/building-prototype/index.md中找到每一步的原始教材依据。从玩具到应用为什么要先学会把需求问清楚在 Easy Vibe 课程的前几课里我们借助 AI IDE 轻松生成了贪吃蛇、计算器等小游戏——但这些都只是玩具项目无法直接用于职场或日常。真正的产品开发企业项目或创业项目通常从一个更大颗粒度的业务命题出发而不是做一个看板这类工具级描述。本课设定了一个非常典型的业务场景你是某店铺的电商运营产品经理老板交给你一句模糊但有压力的任务——大家都在用 AI 做公众号的图、文很简单。你也搞一下让咱们在抖音电商上新产品更高效。如果你激动地直接把这个需求丢给 AI IDE生成一个看上去很全的电商素材工作台发给老板——按本课的说法你的季度奖金大概率就没了。原因在于真实业务场景和玩具项目有三点本质差异你不是用户老板要提效但你并不知道运营团队每天怎么干活、卡在哪里AI 不懂业务你给 AI 一个模糊需求它只能基于通用知识猜结果看起来像那么回事实际却没法用好点子不等于好产品你自认为加个 AI 生成很酷但用户可能根本不需要或者用起来比原来更麻烦。因此本课的核心主张是知道做什么与知道怎么做之间存在巨大的鸿沟这条鸿沟就是需求的具体化。代码只是工具先理解用户、找到正确的问题才是第一步。1. 写代码之前先学会把业务问清楚1.1 区分需求与业务在动手之前先厘清两个经常混淆的概念原文以提示框形式给出需求Anforderung用户真正想要的东西是他们想解决的问题。例如老板想让我更快上新产品——这是需求。业务Geschäft用户每天在做的事即他们的工作方式。例如电商运营上新产品、改价格、做图片、分析数据……这些都是业务。为什么要关心业务因为如果不懂业务你的工具就会看起来不错但没人用。只有真正理解用户每天怎么干活、卡在哪里才能做出真正帮到他们的东西。从最简单的角度出发可以先问自己几个问题老板说更高效一点到底指什么更快省钱卖得更多现在是怎么上新的哪里不顺畅每天有多少新品每件商品有多少图、多少文案最烦的是什么、最不想做的是什么但这些只是猜测必须直接找抖音电商运营团队沟通你们的难点在哪关注什么——通过沟通获得更精确的答案。1.2 真实的业务访谈结果本课记录了对电商运营人员的实际访谈结论这正是从分歧走向收敛的起点问题一任务太多、太乱一个人要管多个店铺每个店铺都有大量商品每天来回奔波上新品、改价格、做图片、分析数据——一件事没做完下一件又来了。问题二内容不是一次做完而是迭代式产出先用厂家图、过往素材或网上的参考图把商品快速上架试水花点钱投广告看有没有人买只有卖得好的商品才会精心制作图片、详情文案和视频。1.3 从发散到收敛识别业务的核心痛点面对访谈得到的这么多问题如果试图一次性全部解决得到的只会是一个庞大但没用的工具。因此必须收敛konvergieren——从众多问题中挑出最痛、最急、最好解决的那个先做。把运营问题大致分成三类AI 可以帮助归类类型说明本课判断节奏类问题什么时候上新品、什么时候调价不适合本课范围效率类问题如何同时管理多店铺多商品不适合本课范围内容类问题如何快速产出商品图和文案最适合作为课程切入点追问业务团队后内容创作方向又收敛出两个最痛的点痛点一批量做图做文案极其繁琐素材散落各处云盘、微信聊天记录、平台后台……很难找同时上架大量商品没时间精雕细琢只能快速拼凑要求不高能看、能上架就行不需要多精致。痛点二好的方案无法保存复用之前写过的优秀标题和排版下次再也找不到了方案散落在聊天记录和旧商品链接里需要时找半天、复制、再改缺少一个收集、管理、直接复用的工具。1.4 定义最小可行的两个功能基于上述两个痛点最终将工具收敛为只做两件事原文档明确要求在业务反馈基础上不断做减法而不是堆功能功能一批量生成电商商品图和文案做什么把商品信息交给系统自动生成可直接用于电商平台如抖音、淘宝上架的商品图和文案。输入类型内容商品信息名称、类目、品牌、材质、尺寸、颜色等商品图片白底图或简单场景图参考图过往爆款截图或参考链接导入方式Excel 批量导入或页面直接填写输出生成的电商素材商品主图带文字卖点的商品展示图用户滑动时第一眼看到的图商品标题能被搜索到的关键词组合卖点文案1–2 句吸引买家的话全部内容稍加修改即可上架。结果对比以前每件商品从零开始做现在把一批商品丢进系统、生成草稿、挑选微调。功能二把好的方案存成模板输入完整的一套主图 标题 文案。输出能力功能描述应用下次上新品时自动套用模板编辑直接修改标题和文案管理命名、打标签如男包模板爆款标题方便查找使用流程1. 导入新商品 → 2. 选择系统默认生成或用我保存的模板 → 3. 系统自动套用模板风格生成新的图文。1.5 复盘为什么先收敛这么重要原文档在此处总结出产品/业务思维的核心值得原样保留先提问不要上来就写代码先问运营团队你们最烦什么找痛点发现他们最痛的是做图做文案太麻烦和好方案存不下来收范围不建大而全的平台只做批量图文生成 模板保存这两个功能。新手做产品最常见的错误是功能越多越好。但用户真正需要的是最痛问题的解法——一堆都不好用的功能远不如一两个真正帮到用户的功能。本课还点明了贯穿全程的四个步骤与后续章节一一对应澄清痛点找运营团队聊从模糊的提效中挖出真实痛点排优先级先解决最痛的那个而不是一次全做快速验证先用 AI IDE 做单页原型跑通后再扩展多页做出可用的东西最终交付一个能演示、能操作的电商素材工作台。2. 10 分钟做出原型让 AI IDE 把核心功能变成现实想清楚了就动手但也不要过度纠结。本课建议先用单个页面把原型做出来。值得说明的是这种一句话 Prompt → 可运行原型的做法在本仓库中有真实落地示例例如 examples/trae-block-game/prompt.txt帮我做一个像这样的方块小游戏……做好后帮我打开看看和 examples/trae-linear-dashboard/prompt.txt帮我做一个像这样的数据看板……做好后帮我打开看看——它们展示了单页原型的最小 Prompt 形态而本课要做的则是把这种能力升级到真实业务场景。2.1 第一步用大白话告诉 AI 你想要什么一开始不需要追求完美的 Prompt先从最自然的表达开始——像跟同事描述需求一样用大白话讲给 AI再让 AI 帮你优化成更专业的表述。方式 A从口头描述开始新手推荐先用你自己的话把想法写下来哪怕再粗糙我想做一个工具帮电商运营人员自动生成商品主图和文案。 运营人员现在要一张图一张图、一段文案一段文案地手动做非常累。 我的想法上传商品信息系统自动生成一整套草稿 运营人员挑能用的稍微改改就能用。 先做最简单的版本一个页面左边输入商品信息 右边展示生成结果。上传图片、输入文字 生成后展示主图预览和文案。把这段文字发给通用 AI如 ChatGPT、Claude 等请它扩写通常它会帮你补充没想到的细节、理清思路最终产出一个适合 AI IDE 的 Prompt。可以这样请它帮忙帮我扩写上面的想法整理成清晰的业务逻辑文档。 然后生成一个适合 AI IDE如 Cursor、Trae的 Prompt 用来生成单页原型代码。AI 会返回结构化需求与对应 Prompt。请自行检查、砍掉不必要的功能确认后再生成代码。这种方式的优势在于口头描述保留了你最真实的创意但可能漏掉关键细节AI 扩写时会反向追问你例如要不要支持批量上传正好帮你把需求验证得更完整。方式 B跳过扩写直接把业务文档交给 AI如果你在前几课已经写过业务逻辑文档用大白话写的需求说明可以直接用下面的格式发给 AI IDE省去中间扩写步骤——适合需求已经清晰、想直接开工的情况帮我根据业务逻辑实现一个单页应用验证核心功能。 业务逻辑参考 1. 帮运营人员批量生成第一版图文草稿 - **输入支持直接上传和批量导入** - 商品基础信息名称、类目、品牌、材质、尺寸、颜色、目标人群等 - 商品图片白底图 / 简单场景图 - 每次生成时可额外上传过往爆款截图或参考链接 - 支持 Excel 批量导入或页面在线填写/上传 - 页面可指定是否将商品素材存入素材库供后续使用。 - **输出可直接上架或稍加修改的内容** - 每个商品一个能看且含基础卖点的主图草稿 - 一个结构合规的标题核心关键词 1-2 句卖点文案。 - **期望的工作方式变化** 从每批商品都从零开始做变为把一批商品丢进系统、 用系统草稿挑选微调。 先实现第一个功能第二个功能模板库后续再加。方式 C程序员进阶——让 AI 帮你写Prompt 的 Prompt如果你想更精细地控制代码生成过程可以先用通用 AI 基于你的需求生成一个专门面向 AI IDE 的 Prompt基于下面这个想法帮我写一个给 Coding Agent 用的 Prompt 用来生成代码。我要拿这个 Prompt 去生成代码。 [在这里粘贴你的业务逻辑描述] 要求 1. Prompt 里要有清晰的页面布局描述 2. 明确数据结构和交互逻辑 3. 指定技术栈如 React Tailwind 4. 列出要实现的核心功能AI 通常会返回一份结构化 Prompt例如包含项目概述、核心功能需求、商品素材输入、TypeScript 接口ProductInput等内容的单页应用需求文档——这就是原文档配图所展示的形态把这份 Prompt 稍作调整发给 AI IDE即可生成代码。2.2 第二步让 AI IDE 直接生成代码准备工作如果还不熟悉 AI IDE如 Cursor、Trae、Windsurf 等建议先读 docs/de-de/appendix/2-development-tools/ide-basics.md 了解如何新建项目、如何与 AI Agent 对话、如何理解 AI 的代码生成过程。开始生成创建窗口和对应文件夹打开该文件夹在你喜欢的目录初始化新项目。在侧边栏选择模型原文推荐 gemini、gpt、glm、kimi、minimax 等输入第一步的 Prompt。点击生成后AI 会基于 Prompt 规划项目目录结构、必要文件并给出每个文件的初始内容。重要提示AI 可能停下来等你的确认。生成过程中 AI Agent 经常暂停等待你的输入或确认例如询问是否继续下一步、要求按回车确认某个操作、询问技术细节的选择。如果 AI 没有反应先检查对话界面是否在等你回答——很多新手以为 AI 还在思考其实它已经停下来等你了。主动回应或按回车AI 就会继续干活。另一个常见场景是用npm create vitelatest创建 React TypeScript 项目例如 easy-vibe-web后电脑会自动启动网页。这里涉及几个基础概念原文逐条解释过本地服务可以理解为临时网页显示窗口只在你自己的电脑上运行别人访问不到localhost本地地址意为本机自己浏览器访问它实际是在访问跑在你电脑上的网页端口可理解为区分同一台电脑上不同 Web 服务的编号。本课示例项目使用 5174访问链接http://localhost:5174/意为访问本机 5174 号网页在浏览器打开即可看到结果场景说明系统原本想用 5173但该端口已被占用于是自动切到 5174这是正常现象。确认后等待 Agent 完成工作即可得到第一版可用的页面。此时界面通常还比较简陋但已经具备基本功能。接下来就可以直接和 AI 对话来优化界面比如我现在不需要批量导入功能请删掉左侧要输入的东西太多只保留 xxx甚至可以粘贴一张你喜欢的成熟网站截图作为参考设计原文示例是用 Google 的一个设计作品当参考。经过几轮对话优化后就能得到一版界面明显更专业、交互更清晰的单页原型——左侧是商品录入含单品录入/批量导入选项卡、基础信息、属性规格、视觉素材上传、立即生成草稿按钮右侧是生成结果区你可以按自己的需要继续调整页面功能、附截图、自由提问。2.3 出错了怎么办实践中出错是难免的这很正常不代表你做错了什么。你不需要理解错误——只需要把你看到的完整地丢给 AI。基本上有三种处理方法方法一页面或终端报错页面变红、变白或终端出现大量红色报错——截图或整段复制报错信息发给 AI请它修复方法二功能不对但没报错例如按钮没反应、数据没显示、布局错乱——用大白话描述刚才发生了什么 你本来想要什么必要时附截图方法三不确定是否有问题直接问 AI帮我检查这个功能有没有明显问题、需不需要调整。新手高频问题原文 FAQ 摘录Q我不知道报错信息在哪A找一切红色的东西——终端、控制台或页面上找到红色提示全部选中复制给 AI。QAI 修了但还是同样的错误A这是常见情况继续截图或复制最新报错发给 AI让它基于上一次改动继续修。Q必须完全理解 AI 的修法吗A不必一次全懂每次专注搞懂一两个点日积月累——就像积累英语词汇。Q改了很多次还是不行A可以尝试用 IDE 的版本回退功能回到可运行版本重来换一个模型或调整 Prompt把现象和报错描述得更具体把当前代码 错误日志 预期行为打包一次性给 AI让它整体重构问题区域。3. 从单页扩展到多页应用当核心功能的逻辑基本生成后就可以补全其余内容了——此时点击设置或某些按钮可能还是完全无效的。你可以让 AI 基于业务 Prompt 的要求自查并生成尚未产出的部分也可以让 AI 直接补全实现不完整的页面或指定某个具体页面让 AI 实现直到所有页面可点击、所有功能都能正常交互等待片刻后程序会在原有基础上补充多个页面和交互功能——例如首页之外还出现了设置页可配置默认品牌与目标受众、生成风格语气、自动增强图片开关等。之后你需要手动逐个点击每个功能和按钮确认交互正常如果有不生效的交互再和 AI 沟通请它修复。4. 让原型像真的全流程跑通与测试有了多页结构之后最后一步是把原型从能跑提升到操作顺畅、看起来专业。做法是以新用户的身份把完整流程用户流亲自走一遍把不通的地方交给 AI 修复让每次刷新后都能以新用户身份模拟完整流程并得到预期结果。4.1 复盘原始需求原文在此完整复述了最初的两大功能需求作为验收依据1. 帮运营人员批量生成第一版图文草稿 - **输入支持直接上传和批量导入** - 商品基础信息名称、类目、品牌、材质、尺寸、颜色、目标人群等 - 商品图片白底图 / 简单场景图 - 每次生成时可额外上传过往爆款截图或参考链接 - 支持 Excel 批量导入或页面在线填写/上传 - 页面可指定是否将商品素材存入素材库供后续使用。 - **输出可直接上架或稍加修改的内容** - 每个商品一个能看且含基础卖点的主图草稿 - 一个结构合规的标题核心关键词 1-2 句卖点文案。 - **期望的工作方式变化** 从每批商品都从零开始做变为把一批商品丢进系统、 用系统草稿挑选微调。 2. 把好的产出保存为可复用的模板库 - **能存什么** - 任何运营觉得效果好的产出都可以一键保存 - 可以是主图 标题 卖点的完整组合 - 也可以只存一部分例如某个标题结构或某句卖点文案。 - **存完能做什么** - **复用** 用保存的模板填入新商品参数生成新的图文草稿 或在同一商品上基于模板生成多个变体做 A/B 测试。 - **编辑** 直接改标题文本 / 卖点文本 若支持图片编辑可对主图中的文字、贴纸等微调。 - **管理** 给保存的模板命名、打标签如男包主图模板、 爆款标题结构、按店铺归类方便后续查找。 - **下次怎么用** - 导入新商品后运营可选择 - 使用系统默认逻辑或 - 指定使用我保存的模板 - 系统基于新商品数据自动套用模板的结构与风格 生成新的主图 标题 卖点草稿。4.2 用测试数据快速验证流程如果每次测试都要手动造新数据会非常耗时。此时可以用一种叫测试数据的方法——直接和 AI 沟通请它在界面上生成一个快速测试数据入口我现在要测试这个使用流程确保能完整走通。 请根据下面的需求生成一个测试数据入口 让我一键点击后快速测试整个流程是否正常 1. 帮运营人员批量生成第一版图文草稿 - **输入支持直接上传和批量导入** - 商品基础信息名称、类目、品牌、材质、尺寸、颜色、目标人群等 - 商品图片白底图 / 简单场景图 - 每次生成时可额外上传过往爆款截图或参考链接 - 支持 Excel 批量导入或页面在线填写/上传 - 页面可指定是否将商品素材存入素材库供后续使用。 - **输出可直接上架或稍加修改的内容** - 每个商品一个能看且含基础卖点的主图草稿 - 一个结构合规的标题核心关键词 1-2 句卖点文案。 - **期望的工作方式变化** 从每批商品都从零开始做变为把一批商品丢进系统、 用系统草稿挑选微调。很快就能得到结果如果觉得一条数据太少可以让 AI 生成多个可测试的用例。点击后即可直接看到生成结果。这里要注意一个细节直接得到的结果没有模拟生成过程——如果想模拟真实的生成过程可以继续和 AI 对话请模拟一个真实的生成过程点击后过一会儿再展示结果从而让原型演示更接近真实产品体验。4.3 确保模板库功能闭环生成功能跑通后还需要确认模板库正常工作。在页面的生成卡片上你可能发现模板库保存功能还没实现。此时继续和 AI 深入沟通请帮我确保满足需求[粘贴上面第 2 点的内容]点击某个结果可以保存为对应模板打开后能看到生成参数。生成往往不是一步到位的经常需要反复截图、修改。最终会得到预期结果——例如点击结果可弹出生成参数详情商品名、品牌、类目、属性、参考链接等确认模板保存链路完整可用。4.4 让 AI 直接做需求核对除了手动核对需求流程还可以让 AI 直接做需求审查例如请对照我最初的原始需求检查当前应用是否覆盖了所有核心功能。帮我列一份功能清单标注哪些已完成、哪些未实现或做得不够。AI 通常会输出一份核对清单。根据结果判断是否需要继续改进。经过反复打磨就能得到一个相对完整的原型。5. 实战作业完成你自己的抖音电商内容工作台参照本课的 Prompt 与内容完成一个完整闭环完整实践闭环业务梳理 → Prompt 生成 → 单页原型生成 → 多页原型生成成果分享给你的程序截图分享给别人看思考题为下一课接入大模型LLM与文生图能力做准备提前想清楚如何把AI 写文案 / 文生图 / 脚本生成嵌入你的工作台下一步从原型到真实 AI 能力下一课将在这个内容生产工作台的基础上接入具体的 AI 能力文生文、图生文、文生图例如为一个内容任务自动生成文案草稿和多个标题备选基于任务描述自动生成图片草稿Text-to-Image自动归类、总结历史内容任务辅助你规划下一次活动。这些能力在 Easy Vibe 课程体系的下一阶段有对应的进阶内容可参考 docs/de-de/stage-2/ai-capabilities/ 目录下的课程例如知识库与 AI 能力接入的实践讲解。至此你已完成从一句话需求到可演示多页产品原型的完整 Vibe Coding 闭环——先问清楚业务、收敛到最痛的 1–2 个功能、用 AI IDE 快速生成单页验证、再扩展多页并全流程测试这正是 AI 原生产品构建者最重要的基本功。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
