企业官网建设流程全解析

Easy Vibe 实战：从一句话需求到可演示的电商素材工作台原型（Vibe Coding 原型构建全流程）

【免费下载链接】easy-vibe💻 vibe coding 101｜The 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，生成一个"看上去很全"的电商素材工作台发给老板——按本课的说法，你的季度奖金大概率就没了。原因在于真实业务场景和玩具项目有三点本质差异：

1. 你不是用户：老板要"提效"，但你并不知道运营团队每天怎么干活、卡在哪里；
2. AI 不懂业务：你给 AI 一个模糊需求，它只能基于通用知识"猜"，结果看起来像那么回事，实际却没法用；
3. 好点子不等于好产品：你自认为"加个 AI 生成"很酷，但用户可能根本不需要，或者用起来比原来更麻烦。

因此，本课的核心主张是："知道做什么"与"知道怎么做"之间存在巨大的鸿沟，这条鸿沟就是"需求的具体化"。代码只是工具，先理解用户、找到正确的问题，才是第一步。

1. 写代码之前：先学会把业务问清楚

1.1 区分"需求"与"业务"

在动手之前，先厘清两个经常混淆的概念（原文以提示框形式给出）：

• 需求（Anforderung）：用户真正想要的东西，是他们想解决的问题。例如"老板想让我更快上新产品"——这是需求。
• 业务（Geschäft）：用户每天在做的事，即他们的工作方式。例如电商运营：上新产品、改价格、做图片、分析数据……这些都是业务。
• 为什么要关心业务？因为如果不懂业务，你的工具就会"看起来不错，但没人用"。只有真正理解用户每天怎么干活、卡在哪里，才能做出真正帮到他们的东西。

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

• 老板说"更高效一点"，到底指什么？更快？省钱？卖得更多？
• 现在是怎么上新的？哪里不顺畅？
• 每天有多少新品？每件商品有多少图、多少文案？
• 最烦的是什么、最不想做的是什么？

但这些只是猜测，必须直接找抖音电商运营团队沟通："你们的难点在哪，关注什么？"——通过沟通获得更精确的答案。

1.2 真实的业务访谈结果

本课记录了对电商运营人员的实际访谈结论，这正是"从分歧走向收敛"的起点：

问题一：任务太多、太乱

• 一个人要管多个店铺，每个店铺都有大量商品；
• 每天来回奔波：上新品、改价格、做图片、分析数据——一件事没做完，下一件又来了。

问题二：内容不是一次做完，而是迭代式产出

• 先用厂家图、过往素材或网上的参考图把商品快速上架试水；
• 花点钱投广告，看有没有人买；
• 只有卖得好的商品，才会精心制作图片、详情文案和视频。

1.3 从发散到收敛：识别业务的"核心痛点"

面对访谈得到的这么多问题，如果试图"一次性全部解决"，得到的只会是一个庞大但没用的工具。因此必须收敛（konvergieren）——从众多问题中挑出最痛、最急、最好解决的那个先做。

把运营问题大致分成三类（AI 可以帮助归类）：

追问业务团队后，内容创作方向又收敛出两个最痛的点：

痛点一：批量做图做文案极其繁琐

• 素材散落各处：云盘、微信聊天记录、平台后台……很难找；
• 同时上架大量商品，没时间精雕细琢，只能快速拼凑；
• 要求不高：能看、能上架就行，不需要多精致。

痛点二：好的方案无法保存复用

• 之前写过的优秀标题和排版，下次再也找不到了；
• 方案散落在聊天记录和旧商品链接里；
• 需要时：找半天、复制、再改；
• 缺少一个收集、管理、直接复用的工具。

1.4 定义最小可行的两个功能

基于上述两个痛点，最终将工具收敛为只做两件事（原文档明确要求：在业务反馈基础上不断做减法，而不是堆功能）：

功能一：批量生成电商商品图和文案

• 做什么：把商品信息交给系统，自动生成可直接用于电商平台（如抖音、淘宝）上架的商品图和文案。
• 输入：

• 输出（生成的电商素材）：
  • 商品主图：带文字卖点的商品展示图（用户滑动时第一眼看到的图）；
  • 商品标题：能被搜索到的关键词组合；
  • 卖点文案：1–2 句吸引买家的话；
  • 全部内容稍加修改即可上架。
• 结果对比：以前每件商品从零开始做；现在把一批商品丢进系统、生成草稿、挑选微调。

功能二：把好的方案存成模板

• 输入：完整的一套（主图 + 标题 + 文案）。
• 输出能力：

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

1.5 复盘：为什么"先收敛"这么重要

原文档在此处总结出产品/业务思维的核心，值得原样保留：

1. 先提问：不要上来就写代码，先问运营团队"你们最烦什么"；
2. 找痛点：发现他们最痛的是"做图做文案太麻烦"和"好方案存不下来"；
3. 收范围：不建"大而全"的平台，只做"批量图文生成 + 模板保存"这两个功能。

新手做产品最常见的错误是"功能越多越好"。但用户真正需要的是最痛问题的解法——一堆都不好用的功能，远不如一两个真正帮到用户的功能。本课还点明了贯穿全程的四个步骤（与后续章节一一对应）：

1. 澄清痛点：找运营团队聊，从模糊的"提效"中挖出真实痛点；
2. 排优先级：先解决最痛的那个，而不是一次全做；
3. 快速验证：先用 AI IDE 做单页原型，跑通后再扩展多页；
4. 做出可用的东西：最终交付一个能演示、能操作的电商素材工作台。

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 vite@latest创建 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。
• Q：AI 修了但还是同样的错误？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 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe