Zipoly 文档配图 — AI 文生图提示词

项目背景：Zipoly 是一款专业的 Windows 桌面端 3D 模型优化工具，主要功能包括 Draco 压缩、格式转换、3D 查看器。界面采用现代 SaaS 设计风格，浅色主题，主色调为翠绿色（#18a96e），辅助色为靛蓝色（#4f46e5）。

🎨 通用设计规范（所有图片必须遵循）

视觉风格

应用类型：Windows 桌面应用（Tauri 框架）
主题：浅色主题，白色背景（#ffffff）
主色调：翠绿色 #18a96e（用于强调、按钮、图标）
辅助色：靛蓝色 #4f46e5（用于次要元素）
文字颜色：深灰色 #1f2937（主文字）、#6b7280（次要文字）
边框颜色：浅灰色 #e5e7eb
圆角：8-12px 中等圆角
阴影：细腻柔和的投影，0 2px 8px rgba(0,0,0,0.08)

布局结构

左侧边栏：宽度 220px，浅灰色背景（#f8f9fc），包含 Logo 和 6 个导航图标
主内容区：白色背景，左右内边距 32px，上下内边距 24px
字体：中文界面，使用微软雅黑或思源黑体

导航图标（从上到下）

🔧 模型优化（Operation 图标）
👁️ 模型查看（View 图标）
🔄 格式转化（Switch 图标）
🕐 活动日志（Clock 图标）
⚙️ 系统设置（Setting 图标）
ℹ️ 关于软件（InfoFilled 图标）

📸 图片 1：软件主界面 `screenshot-overview.webp`

用途：展示 Zipoly 整体界面布局和导航结构

尺寸：1920×1080px

详细提示词：

一款名为 Zipoly 的 Windows 桌面 3D 模型优化工具的完整应用截图。

【左侧边栏】（宽度 220px，背景色 #f8f9fc）
- 顶部：Logo 区域，包含一个圆角正方形图标（翠绿色背景 #18a96e，内有白色 3D 立方体图标），
  右侧显示品牌名"ZIPOLY"（粗体，字母间距大）和副标题"3D TOOLS"（小号字体，翠绿色）
- 分隔线（浅灰色 #e5e7eb）
- 导航菜单（6 个按钮，垂直排列，间距 4px）：
  1. "模型优化"（Operation 图标，翠绿色背景高亮，表示当前选中）
  2. "模型查看"（View 图标）
  3. "格式转化"（Switch 图标）
  4. "活动日志"（Clock 图标）
  5. "系统设置"（Setting 图标）
  6. "关于软件"（InfoFilled 图标）
- 底部：分隔线 + "收起"按钮（双箭头图标）

【右侧主内容区】（白色背景）
- 显示"模型优化"页面的初始状态
- 中央有一个虚线边框的文件拖放区域，内有上传图标和提示文字"拖拽文件到此处或点击选择"
- 右侧面板显示"模型信息"卡片（空状态）

【整体风格】
- 现代扁平化设计，圆角 8-12px
- 翠绿色 #18a96e 作为主色调（Logo、选中状态、强调元素）
- 细腻阴影：0 2px 8px rgba(0,0,0,0.08)
- 中文界面，微软雅黑字体
- Windows 11 风格的窗口边框和标题栏
- 1920×1080 分辨率，产品级截图质量

📸 图片 2：压缩优化主界面 `screenshot-optimize.webp`

用途：展示模型导入后的压缩参数设置界面

尺寸：1920×1080px

详细提示词：

Zipoly 的"模型优化"页面截图，已导入一个 GLB 模型文件。

【左侧边栏】
- "模型优化"按钮处于选中状态（翠绿色背景 #18a96e）
- 其他导航按钮为默认灰色状态

【主内容区 - 左侧面板】（占 60% 宽度）
- 标题："文件选择"（14px，粗体）
- 已选择文件显示区域：
  - 文件图标（翠绿色 3D 立方体图标）
  - 文件名："japanese_house.glb"（13px）
  - 文件大小："18.4 MB"（灰色小字）
  - 右侧有"×"删除按钮
- 分隔线
- "压缩设置"区域：
  - "Draco 压缩级别"标签 + 滑块控件（当前值：7，范围 1-10）
  - 滑块轨道为浅灰色，已填充部分为翠绿色渐变
  - 滑块右侧显示数字"7"（翠绿色，粗体）
- "目标格式"：单选按钮组，GLB 已选中（翠绿色圆点）
- "输出后缀"：输入框，内容"_optimized"
- "纹理优化"：复选框（未勾选）
- "高级参数"：可折叠区域（已展开），显示 4 个精度滑块：
  - 位置精度（qp）：10
  - 法线精度（qn）：8
  - UV 精度（qt）：8
  - 属性精度（qa）：8
- 底部：大号翠绿色按钮"开始优化"（宽度 100%，高度 44px，圆角 8px）

【主内容区 - 右侧面板】（占 35% 宽度，浅灰色背景 #f8f9fc）
- 标题："模型信息"
- 统计卡片（白色背景，圆角 8px，阴影）：
  - 顶点数：124,832（图标：点阵图标）
  - 三角面数：248,640（图标：三角形图标）
  - 纹理数量：3（图标：图片图标）
  - 动画数量：0（图标：播放图标）
- 每行左侧有对应图标（翠绿色），右侧显示数值（深灰色粗体）

【整体风格】
- 表单元素使用 Element Plus 风格
- 输入框和滑块有细腻的交互状态（聚焦时翠绿色边框）
- 卡片之间间距 16px
- 所有文字清晰可读，中文界面
- 1920×1080 分辨率

📸 图片 3：压缩结果对比弹窗 `screenshot-compare.webp`

用途：展示压缩完成后的数据对比和效果预览入口

尺寸：1200×800px（弹窗居中显示）

详细提示词：

Zipoly 压缩完成后弹出的对比结果弹窗（模态对话框）。

【弹窗整体】
- 宽度：800px，居中显示
- 白色背景，圆角 16px
- 细腻阴影：0 24px 64px rgba(0,0,0,0.12)
- 顶部标题栏：
  - 左侧：翠绿色 3D 立方体图标 + 文件名"japanese_house_optimized.glb"
  - 右侧：关闭按钮（×）

【弹窗内容区】
- 上半部分：对比数据（两列布局）
  
  【左列 - 压缩前】
  - 标题："压缩前"（灰色，12px）
  - 文件大小：18.4 MB（深灰色，28px 粗体）
  - 下方显示模型统计：
    - 顶点数：124,832
    - 三角面数：248,640
    - 纹理数量：3
  
  【中央分隔】
  - 垂直虚线分隔
  - 中间有一个大号圆形徽章（直径 80px）
  - 徽章背景：翠绿色渐变（#18a96e 到 #10b981）
  - 徽章内容："-89.7%"（白色，24px 粗体）
  - 徽章下方小字："体积缩减"（灰色）
  
  【右列 - 压缩后】
  - 标题："压缩后"（灰色，12px）
  - 文件大小：1.9 MB（翠绿色，28px 粗体）
  - 下方显示相同的模型统计（数值不变）

- 下半部分：操作按钮（水平排列，间距 12px）
  - "预览效果"按钮（翠绿色背景，白色文字，宽度 140px，高度 40px）
  - "打开文件夹"按钮（浅灰色背景，深灰色文字）
  - "关闭"按钮（浅灰色背景，深灰色文字）

【视觉细节】
- 数据卡片使用浅灰色背景（#f8f9fc）
- 统计数据每行有对应图标（翠绿色）
- 按钮圆角 8px，悬停时有轻微阴影
- 所有文字清晰，中文界面
- 背景模糊效果（backdrop-filter: blur(6px)）

📸 图片 4：格式转换界面 `screenshot-convert.webp`

用途：展示 3D 模型格式转换功能界面

尺寸：1920×1080px

详细提示词：

Zipoly 的"格式转化"页面截图。

【左侧边栏】
- "格式转化"按钮处于选中状态（翠绿色背景）

【主内容区 - 左侧面板】（占 55% 宽度）
- 标题："文件选择"
- 已选择文件显示：
  - 文件图标（FBX 格式图标，橙色）
  - 文件名："character_model.fbx"
  - 文件大小："42.8 MB"
  - 删除按钮（×）
- 分隔线
- "转换设置"区域：
  - "目标格式"标签
  - 格式选择器（单选按钮组，垂直排列）：
    ✓ GLB（已选中，翠绿色圆点）
    ○ glTF
    ○ OBJ
    ○ STL
    ○ PLY
  - 每个选项右侧有格式说明小字（灰色）
- 底部：大号翠绿色按钮"开始转换"

【主内容区 - 右侧面板】（占 40% 宽度）
- 标题："支持格式"
- 格式列表卡片（白色背景，圆角）：
  - "导入格式"小标题
  - 格式标签（横向排列，每个标签有图标）：
    GLB、glTF、OBJ、FBX、STL、DAE、PLY
  - 分隔线
  - "导出格式"小标题
  - 格式标签：GLB、glTF、OBJ、STL、PLY
- 每个格式标签：
  - 浅灰色背景（#f3f4f6）
  - 深灰色文字
  - 圆角 6px
  - 内边距 6px 12px
  - 左侧有对应格式的小图标

【视觉流程】
- 中间可以添加一个箭头图标（→）表示转换方向
- 从 FBX 指向 GLB

【整体风格】
- 简洁的表单布局
- 单选按钮使用翠绿色强调
- 格式标签使用不同颜色区分（GLB 翠绿色、FBX 橙色、OBJ 蓝色等）
- 中文界面，1920×1080 分辨率

📸 图片 5：3D 查看器界面 `screenshot-viewer.webp`

用途：展示内置 3D 查看器的模型预览功能

尺寸：1920×1080px

详细提示词：

Zipoly 的"模型查看"页面截图，正在预览一个日式建筑 3D 模型。

【左侧边栏】
- "模型查看"按钮处于选中状态（翠绿色背景）

【主内容区 - 3D 视口】（占据大部分空间）
- 背景：珍珠白渐变（从中心白色 #ffffff 到边缘浅灰色 #f0f2f6 的径向渐变）
- 中央显示：一个精致的日式传统建筑 3D 模型
  - 模型特征：木质结构、瓦片屋顶、传统日式建筑风格
  - 光照效果：柔和的自然光，来自右上方
  - 阴影：细腻的实时阴影投射在地面
  - 模型材质：写实的木纹、瓦片纹理
- 地面网格：浅灰色网格线（可选显示）

【顶部工具栏】（半透明白色背景，模糊效果）
- 左侧工具组：
  - 移动 Gizmo 按钮（已选中，翠绿色）
  - 旋转 Gizmo 按钮
  - 缩放 Gizmo 按钮
  - 分隔线
  - "适应视口"按钮（图标：全屏框）
- 中间工具组：
  - "自动旋转"开关（Toggle，已开启，翠绿色）
  - "显示网格"开关（已开启）
- 右侧工具组：
  - 背景预设下拉菜单（当前：珍珠白）
  - 截图按钮（相机图标）
  - 录制按钮（圆形录制图标）

【底部时间控制条】（半透明白色背景）
- 时间滑块：横向滑块，当前位置 14:00
- 左侧：太阳图标（橙黄色）
- 滑块轨道：渐变色（清晨蓝色 → 正午黄色 → 傍晚橙色 → 夜晚深蓝）
- 右侧：月亮图标（浅蓝色）
- 时间显示："14:00"（数字，粗体）
- "自动时间"开关（Toggle）

【右侧属性面板】（宽度 200px，浅灰色背景 #f8f9fc）
- 标题："属性"
- 模型列表：
  - "japanese_house.glb"（已加载，可见性开关已开启）
  - 眼睛图标（表示可见）
- 分隔线
- "灯光"小标题
- 灯光列表：
  - 平行光 1（太阳图标，强度 1.6）
  - 环境光（灯泡图标，强度 0.4）
- "添加灯光"按钮（+图标）

【底部操作提示】（半透明白色气泡，居中显示）
- 三个提示图标横向排列：
  - 鼠标左键图标 + "旋转"
  - 分隔线
  - 鼠标滚轮图标 + "缩放"
  - 分隔线
  - 鼠标右键图标 + "平移"
- 字体：11px，灰色

【整体风格】
- Three.js 渲染风格，写实光照
- 工具栏和面板使用毛玻璃效果（backdrop-filter: blur(10px)）
- 按钮圆角 8px，悬停时有轻微高亮
- 中文界面，1920×1080 分辨率

📸 图片 6：时间光照效果对比 `screenshot-lighting.webp`

用途：展示 24 小时光照模拟的视觉效果差异

尺寸：1800×600px（宽幅对比图）

详细提示词：

同一个日式建筑 3D 模型在三个不同时刻的光照效果对比图（三联画布局）。

【整体布局】
- 三个面板横向排列，每个面板 600×600px
- 面板之间有细线分隔（1px，浅灰色）
- 每个面板底部有时间标签条（半透明白色背景）

【左侧面板 - 清晨 06:00】
- 背景：深蓝色到橙红色的垂直渐变（#1e3a8a → #f97316）
- 光照：暖橙色日出光，来自右侧低角度
- 天空：深蓝色渐变到橙色（模拟日出）
- 模型阴影：长长的阴影投向左侧
- 整体色调：暖橙色 + 深蓝色对比
- 底部标签：
  - 太阳图标（橙色）
  - "清晨 06:00"（白色文字）
  - 温度感：暖色调

【中间面板 - 正午 12:00】
- 背景：浅蓝色到白色的渐变（#dbeafe → #ffffff）
- 光照：明亮白色日光，来自正上方
- 天空：明亮的浅蓝色
- 模型阴影：短而清晰的阴影，正下方
- 整体色调：明亮、高对比度
- 底部标签：
  - 太阳图标（亮黄色）
  - "正午 12:00"（深灰色文字）
  - 温度感：中性明亮

【右侧面板 - 傍晚 18:30】
- 背景：橙红色到深紫色的渐变（#fb923c → #7c3aed）
- 光照：深橙色夕阳光，来自左侧低角度
- 天空：橙红色渐变到紫色（模拟日落）
- 模型阴影：长长的戏剧性阴影投向右侧
- 整体色调：暖橙色 + 紫色对比
- 底部标签：
  - 太阳图标（深橙色）
  - "傍晚 18:30"（白色文字）
  - 温度感：暖色调

【模型细节】
- 所有三个面板中的模型角度完全相同（便于对比）
- 模型为日式传统建筑，木质结构，瓦片屋顶
- 纹理细节清晰可见
- 光照效果写实，符合 Three.js 渲染风格

【视觉效果】
- 每个面板的光照方向、颜色、强度明显不同
- 阴影长度和方向随时间变化
- 天空背景颜色与时间对应
- 整体展示 24 小时光照模拟的真实感

【技术细节】
- Three.js 实时渲染风格
- 写实的 PBR 材质
- 柔和的阴影（PCFSoftShadowMap）
- 色调映射：ACESFilmicToneMapping
- 1800×600 分辨率，高质量渲染

📸 图片 7：系统设置页面 `screenshot-settings.webp`

用途：展示参数配置和授权管理功能

尺寸：1920×1080px

详细提示词：

Zipoly 的"系统设置"页面截图。

【左侧边栏】
- "系统设置"按钮处于选中状态（翠绿色背景）

【主内容区】（白色背景，左右内边距 32px）

【上半部分 - 默认参数设置】
- 区块标题："默认参数设置"（16px 粗体，深灰色）
- 白色卡片（圆角 12px，细腻阴影）：
  
  1. "默认压缩级别"
     - 标签（13px，灰色）
     - 滑块控件（当前值：7，范围 1-10）
     - 滑块轨道：浅灰色，已填充部分翠绿色渐变
     - 右侧数字显示："7"（翠绿色粗体）
  
  2. "输出文件后缀"
     - 标签
     - 输入框：内容"_optimized"（浅灰色背景，圆角 6px）
  
  3. "完成后清空输入"
     - 标签
     - Toggle 开关（关闭状态，灰色）
  
  4. "保留导出目录"
     - 标签
     - Toggle 开关（开启状态，翠绿色）
  
  - 卡片底部：
    - "重置设置"按钮（浅灰色背景，深灰色文字，圆角 8px）

【下半部分 - 授权管理】
- 区块标题："授权管理"（16px 粗体，深灰色）
- 白色卡片（圆角 12px，细腻阴影）：
  
  1. "设备 ID"
     - 标签（13px，灰色）
     - 只读输入框：显示哈希字符串"586627c0e778...d506f98d622"
     - 右侧："复制"按钮（翠绿色文字，图标：复制图标）
     - 下方提示文字："申请授权时需要提供此 ID"（11px，浅灰色）
  
  2. "授权密钥"
     - 标签
     - 输入框：占位符"请输入授权密钥"（浅灰色背景）
     - 右侧："验证授权"按钮（翠绿色背景，白色文字，圆角 8px）
  
  3. 授权状态提示（可选）
     - 未授权：橙色背景提示条"当前为试用模式，剩余 5 小时 23 分钟"
     - 或已授权：翠绿色背景提示条"授权有效，到期时间：2026-12-31"

【整体风格】
- 表单布局清晰，标签和控件对齐
- 卡片之间间距 24px
- Toggle 开关使用 Element Plus 风格
- 输入框聚焦时翠绿色边框
- 按钮悬停时有轻微阴影
- 中文界面，1920×1080 分辨率

📸 图片 8：批量压缩进度界面 `screenshot-batch.webp`

用途：展示批量处理功能和实时进度

尺寸：1920×1080px

详细提示词：

Zipoly 的"模型优化"页面，批量模式正在执行中。

【左侧边栏】
- "模型优化"按钮处于选中状态（翠绿色背景）

【主内容区 - 顶部】
- "批量模式"Toggle 开关（已开启，翠绿色）
- 右侧显示"单文件模式"文字（灰色，未选中状态）

【主内容区 - 文件夹选择】
- "输入文件夹"标签
- 文件夹路径显示框：
  - 文件夹图标（翠绿色）
  - 路径："C:\Users\Admin\Desktop\3D_Models"
  - 右侧："选择文件夹"按钮（浅灰色背景）
- "输出文件夹"标签
- 文件夹路径显示框（同上样式）

【主内容区 - 进度区域】
- 大号进度条（高度 12px，圆角 6px）：
  - 背景：浅灰色（#e5e7eb）
  - 已完成部分：翠绿色渐变（#18a96e → #10b981）
  - 当前进度：67%
- 进度条上方：
  - 左侧："正在批量压缩..."（14px，深灰色）
  - 右侧："8/12"（14px，翠绿色粗体）
- 进度条下方统计信息（横向排列）：
  - "成功: 7"（翠绿色，带对勾图标）
  - 分隔线
  - "失败: 1"（红色，带叉号图标）
  - 分隔线
  - "预计剩余: ~45秒"（灰色，带时钟图标）

【主内容区 - 控制按钮】
- 三个按钮横向排列（间距 12px）：
  - "暂停"按钮（橙色背景，白色文字，暂停图标）
  - "继续"按钮（翠绿色背景，白色文字，播放图标，当前禁用状态）
  - "取消"按钮（红色背景，白色文字，停止图标）

【主内容区 - 文件列表】
- 标题："处理记录"（14px 粗体）
- 可滚动列表区域（白色背景，圆角 8px，细腻阴影）：
  
  每行显示一个文件：
  1. ✓ character_01.glb（翠绿色对勾）
     - 18.4 MB → 1.9 MB（-89.7%）
     - 状态：已完成（翠绿色小字）
  
  2. ✓ building_02.glb（翠绿色对勾）
     - 32.1 MB → 3.2 MB（-90.0%）
     - 状态：已完成
  
  3. ✓ vehicle_03.glb（翠绿色对勾）
     - 12.8 MB → 1.5 MB（-88.3%）
     - 状态：已完成
  
  4. ✗ corrupted_file.glb（红色叉号）
     - 状态：失败 - 文件损坏（红色小字）
  
  5. ⏳ landscape_05.glb（橙色加载图标，旋转动画）
     - 状态：处理中...（橙色小字）
  
  6-12. 待处理文件（灰色，未开始）

【整体风格】
- 进度条有细腻的动画效果（渐变移动）
- 列表项悬停时有轻微高亮
- 成功/失败状态用颜色清晰区分
- 实时更新的数字有轻微的数字滚动动画
- 中文界面，1920×1080 分辨率

📸 图片 9：模型预览弹窗 `preview-mesh.webp`

用途：展示压缩后模型的 3D 预览效果（使用 Draco 解码器）

尺寸：1600×900px（弹窗占屏幕 88% 宽度）

详细提示词：

Zipoly 的模型预览弹窗（全屏模态对话框）。

【弹窗整体】
- 宽度：88% 屏幕宽度（约 1600px）
- 高度：74vh（约 800px）
- 白色背景，圆角 16px
- 细腻阴影：0 24px 64px rgba(0,0,0,0.12)

【弹窗顶部标题栏】
- 左侧：
  - 翠绿色 3D 立方体图标（28×28px，圆角 7px）
  - 文件名："japanese_house_optimized.glb"（14px 粗体）
  - 格式徽章："GLB"（翠绿色背景，白色文字，圆角 4px）
- 右侧：
  - 关闭按钮（×，浅灰色边框，圆角 7px）

【弹窗主体 - 3D 视口】
- 背景：径向渐变（中心白色 #ffffff → 边缘浅灰色 #e2e6ed）
- 中央显示：日式建筑 3D 模型
  - 模型已使用 Draco 解码器加载
  - 光照：Three.js 标准光照（半球光 + 环境光 + 平行光）
  - 阴影：PCFSoftShadowMap 柔和阴影
  - 材质：PBR 材质，写实渲染
  - 模型居中，自动适配视口
- 相机角度：斜 45 度俯视角（position: 8, 6, 8）

【底部操作提示】（半透明白色气泡，居中悬浮）
- 背景：rgba(255,255,255,0.88)，毛玻璃效果
- 边框：1px 浅灰色
- 圆角：100px（胶囊形状）
- 内边距：8px 18px
- 内容（横向排列）：
  - 鼠标左键图标 + "旋转"
  - 分隔线（1px 灰色）
  - 鼠标滚轮图标 + "缩放"
  - 分隔线
  - 鼠标右键图标 + "平移"
- 字体：11px，灰色

【加载状态（可选）】
- 如果显示加载中：
  - 半透明遮罩层（rgba(240,242,245,0.85)）
  - 中央：旋转的加载图标（翠绿色圆环）
  - 下方文字："加载中..."（12px，灰色）

【视觉细节】
- OrbitControls 交互（可旋转、缩放、平移）
- 模型纹理清晰，细节完整
- 光照自然，阴影柔和
- 背景渐变营造空间感
- Three.js WebGL 渲染风格

【技术说明】
- 使用 GLTFLoader + DRACOLoader 加载
- Draco 解码器路径：/draco/（本地静态文件）
- 渲染器：WebGLRenderer，抗锯齿开启
- 色调映射：ACESFilmicToneMapping
- 1600×900 分辨率

📸 图片 10：文件选择界面 `select-mesh.webp`

用途：展示模型导入前的初始状态

尺寸：1920×1080px

详细提示词：

Zipoly 的"模型优化"页面初始状态（未导入文件）。

【左侧边栏】
- "模型优化"按钮处于选中状态（翠绿色背景）

【主内容区 - 中央文件拖放区】
- 大号虚线边框矩形（宽度 600px，高度 400px）
- 边框：2px 虚线，翠绿色（#18a96e），圆角 12px
- 背景：浅翠绿色半透明（rgba(24,169,110,0.05)）
- 中央内容（垂直居中排列）：
  - 上传图标（翠绿色，64×64px）
    - 云朵图标 + 向上箭头
  - 主文字："拖拽文件到此处"（18px 粗体，深灰色）
  - 副文字："或"（14px，灰色）
  - "选择文件"按钮（翠绿色背景，白色文字，圆角 8px，内边距 12px 32px）
  - 支持格式提示："支持 GLB、glTF 格式"（12px，浅灰色）

【主内容区 - 右侧面板】（浅灰色背景 #f8f9fc）
- 标题："模型信息"
- 空状态卡片（白色背景，圆角 8px）：
  - 中央图标：灰色 3D 立方体图标（48×48px）
  - 提示文字："导入模型后显示统计信息"（13px，灰色）

【主内容区 - 底部】
- "开始优化"按钮（灰色背景，禁用状态，不可点击）

【交互状态（可选）】
- 鼠标悬停在拖放区时：
  - 边框变为实线
  - 背景色加深：rgba(24,169,110,0.1)
  - 图标轻微放大动画

【整体风格】
- 简洁的空状态设计
- 虚线边框营造拖放区域感
- 翠绿色引导用户操作
- 中文界面，1920×1080 分辨率

📸 图片 11：首页 Hero 图 / OG 分享图 `og-image.webp`

用途：用于网站首页 Banner、Open Graph 分享图、社交媒体预览

尺寸：1200×630px（OG 标准尺寸）

详细提示词：

Zipoly 3D 模型优化工具的产品宣传横幅图。

【背景】
- 深色渐变背景：深靛蓝色 #1e1b4b → 深紫色 #312e81
- 叠加细腻的网格纹理（Grid pattern，半透明白色线条）
- 右上角有光晕效果（翠绿色 #18a96e，模糊半径 200px，透明度 20%）

【左侧内容区】（占 50% 宽度）
- Logo 图标（翠绿色 3D 立方体，64×64px）
- 品牌名："Zipoly"（48px 粗体，白色，字母间距大）
- 副标题："3D 模型优化工具"（20px，浅灰色 #d1d5db）
- 分隔线（翠绿色，宽度 60px，高度 3px）
- 功能标签（横向排列，间距 12px）：
  - "Draco 压缩"（翠绿色背景，白色文字，圆角 6px，内边距 8px 16px）
  - "批量处理"（同上样式）
  - "离线运行"（同上样式）
- 下载按钮："立即下载"（翠绿色背景，白色文字，圆角 8px，内边距 14px 36px）

【右侧视觉区】（占 50% 宽度）
- 悬浮的 3D 模型预览（日式建筑或汽车模型）
  - 模型带细腻阴影
  - 轻微的 3D 透视效果
- 压缩数据展示（叠加在模型上方）：
  - 半透明白色卡片（毛玻璃效果）
  - 内容："18.4 MB → 1.9 MB"（24px 粗体）
  - 百分比："-89.7%"（32px 粗体，翠绿色）
  - 向下箭头图标（翠绿色）

【装饰元素】
- 左下角：版本徽章"v1.0.2"（浅灰色边框，白色文字）
- 右下角：官网地址"zipoly.raychart.cn"（12px，浅灰色）
- 背景有细微的粒子效果（小圆点，半透明白色）

【整体风格】
- 现代科技产品风格
- 深色背景 + 翠绿色强调
- 3D 元素营造专业感
- 数据可视化突出核心价值
- 1200×630 分辨率，适合社交媒体分享

使用建议

将生成的图片放入 docs-site/public/ 目录
文件名与上方对应（.webp 格式）
建议分辨率：截图类 1920×1080，对比类 1600×600，OG 图 1200×630
放入后将文档中的占位符替换为 <img src="/文件名.webp" alt="描述" class="doc-img" />

🎯 使用指南

1. 图片生成工具推荐

AI 图像生成工具：

Midjourney（推荐）：适合生成高质量 UI 截图，使用 --ar 16:9 参数
Stable Diffusion：开源免费，需要调整 UI 相关的 LoRA 模型
DALL-E 3：适合快速原型，但 UI 细节可能不够精确
Leonardo.ai：适合产品截图，有专门的 UI 设计模式

提示词使用技巧：

将上方提示词完整复制到 AI 工具
如果生成效果不理想，可以添加以下增强词：
- product screenshot, high quality, professional
- clean UI, modern design, SaaS application
- detailed interface, realistic software mockup
避免使用的词：cartoon, illustration, hand-drawn, sketch

2. 图片文件管理

文件命名规范：

docs-site/public/
├── screenshot-overview.webp      # 主界面
├── screenshot-optimize.webp      # 压缩界面
├── screenshot-compare.webp       # 对比弹窗
├── screenshot-convert.webp       # 格式转换
├── screenshot-viewer.webp        # 3D 查看器
├── screenshot-lighting.webp      # 光照对比
├── screenshot-settings.webp      # 系统设置
├── screenshot-batch.webp         # 批量处理
├── select-mesh.webp              # 文件选择
├── preview-mesh.webp             # 模型预览
└── og-image.webp                 # OG 分享图

图片规格要求：

类型	尺寸	格式	质量
应用截图	1920×1080px	WebP	85-90
对比图	1800×600px	WebP	85-90
弹窗截图	1200×800px	WebP	85-90
OG 分享图	1200×630px	WebP	90-95

3. 图片优化处理

生成图片后，建议使用以下工具优化：

命令行工具（推荐）：

bash

# 使用 sharp-cli 批量转换为 WebP
npm install -g sharp-cli
sharp -i "*.png" -o "./webp/" -f webp -q 85

# 或使用 cwebp（Google 官方工具）
cwebp -q 85 input.png -o output.webp

在线工具：

Squoosh.app：Google 出品，支持 WebP 转换
TinyPNG：压缩 PNG 后再转 WebP

4. 文档中引用图片

Markdown 语法：

markdown

<img src="/screenshot-overview.webp" alt="Zipoly 主界面" class="doc-img" />
<p class="doc-img-caption">主界面展示了侧边栏导航和文件拖放区域</p>

已配置的 CSS 样式：

css

.doc-img {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  margin: 24px 0;
}

.doc-img-caption {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  margin-top: -16px;
  margin-bottom: 32px;
}

5. 图片占位符替换清单

文档页面	占位符位置	对应图片
`guide/overview.md`	第 1 个占位符	`screenshot-overview.webp`
`guide/optimize.md`	第 1 个占位符	`select-mesh.webp`
`guide/optimize.md`	第 2 个占位符	`screenshot-optimize.webp`
`guide/optimize.md`	第 3 个占位符	`screenshot-compare.webp`
`guide/optimize.md`	第 4 个占位符	`preview-mesh.webp`
`guide/convert.md`	第 1 个占位符	`screenshot-convert.webp`
`guide/viewer.md`	第 1 个占位符	`screenshot-viewer.webp`
`guide/viewer.md`	第 2 个占位符	`screenshot-lighting.webp`
`guide/settings.md`	第 1 个占位符	`screenshot-settings.webp`

🔧 技术细节说明

色彩系统

css

/* 主色调 */
--accent: #18a96e;           /* 翠绿色 - 主要强调色 */
--accent-dim: rgba(24,169,110,0.1);  /* 翠绿色半透明背景 */
--accent-text: #18a96e;      /* 翠绿色文字 */

/* 辅助色 */
--secondary: #4f46e5;        /* 靛蓝色 - 次要元素 */

/* 中性色 */
--text-primary: #1f2937;     /* 深灰色 - 主文字 */
--text-secondary: #4b5563;   /* 中灰色 - 次要文字 */
--text-muted: #6b7280;       /* 浅灰色 - 提示文字 */

/* 背景色 */
--bg-base: #ffffff;          /* 白色 - 主背景 */
--bg-surface: #f8f9fc;       /* 浅灰色 - 卡片背景 */
--bg-hover: #f3f4f6;         /* 悬停背景 */

/* 边框色 */
--border-subtle: #e5e7eb;    /* 浅灰色边框 */
--border-default: #d1d5db;   /* 默认边框 */
--border-strong: #9ca3af;    /* 深色边框 */

/* 状态色 */
--success: #10b981;          /* 成功 - 绿色 */
--danger: #ef4444;           /* 错误 - 红色 */
--warning: #f59e0b;          /* 警告 - 橙色 */

字体系统

css

/* 品牌字体 */
font-family: 'Space Grotesk', sans-serif;  /* Logo、标题 */

/* 代码字体 */
font-family: 'JetBrains Mono', monospace;  /* 代码、数据 */

/* 界面字体 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
             'Microsoft YaHei', sans-serif;  /* 中文界面 */

圆角规范

css

--radius-sm: 6px;   /* 小元素：标签、徽章 */
--radius-md: 8px;   /* 中等元素：按钮、输入框 */
--radius-lg: 12px;  /* 大元素：卡片、面板 */
--radius-xl: 16px;  /* 超大元素：弹窗、模态框 */

阴影规范

css

/* 卡片阴影 */
box-shadow: 0 2px 8px rgba(0,0,0,0.08);

/* 弹窗阴影 */
box-shadow: 0 24px 64px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);

/* 悬停阴影 */
box-shadow: 0 4px 12px rgba(0,0,0,0.12);

📝 提示词优化建议

如果生成的图片不符合预期

问题 1：界面元素位置不对

解决：在提示词中明确标注"左侧"、"右侧"、"顶部"、"底部"
增强词：precise layout, exact positioning, UI mockup

问题 2：颜色不准确

解决：使用十六进制颜色代码（如 #18a96e）
增强词：exact color #18a96e, color accurate, brand color

问题 3：文字模糊或错误

解决：AI 生成的文字通常不准确，需要后期 PS 修改
或使用真实截图 + AI 增强的方式

问题 4：风格不统一

解决：在每个提示词前加上"通用设计规范"部分
使用相同的 seed 值（如果工具支持）

进阶技巧

使用参考图：如果 AI 工具支持图片参考（如 Midjourney 的 --ref），可以：

先生成一张满意的主界面图
后续图片都引用这张图作为风格参考
确保整套图片风格统一

分层生成：对于复杂界面，可以分层生成后合成：

先生成背景和布局
再生成具体的 UI 元素
使用 Photoshop 或 Figma 合成

✅ 检查清单

生成图片后，请检查以下项目：

[ ] 所有图片尺寸符合规范
[ ] 文件格式为 WebP
[ ] 文件大小合理（单张 < 500KB）
[ ] 颜色符合品牌规范（翠绿色 #18a96e）
[ ] 中文文字清晰可读
[ ] 界面元素位置准确
[ ] 图片已放入 docs-site/public/ 目录
[ ] 文档中的占位符已替换
[ ] 图片加载正常，无 404 错误

📞 需要帮助？

如果在生成图片过程中遇到问题：

检查提示词是否完整复制
尝试不同的 AI 工具
调整提示词中的细节描述
联系开发者获取真实截图作为参考

官方联系方式：

微信公众号：RayChart（回复 zipoly）
官方网站：https://zipoly.raychart.cn

文档版本：v2.0
最后更新：2026-05-31
作者：Zipoly 开发团队

Zipoly 文档配图 — AI 文生图提示词 ​

🎨 通用设计规范（所有图片必须遵循） ​

视觉风格 ​

布局结构 ​

导航图标（从上到下） ​

📸 图片 1：软件主界面 screenshot-overview.webp ​

📸 图片 2：压缩优化主界面 screenshot-optimize.webp ​

📸 图片 3：压缩结果对比弹窗 screenshot-compare.webp ​

📸 图片 4：格式转换界面 screenshot-convert.webp ​

📸 图片 5：3D 查看器界面 screenshot-viewer.webp ​

📸 图片 6：时间光照效果对比 screenshot-lighting.webp ​

📸 图片 7：系统设置页面 screenshot-settings.webp ​

📸 图片 8：批量压缩进度界面 screenshot-batch.webp ​

📸 图片 9：模型预览弹窗 preview-mesh.webp ​

📸 图片 10：文件选择界面 select-mesh.webp ​

📸 图片 11：首页 Hero 图 / OG 分享图 og-image.webp ​

使用建议 ​

🎯 使用指南 ​

1. 图片生成工具推荐 ​

2. 图片文件管理 ​

3. 图片优化处理 ​

4. 文档中引用图片 ​

5. 图片占位符替换清单 ​

🔧 技术细节说明 ​

色彩系统 ​

字体系统 ​

圆角规范 ​

阴影规范 ​

📝 提示词优化建议 ​

如果生成的图片不符合预期 ​

进阶技巧 ​

✅ 检查清单 ​

📞 需要帮助？ ​

Zipoly 文档配图 — AI 文生图提示词

🎨 通用设计规范（所有图片必须遵循）

视觉风格

布局结构

导航图标（从上到下）

📸 图片 1：软件主界面 `screenshot-overview.webp`

📸 图片 2：压缩优化主界面 `screenshot-optimize.webp`

📸 图片 3：压缩结果对比弹窗 `screenshot-compare.webp`

📸 图片 4：格式转换界面 `screenshot-convert.webp`

📸 图片 5：3D 查看器界面 `screenshot-viewer.webp`

📸 图片 6：时间光照效果对比 `screenshot-lighting.webp`

📸 图片 7：系统设置页面 `screenshot-settings.webp`

📸 图片 8：批量压缩进度界面 `screenshot-batch.webp`

📸 图片 9：模型预览弹窗 `preview-mesh.webp`

📸 图片 10：文件选择界面 `select-mesh.webp`

📸 图片 11：首页 Hero 图 / OG 分享图 `og-image.webp`

使用建议

🎯 使用指南

1. 图片生成工具推荐

2. 图片文件管理

3. 图片优化处理

4. 文档中引用图片

5. 图片占位符替换清单

🔧 技术细节说明

色彩系统

字体系统

圆角规范

阴影规范

📝 提示词优化建议

如果生成的图片不符合预期

进阶技巧

✅ 检查清单

📞 需要帮助？