PROMPT PLANETWeb UI

沉浸式一对一视频通话

场景模板视频通话实时语音一对一沉浸式画中画字幕AI 陪伴移动端

适用任务

以人物与环境为主画面，用悬浮控制、画中画、字幕和按需展开的文字对话，营造自然的一对一交流体验。

适合
一对一实时视频或语音交流，适合陪伴、口语练习、咨询和访谈类应用；可接入真人或明确标识身份的 AI 角色。
主要风险
示例使用静态人物照片与本地交互，不传输音视频、不生成 AI 回复；实时服务、权限、设备选择和打断能力由目标项目提供。自然的通话体验不等于隐瞒 AI 身份。

体验意图

未标注意图；可按模板正文判断是否适用。

这个模板提供什么

复用方式
按场景调整信息结构与交互；可直接采用默认设计，视觉风格按需另选。
结构与交互
提供布局与组件说明。
视觉设计
提供默认视觉参数，可按项目品牌或明确选择的风格调整。
应用后检查
提供本场景的操作检查。

整套交互预览

1 个
新窗口打开 ↗
示例适用范围

一对一实时视频或语音交流，适合陪伴、口语练习、咨询和访谈类应用；可接入真人或明确标识身份的 AI 角色。

参照页面
  • Apple FaceTime · 一对一视频通话控制

    直接参照 · 公开展示材料 · 观察于 2026-10-11

    人物主画面、画中画及悬浮通话控制的视觉组织

    公开 iPhone 使用手册；截图是原生移动界面，不是可运行 Web 客户端。

    实际查看官方通话截图；只提炼可见布局，没有操作真实 FaceTime 通话。

  • Anam · 主页人物交互预览

    直接参照 · 真实界面 · 观察于 2026-10-11

    带环境的人物预览和轻量通话入口

    公开页面，无需登录。

    隔离浏览器观察主页人物及环境、浮动通话入口；未授予设备权限或发起真实通话。

  • Anam · AI Avatar Playground

    直接参照 · 真实界面 · 观察于 2026-10-11

    人物舞台及按需 transcript 入口；未发起真实通话

    公开预览；真实通话需另按站点设备与服务要求操作。

    实际观察人物预览、Start Call、Show transcript 及角色选择；未核验通话、字幕生成或打断。

  • Apple FaceTime · 一对一视频通话控制

    适配推导 · 公开展示材料 · 观察于 2026-10-11

    Web 桌面适配、文字面板与异常恢复状态的本地扩展

    公开 iPhone 使用手册；截图是原生移动界面，不是可运行 Web 客户端。

    实际查看官方通话截图；只提炼可见布局，没有操作真实 FaceTime 通话。

按模板应用无需访问来源网站；需要研究未覆盖组件时，可从这些入口继续查证。

应用前了解

会改变什么
  • 将一对一交流组织为人物主舞台、可隐藏画中画、悬浮控制、字幕和按需文字面板。
  • 以实际会话和设备状态绑定控制；已授权范围内接入服务，未接入部分明确作为演示。
数据条件与适用限制
  • 提供目标页面、对话对象及真人或 AI 身份、媒体与会话接口、设备权限及文本消息能力。
  • 明确字幕来源、全双工或按住说话的交互方式，以及服务是否支持打断；只采用目标实际需要且可实现的能力。

应用后的页面

主题

人物画面优先；深色边缘遮罩承托白色字幕，半透明浮层容纳控制。薄边线、柔和圆角和克制的浅绿色强调，与红色结束动作区分。；可选：采用场景默认并保留项目品牌

布局 · 人物主舞台

一位对话对象占据主画面，保留原有环境与自然比例。竖屏填充视口；宽屏按源画幅适配，避免拉伸或裁掉面部。姓名和状态位于上方，字幕与操作位于下方，画中画避开面部与字幕。

布局 · 按需文字对话

默认保留视频舞台；文字入口展开桌面侧面板或手机底部面板。长对话在面板内部滚动，关闭后回到原通话上下文。

组件 · 主画面与身份

使用实际视频轨道，保留人物和环境；头像作为纯语音、未接通或无画面的替代。姓名约22–24px，状态12–13px；真人、AI 和演示身份按实际情况呈现。

组件 · 自己的画中画

约96–140px宽的圆角小窗，可隐藏而不关闭摄像头；关闭摄像头则显示明确占位。镜头切换反映实际设备成功状态，单镜头时不提供无效切换。

组件 · 悬浮控制区

麦克风、摄像头、可用时的镜头切换、文字和结束动作集中于底部浮层。图标配短标签，触摸目标不小于44px；静音与镜头关闭同时改变图标、文字和可访问状态。结束动作使用红色，与普通操作分隔。

组件 · 字幕与交流状态

字幕16–18px、舒适行距，置于深色半透明底板，位于控制区上方且不遮脸；可开关。倾听、回应和打断只在服务确实支持时呈现，不展示模型、token 或无意义的持续忙碌动画。

组件 · 文字面板

保留当前对话记录和未发送草稿；提交结果区分本地演示、发送中、已发送和失败。输入与关闭入口键盘可达，退出面板恢复触发位置的焦点。

组件 · 通话状态与恢复

连接中、已接通、重连、纯语音、设备权限受限与结束状态有明确文字和下一步。重连保留对话及设备选择；结束停止媒体与计时。服务事实驱动状态，演示则明确使用模拟入口。

项目覆盖

按 web-ui-workflows apply-ui-template 合并有效设计。品牌、媒体画幅、通话对象身份、设备权限和会话生命周期取自目标产品；保留已选场景的主舞台与轻量控制关系。

应用后检查

  • 宽屏与手机竖屏中，人物自然比例、姓名、状态、字幕及结束操作均可辨；控件不遮挡主要面部，页面无外层横向溢出。
  • 实际操作静音、摄像头、可用时的镜头切换、画中画隐藏和字幕开关，核对真实媒体状态与可访问状态；隐藏预览不等于停止采集。
  • 文字面板可打开、提交、关闭并恢复焦点；断线期间不能误报发送成功，草稿和历史按会话契约保留。
  • 连接、重连、权限受限、纯语音与结束均有可执行下一步；结束确实释放目标产品的媒体资源。AI 倾听、回应与打断以真实服务事件核验。
  • 模板示例以本地模拟验证布局和控制反馈；应用到产品后另验证真实音视频与消息链路，静态图与定时器不能充当实时能力证据。

Prompt 模板

1 条
中文默认
## 执行方式

本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。

## 任务

使用 `web-ui-workflows apply-ui-template`，将「沉浸式一对一视频通话」应用到以下页面。

目标仓库：<repo>
目标页面：<URL>
对话对象、媒体服务与会话能力：<call-contract>
库内来源：library/webui/assets/immersive-video-call/index.html
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/immersive-video-call.json

以人物及其环境作为主画面，让用户把注意力留给一对一交流。自己的画中画可以隐藏；麦克风、摄像头、可用时的镜头切换、文字和结束动作集中在轻量悬浮控制区。字幕位于控制区上方，文字对话按需展开。手机使用竖屏沉浸布局，桌面依源画幅保留自然比例，避免控件与主要面部相互遮挡。

读取当前定义、组件、数据条件与 acceptance，按 skill 合并本次有效设计。采用深色半透明表面、清晰白字、柔和圆角和克制状态色；保留项目品牌。自然的交流体验与真实身份同时成立：AI 角色有清楚但不抢眼的身份说明。

连接、设备控制、字幕、消息和结束状态由实际服务驱动；重连保留对话与设备选择，结束释放媒体。AI 倾听、回应、打断及按住说话只在目标服务支持且本次需要时接入。示例的静态照片、模拟状态选择器与本地消息只用于展示，不直接作为产品的通话实现。

用真实浏览器完成宽窄屏的通话与文字交互、设备拒绝和断线恢复验证，区分 UI 演示与真实媒体链路的读数。无需重新访问来源商业网站；缺失能力按已授权范围处理并明确未验证部分。本次应用不授予发布、部署或共享模板修改许可。

审核现有页面

只审核，不修改
## 执行方式

本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。

## 任务

使用 `web-ui-workflows review-ui`，审核目标页面是否落实「沉浸式一对一视频通话」当前定义。

目标仓库：<repo>
目标页面：<URL>
对话对象、媒体服务与会话能力：<call-contract>
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/immersive-video-call.json

读取定义及项目有效设计，按所选范围审核人物主舞台、画中画、悬浮控制、字幕、文字面板与状态恢复，保留真实身份与项目覆盖。宽窄屏实际操作控制、输入文字、隐藏画中画、关闭并返回、结束与重新进入；核对自然比例、面部和字幕遮挡、键盘焦点及长消息。

应用到产品时核对设备和会话的真实读数：隐藏预览与关闭摄像头不同，重连不误报已发送，结束停止采集和播放；AI 倾听、回应和打断来自真实服务。审核模板示例时只判断声明的本地交互，不把静态照片与模拟状态当实时通话证据。

按当前定义的 acceptance 报告符合、合理例外、未落实及未核实，分别给出观察证据和复现动作。无需访问来源商业网站；仅审核，不自动修改页面或共享模板。