法普小象 · 法律责任分析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静态托管：

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