系列文章目录
文章目录
- 系列文章目录
- 前言
- 一、复刻属于你自己的抖音电商工作台
-
- [1.1 需求确定](#1.1 需求确定)
- [1.2 与 AI 对话形成需求设计书](#1.2 与 AI 对话形成需求设计书)
- 总结
前言
一、复刻属于你自己的抖音电商工作台
-
参考本节课的提示词和内容，完成一次完整闭环：
完整闭环实践
业务梳理提示词生成 → 单页原型生成 → 多页原型生成成果分享
截图你的程序分享给大家看思考题
为下一节"接入大语言模型（LLM）和文生图能力"预留空间，提前思考：你的工作台里，可以怎样嵌入"AI 写文案 / 生成配图 / 生成脚本"等能力？
1.1 需求确定
- 从"玩具项目"到"真实产品"开发中最关键的认知跃迁------写代码前必须完成需求的具体化。
需求具体化四步法
| 步骤 | 关键动作 | 避坑指南 | 产出物 |
|---|---|---|---|
| 1. 拆解模糊命题 | 将"提高效率"转化为可验证的问题： • 效率瓶颈在哪个环节？ • 当前耗时/成本数据是多少？ | ❌ 避免直接脑补解决方案（如"加个AI按钮"） ✅ 用"5 Why分析法"追问根源 | 问题清单 + 业务流程图 |
| 2. 一线验证 | 采访真实业务用户： • 观察他们实际操作+讲解 • 记录高频抱怨的原话 | ❌ 不要问"你需要什么功能"（用户会说"全都要"） ✅ 问"昨天你花最长时间做的事是什么？" | 业务痛点清单 + 典型场景故事 |
| 3. 痛点收敛 | 用 ICE 评分模型 优先级排序： • Impact（影响范围） • Confidence（解决确定性） • Ease（实现难度） | ❌ 拒绝"功能堆砌" ✅ 聚焦"单点极致"：先解决一个80%用户每天遇到的问题 | 核心痛点 + MVP 功能范围 |
| 4. 方案具象化 | 将功能转化为用户可感知的价值： • 不说"支持自定义复刻模板" • 说"3秒复用上周爆款商品的标题+主图风格" | ❌ 避免技术语言描述需求（如"用LangChain做Agent"） ✅ 用用户语言描述结果（如"导入Excel，10分钟生成50个商品素材草稿"） | 用户故事地图 + 功能验收标准 |
1.2 与 AI 对话形成需求设计书
-
将需求作为提示词交给AI，下面是AI给出的需求设计书
抖音电商工作台单页面应用需求设计
1. 产品概述
抖音电商工作台是一款专为电商运营人员打造的单页面应用，核心聚焦「爆款模板复用 + 批量生成」工作流，通过模板化设计和批量处理能力，大幅提升商品上架和内容创作效率。
2. 核心功能需求
功能1：模板管理与预览
- 功能描述：提供模板的创建、存储、预览和选择功能
- 具体需求：
- 支持基于爆款商品快速创建模板
- 模板库支持分类管理和关键词搜索
- 实时预览模板效果，显示占位符位置
- 模板编辑功能，可调整字体、配色、文案结构
- 技术要点：
- 模板数据结构设计（包含样式配置和占位符定义）
- 可视化模板编辑器
- 模板预览渲染引擎
功能2：批量商品信息管理与变量替换
- 功能描述：支持批量导入商品信息并与模板占位符自动匹配
- 具体需求：
- 支持Excel/CSV格式批量导入商品数据
- 提供商品信息编辑表格，支持批量修改
- 自动识别并匹配商品字段与模板占位符
- 支持10-50个商品的一次性处理
- 技术要点：
- 表格数据处理与编辑功能
- 占位符匹配算法
- 批量数据验证与错误提示
功能3：批量生成与实时微调
- 功能描述：根据模板和商品信息批量生成内容，并支持快速调整
- 具体需求：
- 一键批量生成所有商品的图文内容
- 网格布局预览所有生成结果
- 支持对单个生成结果进行快速微调
- 提供常用调整工具（文字修改、颜色调整、布局微调）
- 支持批量导出为图片和文案
- 技术要点：
- 批量渲染引擎
- 实时编辑与预览
- 导出功能（图片、文本）
3. 业务规则
- 模板 = 风格容器：模板存储"风格配方"（字体、配色、文案结构），非固定内容
- 变量替换机制：商品信息通过占位符（如{商品名}、{价格}）动态替换
- 批量处理能力：支持10-50个商品一次性生成
- 微调优先原则：生成结果允许快速修改，不追求100%完美
4. 用户流程
- 选择模板：从模板库选择或创建新模板
- 导入商品：批量导入或手动填写商品信息
- 匹配字段：确认商品字段与模板占位符的匹配关系
- 批量生成：一键生成所有商品的图文内容
- 预览微调：查看生成结果并进行必要的调整
- 导出使用：导出所有生成的内容
5. 界面设计建议
- 单页面布局：左侧模板库，中央工作区，右侧属性面板
- 响应式设计：适配桌面端主流屏幕尺寸
- 操作流程可视化：通过步骤指示器清晰展示当前操作阶段
- 批量操作突出：批量处理按钮醒目显示，减少操作层级
6. 技术栈建议
- 前端框架：React/Vue
- 状态管理：Redux/Vuex
- UI组件库：Ant Design/Element UI
- 文件处理：xlsx.js（Excel导入）
- 渲染引擎：Canvas/SVG（图文生成）
- 构建工具：Webpack/Vite
7. 项目范围
- 核心功能：模板管理、批量商品处理、批量生成与微调
- 数据存储：本地存储 + 可选云存储
- 导出格式：图片（PNG/JPG）、文本（TXT/CSV）
- 浏览器兼容：Chrome、Firefox、Edge最新版
8. 成功指标
- 操作效率：单批次50个商品的处理时间≤5分钟
- 用户体验：操作步骤≤6步，学习成本低
- 功能完整性：满足80%的日常运营场景需求
- 稳定性：批量处理成功率≥95%
此需求设计已高度聚焦核心功能，确保简洁可落地，可直接用于开发团队的技术实现。
-
再让 AI 根据上面的需求设计，生成一份技术开发需求设计书
提示词示例
基于上面的需求设计，帮我写一个发给 coding Agent 的写代码用的提示词，
我需要用这个提示词来生成代码。要求：
- 提示词要包含清晰的页面布局描述
- 明确数据结构和交互逻辑
- 指定技术栈（如 Vue + Tailwind）
- 列出需要实现的核心功能点
抖音电商工作台开发提示词
项目概述
开发一个抖音电商工作台单页面应用，核心实现「爆款模板复用 + 批量生成」工作流，帮助电商运营人员提升商品上架和内容创作效率。
技术栈
- 前端框架：Vue 3 + Vite
- 样式方案：Tailwind CSS v3
- 状态管理：Pinia
- UI组件：Element Plus
- 文件处理：xlsx.js（Excel导入）
- 构建工具：Vite
页面布局
整体结构
- 顶部导航栏：应用标题、操作按钮（导出、保存）
- 左侧边栏：模板库区域
- 模板分类列表
- 模板卡片网格
- 模板创建按钮
- 中央工作区：
- 顶部操作步骤指示器（选择模板 → 导入商品 → 生成内容 → 预览微调）
- 内容区域（根据当前步骤动态切换）
- 步骤1：模板选择与预览
- 步骤2：商品信息表格
- 步骤3：批量生成结果预览
- 右侧边栏：
- 当前步骤的属性设置面板
- 模板编辑控件
- 微调工具
响应式设计
- 桌面优先设计，支持1200px以上屏幕
- 侧边栏可折叠，适应不同屏幕尺寸
数据结构
模板数据结构
interface Template {
id: string;
name: string;
category: string;
style: {
fontFamily: string;
fontSize: number;
colors: {
primary: string;
secondary: string;
background: string;
};
layout: string; // 布局类型
};
placeholders: string[]; // 占位符列表，如["商品名", "价格", "卖点"]
previewImage: string; // 模板预览图
createdAt: string;
}商品数据结构
interface Product {
id: string;
name: string;
price: string;
卖点: string;
[key: string]: string; // 支持自定义字段
}生成结果数据结构
interface GeneratedContent {
id: string;
productId: string;
templateId: string;
content: {
image: string; // 生成的图片Data URL
text: string; // 生成的文案
};
status: 'pending' | 'generated' | 'edited';
edits: any[]; // 编辑历史
}核心功能实现
1. 模板管理与预览
- 模板库展示：网格布局展示模板卡片，包含预览图和名称
- 模板创建：点击创建按钮打开模板编辑器
- 模板编辑：调整字体、颜色、布局等样式属性
- 模板预览：实时预览模板效果，显示占位符位置
2. 批量商品信息管理与变量替换
- 商品导入：支持Excel/CSV文件导入，解析为商品数据
- 表格编辑：提供可编辑表格，支持批量修改商品信息
- 字段匹配：自动匹配商品字段与模板占位符，支持手动调整
- 数据验证：实时验证商品数据完整性，提示错误
3. 批量生成与实时微调
- 批量生成：点击生成按钮，根据模板和商品信息批量渲染内容
- 网格预览：以网格布局展示所有生成结果
- 实时微调：点击单个结果进入编辑模式，支持：
- 文本内容修改
- 颜色调整
- 布局微调
- 批量导出：支持导出所有生成的图片和文案，格式包括：
- 图片：PNG格式
- 文案：TXT/CSV格式
交互逻辑
-
模板选择流程：
- 用户从模板库选择模板 → 右侧面板显示模板详情 → 点击"下一步"进入商品管理
-
商品管理流程：
- 用户导入或填写商品信息 → 系统自动匹配字段 → 用户确认匹配关系 → 点击"下一步"进入生成
-
批量生成流程：
- 用户点击"批量生成" → 系统渲染所有商品内容 → 网格展示生成结果 → 用户可点击单个结果进行微调 → 点击"导出"下载所有内容
技术实现要点
- 模板渲染：使用Canvas API实现图文渲染
- 状态管理：使用Pinia管理全局状态，包括当前选中模板、商品列表、生成结果等
- 文件处理：使用xlsx.js解析Excel文件，使用FileSaver.js实现导出功能
- 响应式布局：使用Tailwind CSS的响应式类实现不同屏幕尺寸的适配
- 性能优化：
- 批量生成时使用Web Worker处理渲染任务
- 图片懒加载
- 虚拟列表处理大量商品数据
开发要求
- 代码结构清晰，组件化设计
- 注释完善，便于维护
- 实现基本的错误处理和用户提示
- 确保页面加载和操作流畅，特别是批量生成功能
- 提供mock数据，方便测试和演示
交付物
- 完整的Vue 3 + Tailwind CSS项目代码
- 包含所有核心功能的实现
- 提供README.md文件，说明项目结构和使用方法
- 确保项目可以直接运行和测试
-
交给
Trae和GLM5来生成项目代码