Docs
Cover Generation Design

Cover Generation Design

Prompt for Cover Generation

all prompts generated by ChatGPT IOS

basic code generated by v0

UI 布局设计

|----------------------------------|
|            顶部导航               |
|----------------------------------|
|   左侧类型选择  | 预览窗口 | 设置面板 |
|----------------------------------|
|        底部生成与导出按钮           |
|----------------------------------|

左侧类型选择区

  • 类型按钮组: Vlog、产品、编程、心情、旅行、游戏
  • 选中状态高亮

中间预览窗口

  • Canvas 实现实时封面绘制
  • 支持缩放与动态预览

右侧设置面板

  • 标题输入框
  • 滑块控制特效（光晕、粒子等）
  • 字体样式与位置设置

底部操作按钮区

  • 生成封面按钮
  • 下载导出按钮

交互流程

选择类型

  • 点击类型按钮，切换背景与视觉元素
  • 预览窗口实时更新

输入标题与设置样式

  • 输入标题内容，拖动调整位置
  • 选择字体与样式

调整特效

  • 使用滑块控制光晕与粒子强度
  1. 生成与导出
  • 点击生成按钮预览封面
  • 提供下载功能

组件划分与技术实现建议

组件名称描述技术实现
TypeSelector类型选择组件ShadCN Button Group
PreviewCanvas封面预览Canvas API
SettingsPanel设置面板ShadCN Input + Slider
TitleEditor标题编辑组件Draggable + Tailwind
GenerateButton生成按钮ShadCN Button
Project Design