XingfenD/teamai-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
teamai-test/.teamai/skills/common/gpt-image-2/references/ui-mockups/live-commerce-ui.md
T

8.5 KiB
Raw Permalink Blame History

电商直播 / 社交直播 UI 样机模板

本文件用于生成“人物肖像 + 直播平台叠加界面”的复杂视觉结果。

适用于：

  • 电商直播界面
  • 社交媒体直播截图
  • 主播带货样机
  • 聊天气泡 + 礼物弹窗 + 商品卡片的直播 UI 合成图

使用规则

这个模板的关键点不是固定某一个主播，而是把画面拆成一套稳定结构，让用户可以：

  • 指定真人照片
  • 指定名人名字
  • 指定人物描述
  • 完全随机生成一个主播人设

同理，商品卡、聊天消息、背景品牌、礼物内容都可以：

  • 用户指定
  • 用默认值
  • 在合理范围内随机生成

缺失信息优先提问顺序

当用户只说“做一张电商直播 UI 样机”时，优先问：

  1. 主播来源：真人照片 / 名人名字 / 人物描述 / 随机生成
  2. 商品信息：卖什么
  3. 平台风格：更像抖音 / 小红书 / 淘宝直播 / 通用直播样机
  4. 语言：中文界面还是英文界面

如果用户不想逐项回答，可以明确提供一个“自动补全模式”：

  • 你来随机补齐次要信息
  • 仅保留用户指定的核心部分

模板 1：通用电商直播 UI 样机

📖 描述

生成逼真的社交媒体直播界面，叠加在人物肖像之上，包含可自定义的聊天消息、礼物弹窗和商品购买卡片。

📝 提示词

{
  "type": "电商直播 UI 样机",
  "goal": "生成一张高仿真的直播带货截图风格视觉图，主体是主播肖像，叠加完整直播界面元素，适合做社交传播、概念样机或带货视觉方案演示",
  "subject": {
    "source_mode": "{argument name=\"host source mode\" default=\"celebrity-name\"}",
    "reference_photo": "{argument name=\"host reference photo\" default=\"none\"}",
    "celebrity_name": "{argument name=\"host name\" default=\"Elon Musk\"}",
    "description": "{argument name=\"host portrait description\" default=\"面带微笑，半身肖像，身穿印有白色科技示意图的黑色 T 恤\"}",
    "pose": "{argument name=\"host pose\" default=\"正对镜头，轻微前倾，像在直播间讲话\"}",
    "expression": "{argument name=\"host expression\" default=\"轻松、自信、具有交流感\"}"
  },
  "scene": {
    "background_style": "{argument name=\"background style\" default=\"科技公司发布会后台 + 直播间布景\"}",
    "left_background": "左侧显示带有 '{argument name=\"left background logo\" default=\"SPACEX\"}' 文字的屏幕",
    "right_background": "右侧显示红色的 '{argument name=\"right background logo\" default=\"Tesla T logo\"}' 和一辆深色汽车",
    "lighting": "{argument name=\"lighting\" default=\"明亮、商业感、影棚级补光，同时保留直播截图感\"}"
  },
  "ui_overlay": {
    "platform_style": "{argument name=\"platform style\" default=\"通用中文直播带货平台 UI\"}",
    "top_header": {
      "host_info": "头像，名称 '{argument name=\"host name\" default=\"Elon Musk\"}'，副标题 '55.6万本场点赞'，红色 '关注' 按钮",
      "rank_badge": "带有 '全站第1名' 的金币图标",
      "viewer_stats": "3 个顶部观众头像，显示 '12.3w'、'8.6w'、'5.7w'，总计 '68.7万'，'X' 关闭按钮",
      "right_links": "'更多直播 >'，'礼物展馆 0/24'（带有蓝色 '经典' 标签）"
    },
    "mid_left_gifts": {
      "count": 2,
      "items": [
        "头像 '科技爱好者'，'送小心心'，爱心图标 x 1314",
        "头像 '星辰大海'，'送火箭'，火箭图标 x 666"
      ]
    },
    "bottom_left_chat": {
      "system_message": "37 级勋章 '宇宙漫游者 加入了直播间'",
      "message_count": 7,
      "messages": [
        "小火箭: 马斯克！未来可期！🚀",
        "future: 特斯拉Model 2什么时候出？",
        "星空梦想家: SpaceX今年能上火星吗？",
        "AI探索者: Neuralink进展如何？",
        "帅气的网友: 马总好！",
        "Mars: 第一次来你的直播，超激动！",
        "用户123: 讲讲AI吧，会取代人类吗？"
      ]
    },
    "bottom_right_product_card": {
      "hot_tag": "橙色 '热卖 x 1888'",
      "image": "{argument name=\"product image subject\" default=\"Tesla Cybertruck\"}",
      "title": "{argument name=\"product name\" default=\"特斯拉Cybertruck 电动皮卡\"}",
      "price": "{argument name=\"product price\" default=\"¥ 1,618,000\"}",
      "button": "红色 '抢' 按钮",
      "floating_animation": "半透明爱心沿右侧边缘向上浮动"
    },
    "bottom_bar": {
      "input_field": "'说点什么...'",
      "icons": ["笑脸", "三个点", "购物车", "礼物盒", "分享"]
    }
  },
  "style": {
    "visual_target": "逼真的直播截图样机，不是纯 UI 设计稿，也不是纯摄影海报，而是主播真人画面与平台界面高自然融合",
    "rendering": "真实人像摄影 + 平台叠加 UI + 商业广告级清晰度",
    "color_tone": "科技感、商业感、平台直播氛围并存",
    "composition": "竖版直播截图构图，人物占据视觉中心，UI 清晰可读，商品卡位于右下角，聊天区位于左下角"
  },
  "constraints": {
    "must_keep": [
      "主播是视觉中心",
      "直播 UI 分层清晰",
      "商品卡、聊天区、礼物区都必须出现",
      "整体像真实直播截图，而不是简单拼贴"
    ],
    "avoid": [
      "UI 文字完全不可读",
      "界面过度拥挤",
      "人物脸部畸形",
      "商品卡透视错误",
      "聊天框与背景融在一起"
    ]
  }
}

模板 2：品牌创始人带货直播样机

📖 描述

适合“品牌创始人 / 科技企业家 / 明星主理人”本人出镜的高可信直播带货场景。

📝 提示词

{
  "type": "品牌创始人直播带货样机",
  "subject": {
    "identity": "{argument name=\"host identity\" default=\"科技公司创始人\"}",
    "name": "{argument name=\"host name\" default=\"Elon Musk\"}",
    "description": "{argument name=\"host portrait description\" default=\"高可信度真人半身肖像，轻微微笑，像正在解释产品亮点\"}"
  },
  "product": {
    "name": "{argument name=\"product name\" default=\"旗舰智能电动车\"}",
    "category": "{argument name=\"product category\" default=\"科技硬件\"}",
    "price": "{argument name=\"product price\" default=\"¥ 399,999\"}",
    "selling_points": [
      "{argument name=\"selling point 1\" default=\"自动驾驶辅助\"}",
      "{argument name=\"selling point 2\" default=\"极简智能座舱\"}",
      "{argument name=\"selling point 3\" default=\"长续航\"}"
    ]
  },
  "ui": {
    "product_card": "高可信带货卡片，展示主图、标题、价格、强购买按钮",
    "chat_style": "观众围绕价格、发布时间、功能提问",
    "gift_style": "科技圈、粉丝向礼物文案"
  },
  "constraints": {
    "goal": "让整张图看起来像品牌本人真的在直播带货，而不是简单概念海报"
  }
}

模板 3：随机主播 + 随机商品自动补全模式

📖 描述

适用于用户只说“帮我做一张直播带货界面图”，但不给具体人物和商品。

📝 提示词

{
  "type": "直播带货自动补全模板",
  "mode": "auto-fill",
  "subject": {
    "host_generation_mode": "random-but-plausible",
    "description": "自动生成一个适合直播出镜的主播形象，具备明确的人设、职业感和镜头表现力"
  },
  "product": {
    "generation_mode": "random-but-coherent",
    "rule": "自动生成与主播人设和场景一致的商品，不要出现明显不协调的搭配"
  },
  "ui": {
    "chat_messages": "自动生成与商品相关、看起来像真实直播观众会说的话",
    "gift_messages": "自动生成少量礼物弹窗，增强直播氛围",
    "product_card": "自动生成合理的商品名、价格与热卖标签"
  },
  "constraints": {
    "must_feel": [
      "真实",
      "平台感明确",
      "信息丰富但不杂乱",
      "适合作为案例样机"
    ]
  }
}

如何从这个模板生成变体

变体 1：用户给照片

  • 把 subject.source_mode 改为 reference-photo
  • 用用户图片作为主体参考
  • 其他 UI 字段保留模板结构

变体 2：用户给名人名字

  • 用 celebrity-name
  • 保留描述字段作为辅助形象说明

变体 3：用户只给人物描述

  • 用 text-description
  • 让模板中的 description 成为主导字段

变体 4：用户什么都没给

  • 用 auto-fill
  • 只对核心字段发起少量必要提问
  • 其余字段可以随机补全
Reference in New Issue View Git Blame Copy Permalink