AI 虚拟庭审系统生成技能
概述
基于已验证的「AI 虚拟庭审 DEMO」单文件 HTML 应用，自动生成或复现模拟法庭庭审演示。输出为可直接在浏览器打开的单文件 HTML（CSS/JS 全内联，无需构建），含完整样式、交互逻辑与剧本数据。
- 模板文件：
~/.workbuddy/skills/AI虚拟庭审SKILL/assets/template.html（完整可运行 Demo，约 560 行） - 剧本与数据说明：
~/.workbuddy/skills/AI虚拟庭审SKILL/references/demo_script.md（ROLES / STAGES / EVIDENCES / LAWS / STEPS 五大数据结构）
何时使用本技能
- 用户要求构建 / 复现「虚拟庭审」「模拟法庭」「庭审演示 Demo」「AI 模拟开庭」
- 法律科技产品的法庭场景可视化演示（售前、培训、普法）
- 用户提到「法庭布局」「庭审环节」「举证质证」「角色对话」「语音播报」等关键词
核心约束（最高优先级，必须严格遵守）
> 所有庭审剧情、法条、当事人均须基于真实公开案例，不虚构、不臆造。
- 不得编造当事人信息 —— 全部使用脱敏演示身份（如「原告甲供货有限公司」「被告乙采购商」），禁止出现真实姓名、住址、身份证号。
- 不得杜撰法条 —— 引用的《民事诉讼法》《民法典》条文须为现行有效真实条文，可在
references/demo_script.md的LAWS中查证，条号与内容须与权威文本一致。 - 剧情基于真实公开案例 —— 演示剧本以已公开生效买卖合同纠纷判决提炼，事实/证据/焦点可溯源；切换其他案由时须替换为真实案例要素。
- 明确标注辅助性质 —— 页面须常驻风险提示「本演示为 AI 模拟，仅供产品展示，不构成真实庭审或法律意见」。
- 场景须明确地理归属 —— 页面顶部须标注具体国家与城市 + 法院（如「中国广州市 · 广州市中级人民法院 虚拟庭审演示」），禁止仅写泛指「某地法院」。
六大功能工作流
① 法庭布局与角色体系
- 空间布局（庄重法庭风格）：顶部居中「审判席」（审判长 + 审判员/人民陪审员），左下「原告席 + 原告代理律师席」，右下「被告席 + 被告代理律师席」，前侧「书记员席」，预留「证人/鉴定人席」。
- 七类角色席位显示姓名/身份铭牌；当前发言角色席位高亮 + 聚光灯动画。
- 中央天平/法槌 SVG 装饰（纯矢量，无外链）。
② 庭审流程环节（严格按《民事诉讼法》顺序）
- 庭前准备：书记员宣布法庭纪律、核对到庭情况。
- 法庭调查：原告宣读起诉状与诉求 → 被告答辩。
- 举证质证：原告依次出示证据 → 被告逐项质证；被告反证 → 原告质证。
- 法庭辩论：双方代理律师发表意见 → 互相辩论。
- 最后陈述：原被告依次陈述。
- 休庭与宣判：审判长归纳争议焦点、当庭宣判。
- 每个环节可独立触发，时间线实时高亮 + 已完成环节打勾。
③ 交互与发言呈现
- 对话依次推进：「下一步 / 上一步 / 自动播放 / 暂停」控制；自动播放按真实语速节奏推进。
- 发言展示：法庭文字气泡（带角色配色 + 姓名标识）；可选语音播报（Web Speech API，
zh-CN，浏览器不支持时自动降级为纯文字）。 - 证据联动：点击证据条目 → 旁侧「证据展示区」弹出证据详情（文书文字 / 证明目的）。
- 进度可视化：顶部庭审环节时间线 / 进度条。
④ 辅助信息区
- 右侧「案件信息卡」：案号、案由、标的额、当事人、承办审判组织。
- 底部「法条依据」折叠区：展示本环节引用的真实法条（如《民事诉讼法》第 138、141、142 条，《民法典》第 509、577、626 条），标注条文内容。
- 「风险提示」角标：AI 模拟声明常驻右上角。
数据与剧本结构（references/demo_script.md）
全部演示内容由 5 个 JS 对象数组集中管理，替换案例只需改数据、不动结构：
| 对象 | 作用 | 关键字段 |
|---|---|---|
ROLES |
角色铭牌与配色 | judge / plaintiff / defendant / plaintiffLaw / defendantLaw / clerk（name/title/role） |
STAGES |
六大环节定义 | key / name |
EVIDENCES |
证据清单 | tag / name / prove（证明目的）/ body（文书内容） |
LAWS |
真实法条库 | 民诉138 / 民诉141 / 民诉142 / 民法典509 / 民法典577 / 民法典626（条号 + 条文内容） |
STEPS |
庭审台词汇编 | stage（环节序号）/ who（角色）/ text（台词）/ law（引用法条键）/ evi（关联证据键） |
> 注意：以上法条为通用民事诉讼基础库示例。真实部署应接入威科先行 / 北大法宝 / 法研等权威法条库，并按最新修订版校准条文。
设计系统
| 项 | 值 |
|---|---|
| 主色 | 深蓝 #0a1f44 / #13294b |
| 强调色 | 司法金 #c9a86a |
| 点缀色 | 沉稳酒红 #7a2230 |
| 角色配色 | 审判方金 / 原告蓝 #2a6fb0 / 被告酒红 #a23b3b / 书记员灰 #6b7280 |
| 字体 | 衬线（「方正小标宋 / 思源宋体」风格回退） |
| 风格 | 庄重、专业、司法感 |
| 布局 | 桌面法庭俯视双栏（审判席在上、原被告分居下左右）；≤768px 自动折叠单列堆叠，控制栏固定底部 |
| 技术 | 纯前端单文件 HTML；CSS transition / requestAnimationFrame；Web Speech API；无第三方 CDN，离线可用；含 @media print A4 庭审记录风格 |
自定义指南（复现 / 改造系统）
- 复制
assets/template.html到目标目录并重命名（如AI虚拟庭审DEMO.html）。 - 替换场景地理归属：全局替换页面标题 / Header 场景文字（搜索
广州市中级人民法院），可改为其他城市法院，如「中国广东省中山市 · 中山市第一人民法院」。 - 替换案例剧本：修改
ROLES（当事人名称）、EVIDENCES（证据内容）、STEPS（台词）；切换案由时同步更新LAWS引用键与STEPS中的law引用。 - 扩展证据 / 环节：在
EVIDENCES/STAGES数组追加条目，并在STEPS中补充对应stage的台词。 - 保持合规约束不删除：顶部风险提示角标、法条真实可查、当事人脱敏。
- 换配色：仅调整
:rootCSS 变量，不动结构逻辑。
注意事项
- 模板为单文件 HTML，CSS/JS 内联，无需 npm / 构建步骤，浏览器直接打开。
- 演示模式通过
STEPS数组驱动，点击「自动播放」按节奏逐句推进，便于快速体验。 - 生产环境需接入真实案件数据、权威法条库后端，并将当事人信息脱敏存储。
- 本技能产出的系统定位为「法律科技演示工具」，任何结论须经持牌法律工作者审核后方可用于真实场景。
