【简介】
保险条款的阅读体验是出了名的差——长达数十页的合同文本、密集的专业术语、保障责任和免责条款分散在不同章节、理赔条件流程不清晰。客户买完保险往往不知道自己保了什么、什么情况不赔、出险了该怎么操作。代理人的口头讲解也不够系统，容易产生理解偏差。
本 Skill 将复杂的保险条款转化为可视化的交互式知识图谱，包含保障责任图谱、免责条款网络、理赔流程图、产品对比、场景模拟、术语词典、保单时间轴 7 种模式。通过纯 SVG 绘制节点和连线，点击节点查看详情、路径追踪、场景模拟，让晦涩的合同条款变得一目了然。
Insurance Viz Craft — 保险条款可视化图谱 Skill
将复杂的保险条款转化为可视化的交互式知识图谱，帮助理解保障范围、责任免除、理赔流程等。
作者：wuwenbin-beijing-st
使用说明
运行此 Skill 后，按以下步骤操作：
- 粘贴保险条款：粘贴保险合同、条款说明的原文文本
- 选择可视化类型：从映射表中选择适合的可视化方式
- 选择配色方案：选择保险行业配色主题
- 生成图谱：输出交互式单文件 HTML
输入格式建议
- 粘贴完整的保险条款文本（可分批粘贴）
- 标明条款名称、保险公司名称
- 指明是否需要多产品对比
场景-模式映射表
| 保险业务场景 | 推荐模式 | 特点 |
|---|---|---|
| 了解保障范围 | coverage-map（保障责任图谱） | 中心辐射图，展示保障项目及条件 |
| 了解免责范围 | exclusion-web（免责条款网络） | 网络图展示所有免责情形及关联 |
| 出险理赔 | claim-flow（理赔流程图） | 流程图展示报案→审核→赔付全流程 |
| 选购产品 | product-compare（产品对比） | 多产品并排对比保障项、价格、免责 |
| 假设验证 | scenario-sim（场景模拟） | 用户输入场景，AI 判断理赔可能性 |
| 理解术语 | term-glossary（术语词典） | 术语列表 + 关联图谱，点击查看解释 |
| 保单管理 | policy-timeline（保单时间轴） | 缴费、等待期、保障期、续费等时间节点 |
配色方案库
保险行业配色
- 信任蓝（主体/保障）：
#1a73e8 - 保障绿（确定性/已覆盖）：
#22c55e - 警示橙（等待/注意）：
#f59e0b - 免责红（风险/不覆盖）：
#ef4444
节点颜色说明
- 保障责任：绿色系
#22c55e→#16a34a→#15803d - 免责条款：红色系
#ef4444→#dc2626→#b91c1c - 理赔流程：蓝色系
#3b82f6→#2563eb→#1d4ed8 - 条件/限制：橙色系
#f59e0b→#d97706→#b45309 - 术语/定义：紫色系
#8b5cf6→#7c3aed→#6d28d9
4 套主题配色
1. 保险蓝
--bg: #f0f7ff
--text: #1e293b
--card-bg: #ffffff
--card-border: #bfdbfe
--link-line: #93c5fd
--node-coverage: #22c55e
--node-exclusion: #ef4444
--node-process: #3b82f6
2. 稳重大气
--bg: #f8fafc
--text: #0f172a
--card-bg: #ffffff
--card-border: #e2e8f0
--link-line: #94a3b8
--node-coverage: #16a34a
--node-exclusion: #dc2626
--node-process: #2563eb
3. 深色监管
--bg: #0f172a
--text: #e2e8f0
--card-bg: #1e293b
--card-border: #334155
--link-line: #475569
--node-coverage: #22c55e
--node-exclusion: #f87171
--node-process: #60a5fa
4. 纸质文档
--bg: #fefcf6
--text: #3a3a3a
--card-bg: #ffffff
--card-border: #d4d4d4
--link-line: #a3a3a3
--node-coverage: #16a34a
--node-exclusion: #dc2626
--node-process: #2563eb
交互增强包列表
基础交互
- 节点点击展开详情（弹出卡片显示条款原文）
- 路径高亮（从保障 → 条件 → 例外 → 理赔的完整路径）
- 图例筛选（按类型显示/隐藏节点）
- 缩放和平移（适用于大型图谱）
高级交互
- 场景模拟（输入"小病住院"，查看是否赔、赔多少）
- 条款原文定位（点击节点跳转到条款原文位置）
- 对比模式切换（多产品切换对比）
- 打印摘要（仅保留核心结构，打印友好）
- 问答模式（图谱 + 文字回答结合）
限制说明
- 单文件 HTML：所有输出均为单一 HTML 文件，CSS 和 JS 全部内联
- 零外部依赖：不加载任何 CDN 资源、字体、图标库
- 知识图谱：使用纯 SVG + CSS 绘制节点和连线
- 系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif
- 浏览器兼容：Chrome/Firefox/Safari/Edge 最新两版
- 响应式布局：支持画布缩放，移动端可手势操作
命令定义
/insurance-viz
主入口命令。输入保险条款文本，选择可视化类型后生成交互式知识图谱 HTML。
/insurance-compare
多产品对比分析。支持同时分析 2-4 款保险产品，生成对比图谱和差异列表。
文件结构
skills/insurance-viz-craft/
├── SKILL.md
├── patterns/
│ ├── coverage-map.json # 保障责任图谱
│ ├── exclusion-web.json # 免责条款网络
│ ├── claim-flow.json # 理赔流程图
│ ├── product-compare.json # 产品对比视图
│ ├── scenario-sim.json # 场景模拟器
│ ├── term-glossary.json # 术语词典
│ └── policy-timeline.json # 保单时间轴
└── templates/
├── base.html
├── coverage-map.html
├── exclusion-web.html
├── claim-flow.html
├── product-compare.html
├── scenario-sim.html
├── term-glossary.html
└── policy-timeline.html