我用 Vibe Coding 做了一个电商 SaaS：电商达人的开发与上线过程
从一个电商运营工具想法，到包含标题、SKU、ROI、申诉、产品管理和内容系统的完整网站，记录电商达人如何通过 Vibe Coding 持续开发和上线。
电商达人最开始只是一个很具体的想法：把电商运营中重复、耗时、容易出错的工作做成可以直接使用的在线工具。随着一次次迭代，它逐渐从标题和 SKU 生成扩展到 ROI 测算、申诉文案、产品管理、反馈和电商知识文章，最终成为一个真正部署上线的 Web 产品。
这个项目的大部分开发采用了 Vibe Coding 的协作方式：由人定义问题、拆解需求和判断结果，再让 AI 参与代码实现、排查问题与持续调整。它不是输入一句话后自动出现的网站，而是许多轮沟通、验证和修改共同形成的结果。
Vibe Coding 不等于一句话生成完整产品
- AI 可以加快代码实现和信息整理，但产品方向、业务规则、数据口径与最终验收仍需要人来判断。
- 能够运行不代表已经可用，注册、异常状态、移动端、SEO、部署和后续维护都需要单独处理。
- 项目中的电商文案和计算结果都需要结合真实商品信息、成本数据与平台当前规则复核。
- 本文记录的是电商达人的实际开发方法与迭代过程，不代表所有项目都适合同样的技术选择。
一、为什么要做电商达人
项目不是从技术栈开始，而是从电商运营中的重复问题开始。
商品资料需要反复整理
同一件商品在上架时需要整理名称、属性、规格、卖点和使用场景。信息分散时，标题、SKU、主图和详情页很容易出现不一致。
利润判断经常缺少完整成本
很多运营只看成交额或广告投产比，却没有同时纳入采购、物流、平台费用、退款损耗和推广成本，导致卖得越多不一定赚得越多。
文案工作重复但又不能完全套模板
标题、SKU 和申诉都存在结构化规律，但每个商品和事件的事实不同。合适的工具应该帮助整理初稿，同时保留人工复核环节。
二、从第一个功能到完整网站
电商达人没有一次做完，而是按照真实需求逐步增加能力。
1、完成第一版标题、SKU 与成本工具
2025 年 6 月：标题生成 + SKU 生成 + 成本核算
第一版先解决最明确、使用频率较高的问题，让商品信息整理和基础利润判断能够在线完成。
2、补齐账号、反馈和版本记录
2025 年 8 月：邮箱验证 + 反馈历史 + 版本日志
从单页工具走向长期使用的网站，需要处理注册安全、用户反馈、问题回复和版本变化，而不仅是继续添加生成按钮。
3、增加 ROI 与申诉场景
2026 年 3 月：ROI 计算器 + 维权申诉生成
项目开始覆盖投放前测算和售后争议处理，同时继续优化标题、SKU 的生成逻辑与交互体验。
4、重构首页、文章与 SEO
2026 年 7 月起：品牌页面 + 内容系统 + 搜索优化
为了让用户更容易理解产品，也让电商知识能够长期被搜索，项目进一步整理了首页、文章详情、封面、结构化数据、预渲染和 sitemap。
三、现在的电商达人可以做什么
功能围绕商品建立、上架表达、利润决策和售后处理形成一条运营链路。
商品标题生成
根据核心商品词、真实属性、卖点、目标平台和使用场景生成多版标题初稿，再由运营人员结合平台要求与数据筛选。
SKU 名称生成
把颜色、尺寸、容量、数量和套餐内容整理成结构一致、便于消费者选择，也方便客服与仓库识别的 SKU 名称。
ROI 与利润测算
把采购价、售价、快递、平台费用、退款损耗和推广费放进同一套模型，计算单笔利润、利润率和保本投产线。
申诉文案整理
根据事件经过、订单信息、申诉类型和证据材料生成结构化初稿，帮助商家更清晰地说明事实、处理措施与请求。
产品与成本管理
使用 SPU 和 SKU 层级集中记录不同商品规格、售价和成本，为后续标题、SKU 与 ROI 测算提供一致的数据基础。
电商运营知识库
持续整理标题优化、SKU 设计、利润公式、AI 工作流和平台运营文章，并通过 SEO、FAQ 和内部链接建立长期内容入口。
四、项目背后的技术架构
技术选择以现有能力、开发效率和后续维护为基础，不追求为了复杂而复杂。
Nuxt 3、Vue 3 与 TypeScript
前端使用 Nuxt 的 SSR 与预渲染能力处理页面和 SEO，通过 Vue Composition API 组织交互逻辑，并使用 TypeScript 约束文章、接口和事件数据。
UnoCSS 响应式界面
页面布局、间距、颜色和移动端适配主要通过 UnoCSS 完成，让首页、工具和文章能够复用统一的视觉规则。
NestJS、Prisma 与 MySQL
后端负责用户、商品、任务、积分、反馈和埋点等业务，通过 Prisma 管理数据模型与数据库访问。
Redis、邮件与部署配置
项目还包含缓存、验证码邮件、容器化、反向代理、数据库备份和生产环境配置，使网站能够从本地功能继续走向真实运行。
五、Vibe Coding 在这个项目里如何运作
有效的 AI 协作依赖明确上下文、可验证任务和持续反馈。
1、先说明业务问题和预期结果
相比只说“做一个页面”，更有效的方式是说明目标用户、当前问题、已有逻辑、不能改变的部分以及验收标准。
2、让 AI 先阅读现有项目
新增功能前先查找已有组件、数据结构、路由和接口，避免重复实现或意外破坏登录、积分、埋点等既有逻辑。
3、把大需求拆成可以检查的小修改
先完成数据结构，再调整页面，再补 SEO 和预渲染。每一步都能独立检查，出现问题时更容易定位原因。
4、通过截图和实际体验持续反馈
间距过大、编号逻辑不合理、移动端拥挤等问题，往往需要看到真实页面后继续调整。Vibe Coding 更像连续协作，而不是一次性交付。
5、保留规则和验证结果
把技术约定、文章发布流程和版式选择写进项目规范，并在改动后执行局部类型、模板或格式检查，让下一次协作能够延续之前的判断。
六、做完这个项目后，对 Vibe Coding 的理解
AI 提高了实现速度，但真正决定产品质量的仍然是问题定义和判断能力。
会描述问题比只会描述功能更重要
指出用户为什么困惑、数据为什么不可信、页面哪里影响阅读，通常比简单要求“再优化一下”更容易得到可用结果。
能运行只是起点
真实产品还要考虑异常状态、数据安全、移动端、SEO、部署、监控与维护。Demo 与长期可用的 SaaS 之间有大量细节工作。
业务知识决定 AI 输出上限
如果没有统一 ROI 口径、不理解 SKU 差异，也无法判断申诉证据是否有效，那么生成速度再快也可能只是更快地产生错误。
人的工作从写代码转向做判断
在这个项目里，越来越多时间用于决定做什么、哪些内容不该做、结果是否可信，以及如何让用户真正看懂和愿意使用。
七、接下来还会继续做什么
电商达人仍在持续迭代，后续重点是让现有工具更可靠、更连贯。
继续优化国内平台场景
围绕拼多多、淘宝等国内电商的标题、SKU、利润和申诉问题补充更细的输入提示、示例与内容。
加强产品数据之间的复用
减少同一商品在不同工具中的重复录入，让产品、SKU、标题和成本测算能够共享更一致的数据。
用反馈决定功能优先级
与其一次加入大量功能，更希望从真实使用和反馈中判断哪些环节最耗时、最容易出错，再继续开发。
持续公开开发和运营过程
除了电商知识，也会记录产品迭代、Vibe Coding 协作方式和上线后的实际问题，让这个项目的成长过程本身成为可复用的经验。
常见问题
Vibe Coding 是不是完全不需要懂代码？
不一定。AI 可以降低实现门槛，但理解数据、接口、错误信息和基本工程约束，会显著提高沟通、排查和验收效率。
这个项目是 AI 一次生成的吗？
不是。电商达人经历了多次功能迭代、页面调整、规则整理和局部验证，许多细节需要结合实际页面与业务逻辑反复修改。
电商达人目前主要服务哪些用户？
目前主要面向需要整理商品标题、SKU、利润和申诉材料的国内及跨境电商运营人员，现阶段内容会更加关注拼多多、淘宝等国内平台场景。
AI 生成的标题或申诉可以直接使用吗？
建议先核对商品事实、成本数据、证据材料和平台当前规则。工具用于提高整理效率，不能替代商家对最终内容和经营决策的审核。
相关工具
把文章中的方法直接应用到日常运营