【AI 辅助编程实战心得：从零构建电商图文生成工具原型2.0】

AI 辅助编程实战心得：从零构建电商图文生成工具原型2.0

项目背景：基于 Easy-Vibe 教程理念，利用 AI IDE 快速搭建一个面向电商运营的“图文内容生成工具”原型。
参考资料：动手做出原型 - 从业务分析到多页面产品原型实现

var code = "45c46fd1-3006-44cd-a0ff-0e3f785f7578"

一、缘起：从“模糊需求”到“业务落地”

在开始写代码之前，我花了不少时间思考教程中提到的“从发散到收敛”的业务分析方法。在实际工作中，我们接到的需求往往是非常模糊的，比如老板可能会说：“帮我搞一个能提高电商上新效率的工具”。

如果直接把这句话丢给 AI，它大概率会生成一个功能大而全、但哪个功能都很难真正落地的“玩具”项目。通过这次实战，我深刻体会到，AI 编程的前提是开发者必须具备清晰的业务逻辑。我们必须先像产品经理一样思考，定义好边界，AI 才能像高级工程师一样高效执行。

我们将“提高效率”这个模糊的概念，拆解为了具体的业务场景：

痛点定位：电商运营每天需要处理大量商品，最耗时且重复的环节是找图、拼图和写基础文案。
核心解法：用“批量导入 + 自动化生成”的流程来替代人工流水线操作。
功能收敛：
- 核心功能 (P0)：输入商品信息后，系统能模拟生成主图和文案，并允许用户编辑。
- 复用功能 (P1)：将满意的生成结果沉淀为“模板”，供后续同类商品复用。

这种先定义 P0/P1 优先级的做法，有效地防止了项目在开发初期就因为功能蔓延而陷入泥潭。

二、策略：MVP (最小可行性产品) 的构建艺术

在技术实现上，这次实战最大的收获是学会了如何克制。我们没有一开始就追求完美的技术架构，而是严格遵循 MVP 原则。

1. Mock First：验证优先于实现

教程中反复强调不要在一开始就陷入后端 API 的调试中。在本项目中，我没有立即接入真实的 OpenAI 或 Midjourney API，而是编写了一个简单的 Mock 函数，利用 setTimeout 模拟了 2 秒的生成延迟。

这样做的好处显而易见：

极速验证：我们在几分钟内就跑通了“点击生成 -> 等待 Loading -> 展示结果”的完整交互流程。
聚焦体验：因为没有 API 密钥、网络代理或后端报错的干扰，我可以将全部精力集中在前端交互和状态管理的流畅度上。
成本可控：在原型验证阶段，无需承担昂贵的 Token 费用。

2. 站在巨人的肩膀上：技术栈选型

在 UI 库的选择上，我使用了 shadcn/ui 配合 Tailwind CSS。对于我们这种侧重逻辑验证的后台应用来说，这简直是神器。

shadcn/ui 提供的组件（如 Card, Button, Dialog, Form）设计精美且易于定制。我不需要手写繁琐的 CSS 样式，通过简单的组合就能搭建出专业级的 B 端界面。这非常符合 Vibe Coding 的核心理念：极速构建，不牺牲美感。

三、实战：与 AI 结对编程的“心流”体验

整个开发过程分为四个明确的步骤，这种 Step-by-Step 的交互方式极大地提高了代码的可用性：

骨架搭建：先确定布局（Layout）和路由（Router），确立了“左侧导航 + 右侧内容”的标准后台结构。这一步为后续的功能填充打好了地基。
数据先行：定义 TypeScript 接口是关键一步。明确了 ProductInput（输入）、GeneratedDraft（输出）和 Template（模板）的数据结构后，AI 生成的代码就有了明确的“契约”，逻辑很少跑偏。
核心攻坚：集中精力解决“输入区”和“结果区”的交互。利用 Zustand 进行全局状态管理，使得“生成”和“保存模板”的数据流转非常顺畅，避免了 React 中常见的 Prop Drilling 问题。
闭环完善：最后实现的“模板库”功能，将单一的生成动作变成了可循环的资产沉淀，这才是产品真正产生业务价值的地方。

在这个过程中，AI 不仅仅是一个代码生成器，更像是一个不知疲倦的结对编程伙伴。它帮我处理了繁琐的样板代码和组件通信，让我能腾出精力去思考业务流程是否合理，交互是否顺手。

四、核心架构与代码实现

为了让大家更直观地理解 MVP 的构建方式，这里展示项目的核心结构和关键代码。

1. 项目目录结构

清晰的目录结构有助于逻辑分层：

src/
├── components/
│   ├── layout/        # 全局布局
│   └── workbench/     # 工作台核心组件
│       ├── ProductInputForm.tsx  # 输入表单
│       └── DraftCard.tsx         # 结果卡片
├── lib/
│   └── mockAI.ts      # AI 模拟逻辑
├── pages/             # 页面路由
├── store/
│   └── useProductStore.ts # Zustand 全局状态
└── types/
    └── index.ts       # TypeScript 类型定义

2. 关键类型定义 (Types)

我们在 src/types/index.ts 中定义了核心数据结构，这是 AI 编程的“契约”：

export interface ProductInput {
  id: string;
  name: string;
  brand: string;
  specs: {
    material: string;
    targetUser: string;
    // ... 其他规格
  };
  // ...
}

export interface GeneratedDraft {
  id: string;
  mainImage: string; // 模拟生成的图片 URL
  title: string;
  sellingPoints: string[];
}

3. 全局状态管理 (Zustand)

使用 Zustand 在 src/store/useProductStore.ts 中管理生成状态，避免了复杂的 Context 嵌套：

import { create } from 'zustand';

export const useProductStore = create<ProductState>((set) => ({
  drafts: [],
  isGenerating: false,

  // 模拟生成动作
  addDraft: (draft) => set((state) => ({ drafts: [...state.drafts, draft] })),
  
  // 模板保存逻辑
  saveTemplate: (draftOrTemplate) => set((state) => {
     // ... 包含将草稿转换为模板的逻辑
     // 如果是草稿，则提取结构并保存为新模板
     return { 
        templates: [...state.templates, newTemplate],
        drafts: updatedDrafts
      };
  }),
}));

4. Mock AI 服务

在 src/lib/mockAI.ts 中，我们用最简单的代码模拟了 AI 的异步生成过程：

// 模拟 2秒 延迟的生成过程
export const generateDrafts = async (product: ProductInput): Promise<GeneratedDraft[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 模拟生成结果
      const drafts = [{
        title: `【${product.brand}】${product.name} ${product.specs.material}精选`,
        // 使用 placeholder 服务模拟合成图
        mainImage: `https://placehold.co/600x600?text=${encodeURIComponent(product.name)}`,
        sellingPoints: [`✨ ${product.specs.material}材质，亲肤透气`, `🔥 爆款推荐`],
        isSavedAsTemplate: false,
      }];
      resolve(drafts);
    }, 2000); 
  });
};

问题解决：
图像生成刚开始有问题，进行修复,后面解决

五、Vibe Coding 的力量

通过这次实战，我对 Vibe Coding 有了更深的理解。

在 AI IDE 的加持下，全栈开发的门槛确实被大幅降低了。作为开发者，我们不再受限于“不会写复杂的 CSS 动画”或“不懂如何设计后端数据库”。只要我们具备敏锐的业务洞察 (Business Insight) 和清晰的逻辑拆解能力，就能迅速将脑海中的想法转化为可交互的 Web 原型。

代码只是实现思想的工具，而 AI 让这个工具变得前所未有的顺手。这次构建原型的经历，让我对未来独立开发更多复杂应用有了更多的思考。

posted @ 2026-01-22 16:21 dearbi 阅读(0) 评论(0) 收藏举报来源

刷新页面返回顶部

dearbi

【AI 辅助编程实战心得：从零构建电商图文生成工具原型2.0】