科技产品 DEMO 生成器

> 一键生成带逼真 3D 产品仿真图的科技感信息图 HTML Demo

🚀 快速上手（3分钟出图）

我能做什么？

我可以帮你生成专业级的科技产品信息图 Demo，特点是：
- ✅ 逼真 3D 产品图：AI 生成的产品渲染图，像真实产品照片一样
- ✅ 5 种专业模板：系统全景、对比分析、技术路线、挑战分析、产业知识库
- ✅ 蓝色科技主题：统一的设计风格，专业大气
- ✅ 完整 HTML 页面：直接打开就能用，可演示可分享

怎么调用我？

直接说你的需求就行，比如：

> "帮我做一个动力电池产品介绍 Demo，要有电池包、BMS、热管理系统的 3D 图"

> "用科技产品DEMO生成器做一个 eVTOL 飞行器系统全景图"

> "生成一个芯片产品的对比分析 Demo，对比 3 款芯片的参数"

> "帮我做一个低空经济产业知识库页面"

输出什么？

我会给你一个完整的文件夹，包含：
- 📄 index.html - 主页面（直接双击用浏览器打开）
- 🎨 styles.css - 样式文件
- 🖼️ images/ - 所有生成的 3D 产品仿真图

📋 核心工作流

1. 需求分析 → 明确产品主题和需要哪些3D图
     ↓
2. 生成配图 → AI生成统一风格的3D产品仿真图（核心步骤！）
     ↓
3. 选择模板 → 5种专业模板选其一
     ↓
4. 组装页面 → 图片嵌入HTML，填充文字内容
     ↓
5. 质量检查 → 确保图片质量、风格统一、内容完整
     ↓
6. 交付产物 → 完整HTML + 图片资源

🎨 第一步：生成 3D 产品仿真图（最重要！）

为什么这步最重要？

逼真的 3D 产品图是整个 Demo 的灵魂。没有好的产品图，页面再好看也只是空架子。

统一风格标准

所有产品图必须保持完全一致的风格：
- 渲染风格：3D 渲染，C4D / Octane 风格，产品摄影级
- 光影：工作室柔和布光，主光源 45° 斜上方
- 背景：纯白色或浅灰渐变背景
- 色调：银灰色为主，科技蓝点缀
- 质量：8K 超清，细节丰富，材质真实
- 红线：绝对不能有文字、logo、水印

6 大类产品 Prompt 模板

1. 飞行器 / 交通工具类

3D渲染的[产品名称]，工业设计风格，45度斜视角，白色背景，工作室柔和布光，Octane渲染，8K超清，细节丰富，科技感，银灰色机身，蓝色灯光点缀，碳纤维材质，流线型设计，产品摄影，干净背景，无文字，no text

示例：eVTOL 飞行器、无人机、飞行汽车、电动飞机等

2. 电池 / 电源类

3D渲染的[产品名称]，工业产品展示，45度斜视角，白色背景，工作室布光，Octane渲染，8K超清，金属外壳，散热片，模块化设计，蓝色指示灯，科技感，精密结构，产品摄影，干净背景，无文字，no text

示例：动力电池包、电池模组、储能电池、充电宝等

3. 芯片 / 电子设备类

3D渲染的[产品名称]，工业级产品展示，45度斜视角，白色背景，工作室布光，Octane渲染，8K超清，微距细节，科技感，精密电子元件，金属触点，电路板走线，蓝色指示灯，干净背景，无文字，no text

示例：芯片、飞控板、传感器、电路板、BMS 主板等

4. 机械 / 零部件类

3D渲染的[产品名称]，工业产品展示，45度斜视角，白色背景，工作室布光，Octane渲染，8K超清，金属质感，精密机械结构，科技感，工程级细节，产品摄影，干净背景，无文字，no text

示例：电机、螺旋桨、减速器、轴承、齿轮等

5. 场景 / 应用类

[场景描述]，写实风格，白天，晴朗天气，现代城市背景，科技感，未来感，8K超清，电影级画质，广角视角，蓝色天空，干净明亮

示例：城市空中交通、vertiport 起降场、充电站、工厂车间等

6. 图标 / 概念类

3D图标风格的[产品/概念]，等轴测视角，简约设计，蓝色主色调，白色背景，柔和光影，Octane渲染，可爱精致，科技感，无文字

示例：小型图标化的产品示意、概念图等

必加质量关键词（每个 Prompt 都要加！）

✅ 必加：
- 3D渲染 或 C4D渲染
- Octane渲染
- 8K超清 或 超高清
- 产品摄影 或 工业产品展示
- 白色背景 或 干净背景
- 无文字 或 no text
- 细节丰富 或 精密细节

❌ 避免：
- 卡通、插画、手绘、2D、扁平风格
- 人物面部特写
- 复杂背景、杂乱场景
- 文字、logo、水印

图片生成技巧

1. 风格统一：所有图片用相同的基础前缀，只改产品名
2. 批量生成：一次生成多张，选最好的那张
3. 迭代优化：第一张不满意，调整 prompt 再生成
4. 角度一致：同类产品尽量用相同的视角

图片比例建议

📐 第二步：选择页面模板

5 种标准模板

详细模板说明见 references/templates.md。

🧩 第三步：页面组装

标准页面结构

┌─────────────────────────────────────┐
│  页面大标题 (H1)                    │
│  副标题/描述文字                    │
│  [特性标签1] [特性标签2] [标签3]   │
├─────────────────────────────────────┤
│                                     │
│  模块一：XXX（带产品图）            │
│  ┌──────────┐ ┌──────────┐         │
│  │  卡片1   │ │  卡片2   │  ...    │
│  └──────────┘ └──────────┘         │
│                                     │
│  模块二：XXX（带产品图）            │
│  ┌──────────────────────────────┐   │
│  │  大卡片/图表区               │   │
│  └──────────────────────────────┘   │
│                                     │
│  ...更多模块...                     │
│                                     │
│  ┌──────────────────────────────┐   │
│  │  总结/底部金句条             │   │
│  └──────────────────────────────┘   │
└─────────────────────────────────────┘

图片嵌入规范

• 中心主视觉图：放在页面核心位置，尺寸较大，居中
• 模块配图：放在卡片内，与文字左右或上下排列
• 圆角统一：图片圆角与卡片圆角一致（12px）
• 宽度自适应：图片宽度 100% 自适应容器大小
• 间距：图片与文字间距 16px

✅ 第四步：质量检查清单

生成完成后，逐项检查：

图片质量检查

• [ ] 是 3D 渲染风格吗？（不是 SVG 示意图！）
• [ ] 背景是白色/干净的吗？
• [ ] 有没有乱码文字？（必须没有！）
• [ ] 产品细节清晰吗？
• [ ] 光影自然吗？
• [ ] 色调符合科技蓝主题吗？
• [ ] 所有图片风格统一吗？

页面质量检查

• [ ] 色彩符合设计系统吗？（主色 #0066FF）
• [ ] 间距统一吗？（8px 网格）
• [ ] 圆角一致吗？（卡片 12px）
• [ ] 字体层级清晰吗？
• [ ] 所有卡片有统一阴影吗？
• [ ] 移动端正常显示吗？
• [ ] 内容完整无遗漏吗？
• [ ] 图片加载路径正确吗？

❓ 常见问题与排错指南

图片生成相关

Q: 生成的图片里有乱码文字怎么办？
A: 在 prompt 里强调 无文字、no text、没有任何文字，多强调几遍。如果还有，重新生成一张。

Q: 图片风格不统一怎么办？
A: 确保所有图片用相同的基础 prompt 前缀，只改产品名称部分。渲染器、光影、背景描述必须完全一致。

Q: 生成的图片太卡通/太假怎么办？
A: 增加这些关键词：产品摄影、工业级、真实材质、金属质感、细节丰富、8K超清。

Q: 角度不对，看不到产品细节怎么办？
A: 在 prompt 里明确指定视角，比如 45度斜视角、正视图、俯视图、等轴测视角。

Q: 背景太复杂怎么办？
A: 强调 纯白色背景、干净背景、纯色背景，不要加场景描述。

页面相关

Q: 图片加载不出来怎么办？
A: 检查图片路径是否正确，确保图片在 images/ 目录下，HTML 里用相对路径引用。

Q: 移动端显示错乱怎么办？
A: 确保使用了响应式的 grid 布局，检查 CSS 里的媒体查询是否生效。

Q: 颜色不对怎么办？
A: 修改 CSS 变量 --color-primary 即可全局换色，详见设计系统文档。

效果优化

Q: 觉得页面不够好看怎么办？
A: 可以从这几个方面优化：
1. 提升图片质量（重新生成更高质量的 3D 图）
2. 增加数据可视化元素（进度条、数据数字、图表）
3. 调整内容层级，突出重点
4. 增加动效（悬停效果、过渡动画）

Q: 内容太多放不下怎么办？
A: 精简内容，只保留核心信息，用数据和要点代替大段文字。

⚠️ 避坑指南（这些坑不要踩！）

❌ 反模式 1：用 SVG 示意图代替 3D 产品图

错误做法：用代码画一些矩形、线条、框图，假装是产品图
为什么不行：看起来很廉价，完全没有真实感，和专业级信息图差十万八千里
正确做法：必须用 AI 生成逼真的 3D 产品渲染图，这是核心价值

❌ 反模式 2：图片里有文字

错误做法：生成的产品图上有乱码文字、logo、水印
为什么不行：严重影响专业感，乱码文字看起来很low
正确做法：prompt 里反复强调"无文字"，文字全部用 HTML 渲染

❌ 反模式 3：图片风格不统一

错误做法：有的图是 3D 渲染，有的是卡通，有的是照片，风格杂乱
为什么不行：页面看起来像拼凑的，不专业
正确做法：所有图片用相同的 prompt 前缀，保持渲染器、光影、背景完全一致

❌ 反模式 4：内容太空洞

错误做法：只有大标题和空卡片，没有实质内容
为什么不行：用户要的是信息图，不是空架子
正确做法：每个模块都要有具体内容、数据、要点，信息密度要高

❌ 反模式 5：排版混乱

错误做法：间距不统一，圆角不一样，颜色乱跳
为什么不行：看起来不专业，像业余作品
正确做法：严格遵循设计系统，8px 网格，统一的间距、圆角、色彩

📁 资源文件说明

assets/styles.css

完整的样式系统，包含：
- CSS 变量（设计令牌）
- 基础重置
- 所有组件样式（卡片、网格、进度条、数据统计等）
- 响应式布局
- 工具类

使用方式: 在 HTML 中通过 <link rel="stylesheet" href="styles.css"> 引用

assets/template.html

综合示例模板，展示了主要组件的使用方式。可作为生成新页面的参考起点。

references/design-system.md

详细的设计系统规范，包含：
- 色彩系统（主色、中性色、功能色）
- 排版系统（字号、字重、行高）
- 布局系统（间距、圆角、阴影）
- 组件样式规范
- 产品仿真图设计规范

references/templates.md

5 种标准页面模板的详细说明，包含：
- 适用场景
- 页面结构图示
- 核心元素清单
- 图片配置建议
- 模板选择指南

references/image-generation.md

核心能力文档 - 3D 产品仿真图生成指南，包含：
- 统一视觉风格定义
- 6 大类产品的详细 Prompt 模板
- 质量控制参数和负面关键词
- 图片使用规范
- 生成工作流
- 常见问题与优化技巧
- 快速 Prompt 速查表

🎯 适用场景

✅ 适合用我的场景

• 产品介绍 Demo / 产品演示汇报
• 技术架构图 / 系统全景图
• 方案对比 / 竞品分析
• 技术路线分析 / 产品分类
• 行业研究 / 产业分析
• 商业计划书可视化
• 方案汇报 / 项目介绍
• 知识库 / 资源库页面

❌ 不适合用我的场景

• 传统商务风格、政务风格的页面
• 纯文字文档、报告
• 电商商品详情页
• 营销海报、宣传单页
• 需要后端交互的动态网站
• App 界面设计

📦 交付规范

文件输出

• 输出一个完整的文件夹
• 包含 index.html 主页面
• 包含 styles.css 样式文件
• 包含 images/ 文件夹，所有 3D 产品仿真图
• 文件名使用英文小写，连字符分隔

目录结构

demo/
├── index.html          # 主页面（双击打开）
├── styles.css          # 样式文件
└── images/             # 产品图片目录
    ├── main-product.png
    ├── module-1.png
    ├── module-2.png
    └── ...

交付说明

告诉用户：
1. 文件在哪里，怎么打开（直接双击 index.html）
2. 页面包含哪些主要内容和模块
3. 生成了哪些产品图，分别是什么
4. 哪些地方可以自定义修改（文字、图片、颜色等）
5. 图片是 AI 生成的 3D 仿真图，可替换为真实产品图

🔧 扩展与定制

更换主色调

修改 CSS 变量即可全局换色：

:root {
  --color-primary: #你的颜色;
  --color-primary-dark: #深色版本;
  --color-primary-light: #浅色版本;
  --color-primary-gradient: linear-gradient(135deg, #主色 0%, #渐变色 100%);
}

添加新组件

1. 在 styles.css 中添加组件样式
2. 在 design-system.md 中补充组件规范
3. 在 template.html 中添加示例

新增页面模板

1. 在 templates.md 中添加新模板说明
2. 创建对应的示例 HTML
3. 说明适用场景和结构

💡 使用小贴士

1. 描述越详细越好：告诉我产品叫什么、有哪些模块、要展示什么内容，我生成的越准确
2. 图片质量优先：宁可多花时间生成高质量的 3D 图，也不要用示意图凑数
3. 风格统一最重要：所有图片保持一致的风格，页面看起来才专业
4. 信息密度要高：多放数据、要点、对比，少放大段文字
5. 有问题随时改：生成后不满意可以调整，图片可以重新生成，内容可以修改