初级三：动手做出原型
目录
[1. 前端技术栈](#1. 前端技术栈)
[2. 核心技术原理](#2. 核心技术原理)
[A. Canvas图像生成技术](#A. Canvas图像生成技术)
[C. 本地存储技术](#C. 本地存储技术)
[3. 与传统电商工具的区别](#3. 与传统电商工具的区别)
[4. 核心创新点](#4. 核心创新点)
[5. 技术架构图](#5. 技术架构图)
[6. 总结](#6. 总结)
[1 从想象到真实：学会向业务提问](#1 从想象到真实：学会向业务提问)
[2 从发散到收敛：锁定业务的核心痛点和功能](#2 从发散到收敛：锁定业务的核心痛点和功能)
作业：复刻属于你自己的抖音电商工作台
prompt:
1 从口述开始（推荐新手）
我想做一个工具，帮电商运营自动生成商品的主图和文案。
运营平时要一个个手动做图写文案，很麻烦。
我的想法是：他们上传商品信息，系统自动生成一批草稿，
运营挑选好用的稍微改改就能用。先做最简单的版本：一个页面，左边填商品信息，
右边显示生成的结果。能上传图片，能填文字，
生成后显示主图预览和文案。帮我把上面的想法扩写一下，整理成一份清晰的业务逻辑文档，
然后生成一个适合发给 AI IDE（比如 Cursor、Trae）的提示词，
用来生成单页面应用的原型代码。
2 跳过扩写环节：直接把你整理好的业务文档丢给 AI
帮我参考业务逻辑实现一个单页面应用，用来验证核心玩法功能。
业务逻辑参考如下：
- 帮运营批量生成第一版图文草稿：
**输入（支持直接上传和批量导入素材）：**
商品基础信息：名称、类目、品牌、材质、尺寸、颜色、适用人群等；
商品图片：白底图 / 简单场景图；
每次生成支持上传额外上传历史爆款截图或参考链接，允许有参考物；
支持通过 Excel 批量导入，或在页面上在线录入 / 上传。
支持页面上指定是否保存商品素材到素材库，方便下次使用
**输出（能直接拿去上架或轻改就能上架的内容）：**
每个商品一张"看得过去、包含基础卖点"的主图草稿；
一条"结构合理、含核心关键词"的标题 + 1--2 句卖点文案。
**期望的使用方式变化：**
从每批商品白手起稿变为把一批商品丢进系统，拿系统生成的草稿做筛选和微调。
先做第一个功能，第二个功能（模板库）后面再加。
3 程序员的做法（进阶）：让 AI 帮你写 "提示词的提示词"
基于下面的想法，帮我写一个发给 coding Agent 的写代码用的提示词，
我需要用这个提示词来生成代码。
把你的业务逻辑描述贴在这里
要求：
提示词要包含清晰的页面布局描述
明确数据结构和交互逻辑
指定技术栈（如 React + Tailwind）
列出需要实现的核心功能点
先做单个商品版本，素材库功能本地存储
看到的是 Vite 的默认欢迎页面 ，这不是我要做的电商工具，只是项目初始化后的模板页面。
您现在看到的是什么？
这是一个标准的 Vite + React 项目模板 ，包含：
-
两个Logo ：Vite 和 React 的标志
-
一个计数器按钮 ：点击数字会增加
-
提示文字 ：告诉您可以编辑 src/App.tsx 来测试热更新
这个页面是干嘛用的？
这个页面只是 项目初始化的示例 ，用来验证：
-
✅ Vite 项目是否创建成功
-
✅ React 是否能正常运行
-
✅ 热更新（HMR）是否工作
接下来我要做什么？
我需要把这个默认页面 替换成电商商品主图和文案生成工具 ，包括：
-
左侧：商品信息输入表单
-
右侧：生成结果预览
-
素材库功能
-
主图和文案生成逻辑
ai_prompt.md 文件就是我根据业务逻辑创建的 详细开发指南 ，用来指导开发实际的电商工具。
ai_prompt.md 包含的内容：
- 技术栈要求
-
React + TypeScript
-
Tailwind CSS
-
Vite 构建工具
-
localStorage 本地存储
- 核心功能详细说明
-
左侧商品信息输入表单
-
素材库功能
-
右侧生成结果展示
-
生成逻辑模拟
- 数据结构定义
-
ProductInfo 接口
-
MaterialItem 接口
-
GenerationResult 接口
- 项目结构
-
组件目录组织
-
Hooks、Utils、Types 的划分
- 功能实现要点
- 11个具体的功能实现细节
这个文件的作用：
-
给AI IDE（如Cursor、Trae）的提示词 - 让AI根据这些要求生成代码
-
给开发者的开发指南 - 明确要做什么、怎么做
-
项目验收标准 - 完成后对照检查是否满足所有要求
电商商品主图与文案自动生成工具 - 前端原型开发提示词
项目概述
创建一个单页面应用，帮助电商运营人员自动生成商品的主图和文案。用户可以在左侧填写商品信息，右侧实时预览生成的结果。支持素材库本地存储功能。
技术要求
**前端框架**：React + TypeScript
**样式方案**：Tailwind CSS
**状态管理**：React Context 或简单的 useState
**图片处理**：HTML5 Canvas（用于模拟主图生成）
**本地存储**：localStorage（用于素材库）
**构建工具**：Vite
**UI组件**：使用 shadcn/ui 或类似的组件库
核心功能
1. 左侧商品信息输入区域
商品基础信息：
商品名称（文本输入，必填）
商品类目（下拉选择，必填，选项：服装、电子产品、家居用品、食品、美妆、其他）
品牌（文本输入，选填）
材质（文本输入，选填）
尺寸（文本输入，选填）
颜色（文本输入，选填）
商品价格（数字输入，必填）
商品描述（多行文本，必填）
商品卖点（动态添加/删除，最多5个）
上传商品图片：
白底图/简单场景图（支持拖拽上传，预览，至少1张）
参考素材（选填）：
历史爆款截图上传（支持拖拽上传，预览）
参考链接（文本输入，选填）
风格偏好（下拉选择：简约、时尚、科技感、温馨、商务）
适用人群（多选：学生、职场人士、宝妈、老年人、年轻人）
素材库选项：
是否保存商品素材到本地素材库（开关，默认关闭）
生成按钮（点击后触发生成逻辑）
2. 素材库功能
素材库面板（可展开/收起）
显示历史保存的商品素材列表
每个素材显示缩略图和商品名称
点击素材可快速填充到表单
支持删除素材库中的内容
数据保存到localStorage
3. 右侧生成结果展示区域
生成状态指示（加载中、生成完成、错误提示）
主图预览区（一张看得过去、包含基础卖点的主图草稿）
文案预览区：
一条结构合理、含核心关键词的标题
1-2句卖点文案
复制文案按钮（点击复制所有文案）
下载主图按钮（点击下载当前主图）
4. 生成逻辑模拟
由于是原型，我们将使用模拟数据：
主图生成：使用Canvas在上传的图片上添加文字和简单效果
文案生成：根据输入的商品信息，使用预设模板填充
生成过程：显示加载动画，模拟2秒生成时间
界面设计要求
**布局**：左右分栏，响应式设计（桌面端左右并排，平板端上下堆叠）
**配色**：专业、简洁的电商风格，主色调建议使用蓝色系
**字体**：无衬线字体，清晰易读
**交互**：
表单验证（必填项提示）
图片上传预览
生成过程中的加载动画
复制成功提示
下载功能
素材库展开/收起动画
素材填充表单动画
数据结构
```typescript
// 商品信息
interface ProductInfo {
name: string;
category: string;
brand?: string;
material?: string;
size?: string;
color?: string;
price: number;
description: string;
sellingPoints: string[];
productImages: File[];
referenceImages?: File[];
referenceLink?: string;
style: string;
targetAudience: string[];
saveToLibrary: boolean;
}
// 素材库素材
interface MaterialItem {
id: string;
name: string;
category: string;
thumbnail?: string; // Base64缩略图
savedAt: number;
data: Omit<ProductInfo>;
}
// 生成结果
interface GenerationResult {
mainImage: string; // Base64编码的图片
copywriting: {
title: string;
sellingPoints: string[]; // 1-2句卖点
};
}
```
项目结构
```
/src
/components
/Form
ProductForm.tsx // 商品信息输入表单
SellingPointInput.tsx // 商品卖点输入组件
ImageUpload.tsx // 图片上传组件
MaterialLibrary.tsx // 素材库组件
/Preview
ResultPreview.tsx // 结果预览组件
ImagePreview.tsx // 主图预览组件
CopywritingPreview.tsx // 文案预览组件
/hooks
useImageGeneration.ts // 图片生成逻辑
useCopywritingGeneration.ts // 文案生成逻辑
useMaterialLibrary.ts // 素材库逻辑
/utils
canvasUtils.ts // Canvas工具函数
copywritingTemplates.ts // 文案模板
storageUtils.ts // 本地存储工具
/types
index.ts // 类型定义
App.tsx // 主应用组件
main.tsx // 入口文件
index.css // 全局样式
```
功能实现要点
表单验证确保所有必填项都已填写
图片上传支持拖拽和点击上传，显示预览
卖点输入支持动态添加和删除
生成按钮点击后禁用，显示加载状态
模拟生成过程，使用Canvas创建简单的主图效果（添加商品名称和价格文字）
根据商品信息生成不同风格的文案（1条标题+1-2句卖点）
文案支持一键复制
主图支持下载
素材库保存到localStorage，支持查看、复用和删除
点击素材可快速填充到表单
响应式设计适配不同屏幕尺寸
启动命令
开发：`npm run dev`
构建：`npm run build`
预览：`npm run preview`
请生成完整的项目代码，包括所有必要的文件和依赖配置，确保项目可以正常启动和运行。
把整个页面的上下结构改成了左右结构:
画面很丑，帮我优化现代页面:
在Trae.cn中这个提示词用国内的豆包模型跑不通，换到国际版，用stepfun跑通了。
现在你的网页已经完全现代化了，包含了：
-
✨ 现代化的Indigo/Purple配色方案
-
📱 响应式侧边栏导航
-
🎯 拖拽上传图片功能
-
🔄 流畅的微交互动画
-
💅 专业的视觉设计
尽情享受你的新界面吧！
帮我参考这个网站的设计风格和排布，帮我重新设计网页。
输出：
颜色改了，但没有改成老师的风格。最后用老师的图做参考图。
帮我参考这个网站的设计风格和排布，帮我重新设计网页。
又试着用老师的样板图生成相同的风格，
也没有生成这种三格的格式。也不成功。
看来模型不行，怎么拿参考图垫图都不行。先继续执行：
帮我补齐这个页面的功能，比如
-首页:概览当前项目与整体进度;-商品任务列表页:完成刚才实现的核心功能;-模板库页:查看与管理收藏的图文模板;-设置页:配置基础参数(如默认生成规则、图文风格偏好
等)
保证每个页面都可以用，帮我仔细检查下
测试数据：
我现在需要测试这个用户使用过程，确保他能完全走通，请你结合下列需求生成测试数据入口，让我能够点击后很快测试全流程是否正常：
- 帮运营批量生成第一版图文草稿：
**输入（支持直接上传和批量导入素材）：**
商品基础信息：名称、类目、品牌、材质、尺寸、颜色、适用人群等；
商品图片：白底图 / 简单场景图；
每次生成支持上传额外上传历史爆款截图或参考链接，允许有参考物；
支持通过 Excel 批量导入，或在页面上在线录入 / 上传。
支持页面上指定是否保存商品素材到素材库，方便下次使用
**输出（能直接拿去上架或轻改就能上架的内容）：**
每个商品一张"看得过去、包含基础卖点"的主图草稿；
一条"结构合理、含核心关键词"的标题 + 1--2 句卖点文案。
**期望的使用方式变化：**
从每批商品白手起稿变为把一批商品丢进系统，拿系统生成的草稿做筛选和微调。
我发现问题了。测试数据生成时，SVG到PNG的转换是异步的，而占位符图片是同步创建的，这可能导致占位符覆盖了实际的鞋子图片。我需要修改测试数据生成逻辑，确保正确生成和使用鞋子图片。
最后是让Trae自己去网络上找图片，并且确认了每个图片,核实以后重新修改代码。
一个数据太少，生成多个可测试用例:
发现kimi模型用起来也不错，kimi-k2.5。
提示词：
请你帮我确保需求 运动鞋 正常，可以点击一个结果收藏对应的模板，点开后能看到生成参数。
在模板库里，点击照片以后，会显示这个商品的各种详细信息，并且可有使用该模板这个键。
点击"使用此模板"以后，就会回到商品任务这一栏，并且默认填入了上面的模板块中的信息。
总结一下作业：
软件主要技术架构
1. 前端技术栈
核心技术：
- React 18 - 用于构建用户界面的JavaScript库
- TypeScript - 提供类型安全的JavaScript超集
- Tailwind CSS - 实用优先的CSS框架，用于快速构建现代界面
- Vite - 现代化的前端构建工具，提供快速的开发体验
- React Router - 用于单页面应用的路由管理
主要功能模块：
- 组件化架构（Form、Preview、Layout等）
- 状态管理（React Hooks: useState, useEffect）
- 自定义Hooks（useProductData, useImageGeneration）
2. 核心技术原理
这不是一个庞大的数据库系统，而是一个前端应用，核心技术包括：
A. Canvas图像生成技术
// 使用HTML5 Canvas API动态生成商品主图
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 绘制图片、字、价格标签、装饰元素等
特点：
- 在浏览器端实时生成图片
- 无需后端服务器处理图像
- 支持动态添加价格、品牌、卖点等信息
B. 模板化文案生成
// 基于商品信息自动生成文案
const generateCopywriting = (productData) => {
// 根据类目、品牌、卖点等生成标题和描述
特点：
- 使用预定义的文案模板
- 根据商品属性智能组合关键词
- 自动生成结构化的商品标题和卖点
C. 本地存储技术
使用localStorage保存数据
localStorage.setItem('savedTemplates', JSON.stringify(templates))
特点：
- 数据保存在用户浏览器中
- 无需后端数据库
- 支持模板收藏、参数保存等功能
3. 与传统电商工具的区别
| 传统工具 | 本软件 |
|---|---|
| 需要后端服务器处理图片 | 浏览器端Canvas实时生成 |
| 依赖庞大的图片数据库 | 基于算法动态生成 |
| 需要数据库存储模板 | 本地存储即可 |
| 复杂的后端架构 | 纯前端应用 |
4. 核心创新点
A. 动态图像合成
- 不是从数据库调取现成图片
- 而是将用户上传的商品图与装饰元素（价格标签、品牌标识等）实时合成
B. 智能文案生成
- 基于商品属性（类目、材质、卖点等）
- 使用规则引擎生成符合电商平台的文案结构
C. 模板复用机制
- 保存成功的生成参数
- 快速复用并调整生成新内容
5. 技术架构图
用户界面 (React + Tailwind)
↓
状态管理 (React Hooks)
↓
业务逻辑层
├── Canvas图像生成模块
├── 文案生成模块
└── 模板管理模块
↓
数据存储 (localStorage)
↓
浏览器本地
6. 总结
这不是一个数据库系统，而是一个：
- 前端图像处理应用 - 使用Canvas技术实时生成图片
- 智能文案生成器 - 基于规则引擎自动生成文案
- 模板管理工具 - 保存和复用生成参数
- 纯客户端应用 - 所有功能在浏览器中完成，无需后端服务器
核心价值：
- 降低电商运营成本（无需设计师制作主图）
- 提高内容生成效率（批量生成文案和图片）
- 支持快速迭代（保存模板，一键复用调整）
这个软件的技术亮点在于前端图像处理 和智能内容生成，而不是传统的数据库应用。
笔记：
1 从想象到真实：学会向业务提问
2 从发散到收敛：锁定业务的核心痛点和功能
从"新闻助手"到"投研情报官"
普通想法是聚合各大平台新闻，省得一个个打开。但今日头条、腾讯新闻等已经做得很好了。
小明横向切分后发现，金融分析师这个人群有特殊需求：他们需要追踪特定行业动态，但信息太分散。纵向深挖他们的场景：早上看 overnight 美股动态、汇率变化；上午追踪持仓公司的公告、行业新闻；下午研究潜在投资标的，需要大量行业信息。
重构后的产品叫"投研情报官"，定位是金融从业者的"信息雷达和决策助手"。