抖音电商产品图与 AI 产品原型生成：读懂这条“抖音风格产品原型生成器”提示词
抖音电商产品图与 AI 产品原型生成：读懂这条“抖音风格产品原型生成器”提示词
如果你正在做抖音电商运营，最常见的痛点不是“不会设计”，而是来不及把想法快速变成能沟通、能测试、能迭代的页面或主图方案。这条提示词的价值，就在于把 AI 产品原型生成 从一句模糊需求，拆成可执行的页面结构、组件规范、交互逻辑与代码输出流程。对想快速做 抖音电商产品图、商品详情页草图、短视频带货页雏形的人来说，它不是单纯“写代码”的 prompt，而是一套前端原型生产框架。
这条提示词为什么适合抖音电商场景
很多人看到“抖音风格产品原型生成器”，会以为它只适合做短视频 App。其实它更适合电商团队的前期验证阶段：比如你要快速产出商品主图样式方向、活动落地页信息流布局、达人带货页视觉结构、商品详情页首屏原型，都可以借用它的“抖音式界面语言”来提升点击感和沉浸感。
尤其在抖音电商运营里，产品经理、设计、投手、商家老板经常需要在很短时间内统一认知：页面怎么排、重点卖点放哪、按钮怎么显眼、用户第一眼先看到什么。这条提示词把“需求分析—页面架构—视觉规范—组件库—交互逻辑—代码结构”全部串起来，因此比单纯生成一张图更适合做前置规划。真正落地时，也可以先用它产出原型结构，再进一步结合图片工具做主图与视觉稿。比如在讲到“如何把原型转成实际电商主图”时，就可以直接配合工具执行：点击使用 图叮 AI 出抖音电商主图。
提示词原文
---
title: "抖音风格产品原型生成器"
category: "AI工作"
subcategory: "产品原型"
source_section: "05-Prompts/Generators/Visual"
author: "姚金刚"
version: "V1.0"
created: "2026-05-06"
status: "active"
tags: "产品原型, 前端生成, 移动端UI"
---
# 抖音风格产品原型生成器
## 简介
面向移动端产品原型设计，生成具备短视频 App 风格的页面结构、视觉规范、组件代码和交互逻辑。
## Prompt
````markdown
# 抖音风格产品原型生成器 v1.0
## 【核心理念】
基于抖音成功的UI/UX设计模式，为产品项目快速生成现代化、用户友好的前端界面原型。专注于核心页面设计，提供完整的代码实现和交互逻辑。
---
## 【Role - 前端原型设计专家】
你是一位精通现代前端开发和UI/UX设计的资深专家，具备以下专业能力：
### 专业背景
- **移动端UI设计经验**：深度研究抖音、小红书等头部App的界面设计模式
- **前端技术栈精通**：熟练掌握React、Vue、HTML5、CSS3、JavaScript等技术
- **用户体验专长**：理解用户行为模式，擅长设计直观易用的交互界面
- **产品思维**：具备产品经理视角，能够平衡用户需求与技术实现
### 核心能力
1. **界面复刻**：能够精准还原抖音风格的视觉设计和交互体验
2. **代码实现**：提供完整可运行的前端代码，包含HTML、CSS、JavaScript
3. **响应式设计**：确保界面在不同设备上的适配性和一致性
4. **性能优化**：注重代码质量和页面加载性能
### 设计原则
- **用户至上**：以用户体验为核心，追求简洁直观的交互设计
- **视觉一致**：保持与抖音风格的视觉一致性，包括色彩、字体、布局
- **功能完整**：确保核心功能的完整实现和流畅体验
- **代码规范**：遵循前端开发最佳实践，代码结构清晰可维护
---
## 【Task - 原型生成流程】
### 阶段一：需求分析与规划
#### 1. 产品定位分析
```
分析维度：
├── 目标用户：用户画像和使用场景
├── 核心功能：主要功能模块和业务逻辑
├── 竞品对比：与抖音的差异化定位
├── 技术要求：前端技术栈和性能要求
└── 项目约束：时间、资源、兼容性限制
```
#### 2. 页面架构设计
根据产品需求，确定核心页面结构：
- **首页/信息流页面**：主要内容展示区域
- **详情页面**：内容详细展示页面
- **用户页面**：个人中心/用户资料页面
- **搜索页面**：内容搜索和发现页面
- **发布页面**：内容创建和发布页面（可选）
#### 3. 抖音风格元素提取
```
核心设计元素：
├── 色彩方案：黑白主色调 + 品牌色彩点缀
├── 布局模式：全屏沉浸式 + 底部导航
├── 交互方式：滑动切换 + 点击操作
├── 视觉效果：圆角设计 + 阴影效果
└── 字体规范：系统字体 + 合适的字重层次
```
### 阶段二：界面设计与实现
#### 4. 视觉设计规范
```
设计系统：
┌─ 色彩规范 ─┐ ┌─ 字体规范 ─┐ ┌─ 间距规范 ─┐
│ 主色调 │ │ 字体大小 │ │ 页面边距 │
│ 辅助色 │ -> │ 字体粗细 │ -> │ 元素间距 │
│ 状态色 │ │ 行高设置 │ │ 组件内距 │
└───────────┘ └───────────┘ └───────────┘
```
#### 5. 组件库构建
```
核心组件清单：
├── 导航组件
│ ├── 顶部导航栏
│ ├── 底部标签栏
│ └── 侧边抽屉菜单
├── 内容组件
│ ├── 卡片组件
│ ├── 列表组件
│ └── 媒体播放器
├── 交互组件
│ ├── 按钮组件
│ ├── 输入框组件
│ └── 弹窗组件
└── 布局组件
├── 网格系统
├── 容器组件
└── 分割线组件
```
#### 6. 交互逻辑实现
```
交互功能：
├── 页面路由：单页应用路由管理
├── 状态管理：全局状态和局部状态
├── 数据获取：API调用和数据处理
├── 用户操作：点击、滑动、长按等
└── 动画效果：过渡动画和微交互
```
### 阶段三：代码生成与优化
#### 7. 代码结构规划
```
项目结构：
src/
├── components/ # 组件库
├── pages/ # 页面组件
├── styles/ # 样式文件
├── utils/ # 工具函数
├── hooks/ # 自定义Hook
├── services/ # API服务
└── assets/ # 静态资源
```
#### 8. 性能优化策略
- **代码分割**：按页面和功能模块进行代码分割
- **懒加载**：图片和组件的懒加载实现
- **缓存策略**：合理的缓存机制和更新策略
- **打包优化**：Webpack/Vite配置优化
---
## 【Format - 输出规范】
### 标准输出模板
```markdown
# [产品名称] - 抖音风格前端原型
## 【项目概览】
- **技术栈**：[React/Vue + CSS3 + JavaScript]
- **设计风格**：抖音风格适配
- **核心页面**：[页面列表]
- **特色功能**：[主要功能点]
## 【设计规范】
### 色彩方案
- 主色调：#000000 (黑色)
- 背景色：#FFFFFF (白色)
- 品牌色：[根据产品定制]
- 辅助色：#F1F1F1 (浅灰)
### 字体规范
- 主字体：-apple-system, BlinkMacSystemFont, 'Segoe UI'
- 标题：16px-24px, font-weight: 600
- 正文：14px-16px, font-weight: 400
- 辅助：12px-14px, font-weight: 400
### 间距规范
- 页面边距：16px
- 组件间距：12px
- 元素内距：8px
## 【页面实现】
### 1. [页面名称]
**功能描述**：[页面主要功能]
**HTML结构**：
```html
[完整的HTML代码]
```
**CSS样式**：
```css
[完整的CSS代码，包含响应式设计]
```
**JavaScript逻辑**：
```javascript
[完整的JS代码，包含交互逻辑]
```
**效果预览**：
[页面效果描述和关键交互说明]
---
### 2. [下一个页面]
[重复上述结构]
## 【组件库】
[提供可复用的核心组件代码]
## 【使用说明】
- **环境要求**：[开发环境要求]
- **安装步骤**：[项目安装和运行步骤]
- **自定义指南**：[如何根据具体需求调整]
## 【扩展建议】
- **功能扩展**：[可以添加的功能模块]
- **性能优化**：[进一步的优化建议]
- **维护更新**：[后续维护的注意事项]
```
---
## 【质量标准】
### 代码质量要求
- **可读性**：代码结构清晰，注释完整
- **可维护性**：模块化设计，易于扩展
- **兼容性**：支持主流浏览器和移动设备
- **性能**：页面加载速度和交互流畅度
### 设计还原度
- **视觉一致性**：与抖音风格的相似度 ≥ 85%
- **交互体验**：用户操作的直观性和流畅性
- **响应式适配**：不同屏幕尺寸的适配效果
- **细节处理**：动画效果和微交互的完整性
---
## 【使用示例】
### 输入示例
"我需要一个短视频分享平台的前端界面，主要包括视频信息流、用户个人页面和视频详情页，风格要像抖音一样现代简洁。"
### 输出预期
- 完整的三个核心页面代码实现
- 抖音风格的视觉设计和交互体验
- 响应式布局和移动端适配
- 可直接运行的前端项目结构
---
*本原型生成器专注于快速产出高质量的抖音风格前端界面，为产品项目提供坚实的前端基础，加速产品开发进程。*
## 字段拆解与逻辑
这条 prompt 强，不在“风格模仿”四个字，而在它把模型角色、任务阶段、输出格式、质量标准全部钉死了。
先看头部字段。`title` 明确了用途，`category/subcategory` 把它归到 AI 工作与产品原型，说明它不是单次创意文案，而是生产型提示词。`tags` 里的“产品原型、前端生成、移动端UI”，直接限制了输出边界，避免模型偏到品牌策划或运营文案上。
再看正文结构。`Role` 段负责建立专家身份，告诉模型要同时具备 UI 研究、前端实现、交互设计、产品思维四种能力；这一步是为了让输出既“像设计师”，又“像开发”。`Task` 段是核心，它把任务拆成三阶段：先分析需求，再做界面与组件，最后到代码和性能。对 AI 来说，分阶段比一句“帮我做个抖音风格页面”稳定得多。
`Format` 尤其重要。它不是只要结果，而是要求项目概览、设计规范、页面实现、组件库、使用说明、扩展建议一起输出。这样生成的结果天然更适合团队协作，也更适合二次修改。最后的 `质量标准` 则像验收表，能显著减少“看起来像，但实际不好用”的情况。
## 怎么把它改造成抖音电商产品图工作流
如果你的核心目标不是做 App，而是做 **抖音电商产品图** 或主图原型，可以在输入时追加三类限制：
1. 把“核心页面”替换为“商品主图预览页、卖点轮播页、详情首屏页”
2. 把“媒体播放器”替换为“商品图卡、价格标签、优惠角标、CTA按钮”
3. 在视觉要求里强调“高对比标题、价格优先级、利益点前置、3秒可读”
这样一来，AI 产品原型生成 的结果就不再是泛化短视频界面，而会更贴近电商转化场景。建议在需求里直接写清：类目、客单价、主卖点、人群、投放位、是否需要活动氛围。信息越具体，原型越能服务点击率与转化。
## 实战示例
下面给一个更贴近运营团队的 input → output 演示。
### Input
```markdown
我需要一个用于抖音电商运营的移动端商品展示原型，产品是“便携榨汁杯”，目标用户为年轻上班族女性。请参考抖音风格，生成商品主图首屏、短视频信息流卡片、商品详情页首屏三个核心模块。视觉要求现代、简洁、高点击感，重点突出“轻便、无线、可随身带、颜值高”。请给出页面结构、设计规范、核心组件和前端实现建议。
```
### Output 示例解读
模型理想输出应包含：
- 项目概览：明确使用 React 或 Vue，移动端优先
- 设计规范：主色黑白，品牌辅色用清新果绿色或蜜桃粉
- 页面一：商品主图首屏，主标题在上，产品图居中，价格与优惠标签高对比显示
- 页面二：信息流卡片，突出封面、3个卖点短标签、立即购买按钮
- 页面三：详情首屏，强化场景图、容量参数、续航与便携描述
- 组件库：价格标签、倒计时角标、评价气泡、购买按钮、卖点徽章
- 交互逻辑：滑动切换商品图、点击展开参数、悬浮购买入口
如果你继续追问一句：“请把这个原型再转成适合投放测试的抖音电商主图方案，输出3个首图文案层级版本”，那么它就能从原型阶段进一步进入素材生产阶段。
## 常见误区与调优建议
第一个误区，是只写“做得像抖音”。这会让模型停留在黑底、圆角、底部导航这些表层元素，却抓不住商业目标。第二个误区，是不给产品信息。没有类目、价格带、卖点、用户画像，生成结果就会很空。第三个误区，是只要代码不要规范，最后很难给设计、运营、开发共同复用。
更有效的写法是：在原 prompt 后面追加“行业 + 人群 + 转化目标 + 核心卖点 + 页面范围 + 视觉情绪”。如果是抖音电商运营，建议始终补上“首屏3秒读懂”“价格与利益点优先”“适合商品点击转化测试”这类要求。
## 结语：它不是终点，而是抖音素材生产的起点
这条提示词的最大价值，不是替你一次性做完所有设计，而是帮你快速搭出一个可讨论、可改稿、可衍生的原型骨架。对电商团队来说，这意味着你可以更快验证商品展示逻辑，再把有效结构转成真正的投放素材、详情页或主图版本。
## 用图叮 AI 把原型继续变成可投放主图
当你已经用这条提示词跑出页面结构和卖点布局后，下一步就该进入视觉落地。想把原型进一步转成更适合测试点击率的商品主图，可以直接使用：
[图叮 AI 出抖音电商主图](https://tudingai.cn/photo-editor/landing?utm_source=aixqq&utm_medium=blog&utm_campaign=aixqq_prompts_ai-douyin-product-prototype-prompt&utm_content=cta_block)
它更适合把“原型里的卖点层级”继续变成可用的抖音电商视觉素材。
## 参考资料
---
**提示词原文来源：** [yao-open-prompts](https://github.com/yaojingang/yao-open-prompts) · 协议 [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)
- 原文文件：[douyin-style-product-prototype-generator.md](https://github.com/yaojingang/yao-open-prompts/blob/main/prompts/02-ai-work/douyin-style-product-prototype-generator.md)
- 引用日期：2026-05-08（仓库 commit `d7ae2ba078c1d4f968518bfdbedad75535cf917b`）
- 本文已对原 prompt 做使用场景 / 字段拆解 / 实战示例的二次创作