Fapuxiaoxiang Legal Liability

---
name: fapuxiaoxiang-legal-liability
description: |
  法普小象 · 法律责任分析H5工具生成器。当用户需要制作法律知识类的交互式H5页面（如饮酒纠纷、彩礼返还、合同纠纷、侵权责任等场景），包含问答式风险测评、真实判例引用、朋友圈长图分享等功能时使用此技能。
  触发词：法普小象、普法H5、责任分析工具、法律风险测评、朋友圈普法长图、判例查询H5。
agent_created: true
author: 张卓 (Zhang Zhuo)
contact: 13122207385
version: 2.2.0
license: All Rights Reserved
---

# 法普小象 · 法律责任分析H5生成器

> Author: 张卓 (Zhang Zhuo) | Contact: 13122207385 | Version 2.2.0 | © 2026 All Rights Reserved

## 概述

此技能用于快速生成法律知识类的交互式H5页面。核心流程：元典MCP查判例 → 研究司法解释 → 交叉验证裁判口径 → 构建场景问答 → 判例匹配分析 → 生成朋友圈长图 → CloudBase部署上线。

当前已支持场景：
- **共同饮酒责任分析**（`assets/template.html`）
- **彩礼返还纠纷**（`assets/bride-price-template.html`）
- **被辞退赔偿计算器**（`assets/dismiss-compensation-template.html`）← v2.1 新增
- **宠物伤人赔偿计算器**（`assets/pet-injury-template.html`）← v2.2 新增，基于民法典第1245-1251条+17个判例

## 触发条件

当用户提到以下任意关键词时使用此技能：
- 法普小象、普法H5、责任分析、法律风险测评
- 帮我做一个XXX的法律分析工具
- 朋友圈普法长图、判例查询工具
- 共同饮酒、彩礼纠纷、合同纠纷、侵权责任等法律场景的H5

## 工作流程

### 第一步：判例数据收集（想比做重要）

1. 使用华宇元典MCP工具检索真实判例：
   - `yuandian_case_vector_search` 搜索相关判例（至少10个，覆盖不同省份）
   - `yuandian_law_vector_search` 确认适用法条原文
2. 研究司法解释：查阅最高法院最新司法解释（如法释〔2024〕1号）
3. 交叉验证：最高法典型案例 vs 各地中院裁判口径，确保一致性
4. 记录每个判例的：案号、法院、案情摘要、返还比例/赔偿金额、裁判理由

### 第二步：场景问卷设计（每题必加补充框）

根据判例覆盖的裁判维度，设计5-8个核心问题：
- **登记状态**（如领证/未领证）
- **时间因素**（如共同生活时长、同居时间）
- **行为要素**（如过错方、过错行为）
- **结果要素**（如子女情况、金额大小）
- **区分题**（如区分日常消费与彩礼）

**每个问题必须提供补充输入框**，让用户自己描述未覆盖的情况。

### 第三步：构建分析逻辑（先用真实案例验证）

1. 实现评分函数，根据用户选择计算风险等级
2. **先用2-3个真实案例跑一遍算法**，验证结论是否与法院实际判决一致
3. 修正方向：如果评分跟判例矛盾，检查是否逻辑反了（如"登记结婚"是保护因素应减分而非加分）
4. 实现 `getMatchCases()` 按风险分类匹配判例（safe类只显示不返还案例，risk类只显示返还案例）

### 第四步：生成H5页面（永远不用PIL画图）

基于模板构建完整的H5页面，包含：

1. **品牌标识**: 法普小象🐘 + 版权声明
2. **进度引导**: 每题答完自动显示进度，引导用户完成全部题目
3. **分析输出**:
   - 案情相似度对比（引用真实判例）
   - 参考判例简述（案号+法院+判罚）
   - 返还/赔偿比例预判（可视化区间）
   - 建议处理方式（分场景操作指南）
4. **长图生成**: 使用 html2canvas + qrcodejs 生成带品牌头尾+二维码的朋友圈长图
5. **弹窗保存**: 全屏弹窗展示长图，长按保存，配「复制文案·去发圈」按钮

### 第五步：生成朋友圈海报（HTML+CSS渲染，不用PIL）

创建 `poster.html` 海报页：
- 600×600 正方形（朋友圈缩略图完整显示）
- 品牌色 #534AB7 紫底白字
- 二维码居中（qrcodejs生成，不用外部CDN）
- 标题 + 副标题 + 3条卖点 + 引导文字
- 底部「© 张卓 · 法普小象」版权

点「生成图片发朋友圈」→ html2canvas截图→ 弹窗显示→ 长按保存。

### 第六步：部署到CloudBase

使用 `@cloudbase/cli` 部署到腾讯云CloudBase静态托管：

```bash
tcb hosting deploy . / -e <环境ID>
```

CloudBase域名（tcloudbaseapp.com）比CloudStudio更适合微信分享。

### 第七步：生成公众号文章（简洁版，不花哨）

公众号文章只生成简洁版，**不带深色CSS科技风背景**：
- 内容结构：标题 → 正文 → 引用框 → 截图位
- 直接复制粘贴到公众号后台即可
- 由编辑者手动加粗、引用、插图
- 记录文章SHA256并写入每日存证链

## 关键设计原则（铁律）

1. **先搜后造**：动手前先搜 SkillHub / ClawHub / GitHub 有无现成技能
2. **快速迭代**：第一版像坨屎也要先上线，再慢慢改
3. **图片 > 链接**：朋友圈里存图发圈的打开率比甩链接高5-10倍
4. **一个按钮**：每个页面只留一个核心操作按钮，不要给用户选择
5. **永远不用PIL画图**：设计类图片只用HTML+CSS渲染，PIL画得又丑又浪费时间
6. **想比做重要**：做之前研究透法律依据+裁判规则，先用真实案例跑一遍算法再上线
7. **最少积分成本**：每次操作先评估是否有更省积分的路径（复用模板、用现有工具、不做重复工作）
8. **每题必须加补充框**：选项覆盖不了的情况让用户自己写，这是互动性的核心改进
9. **公众号文章只生成简洁版**：不带深色CSS，公众号编辑器不支持样式粘贴

## 已知限制

- 微信H5内长按图片无法识别二维码（需截图后用微信扫一扫）
- 微信对外部链接有「继续访问」安全拦截（不可消除，用二维码长按识别绕过）
- 微信浏览器不支持自动下载触发（走弹窗+长按路线）
- 微信域名tcloudbaseapp.com显示卡片时可能关联到WorkBuddy（无法完全控制，优先用图片传播）

## 产品矩阵规划

当前已上线：
- 共同饮酒责任分析（Day 1）
- 彩礼返还纠纷（Day 2）

待开发话题：
- 租房押金纠纷
- 网购退货纠纷
- 劳动合同纠纷
- 高空抛物责任
- 宠物伤人纠纷
- 网贷纠纷

## 版权

© 2026 张卓 (Zhang Zhuo). All Rights Reserved.
此技能产出的所有H5页面、代码和文章内容均包含作者署名。
联系方式：13122207385