企业官网建设流程全解析

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

【免费下载链接】easy-vibe💻 vibe coding 101｜The 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 帮忙），大致有三类：

1. 节奏问题：什么时候上架、什么时候调价；
2. 效率问题：怎么同时管好多个店、多个商品；
3. 内容问题：怎么快速做出商品图片和文案。

对本课程而言，最适合先验证的是第 3 类：内容制作问题。但"快速做内容"仍然抽象，继续追问具体阻碍，业务方提到了两个具体问题：

问题 1：批量制作图文需要重复操作

• 素材分散在网盘、聊天记录和平台后台，查找需要时间；
• 一次要处理多个商品，很难逐个从头制作；
• 首版内容只需达到测试要求，后续再根据数据优化。

问题 2：已有方案不容易复用

• 之前用过的标题和排版，下次需要时不容易找到；
• 方案散落在聊天记录、以前的商品链接里；
• 重复查找、复制和修改占用了制作时间；
• 缺少统一收藏、管理和套用方案的工具。

基于这两个问题，把原型范围定为：帮助运营批量生成图文草稿，并保存可复用的方案。它只做两件事（可以让 AI 帮忙细化，并不断根据业务反馈删减功能）：

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

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

回顾刚才做了什么：

1. 先了解工作方式：观察运营怎样准备商品内容；
2. 找到关键问题：确认重复制作和方案复用是主要阻碍；
3. 收敛范围：不做大而全的平台，只做"批量生成图和文案 + 存模板"两个功能。

为什么这样做很重要？原型的价值不由功能数量决定。范围越清楚，越容易让用户完成一次任务，并观察方案是否有效。产品与业务思维的核心是：先了解用户每天怎样完成任务 → 用具体事实判断问题的频率和影响 → 从多个问题中收敛出一个可验证的切口 → 先做最小版本，再根据使用结果迭代。这就是写代码之前要想清楚的事——代码只是工具，理解用户、找准问题才是第一步。

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 的界面和确认方式会持续变化，这里只保留一条稳定的工作流程：

1. 新建并打开一个空项目文件夹；
2. 提交上一节整理好的实现说明；
3. 查看 AI 准备修改的文件和命令，遇到问题及时补充信息；
4. 启动本地开发服务，并打开终端给出的预览地址。

在侧边栏选择一个偏好的模型（如 gemini、gpt、glm、kimi、minimax 等），输入第一步得到的 prompt，点击生成。AI 会根据 prompt 规划项目结构、必要文件并给出每个文件的初始内容。

⚠️ 特别注意：AI 可能停下来等待你的确认。生成过程中 AI Agent 经常暂停等待你的输入或确认：询问是否继续下一步、要求按 Enter 确认某个操作、或就某个技术细节征询你的选择。如果看到 AI 不动了，先检查对话界面是否在等你回复——很多初学者以为 AI 在思考，其实它早已停下等待。主动回复或按 Enter，AI 就会继续工作。

本课程生成第一版时用npm create vite@latest创建了 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：优先查看终端、浏览器控制台和页面提示。复制错误本身及其前后几行，并补充复现步骤。
• Q：AI 改完还是报同样的错怎么办？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 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe