法普小象 · 法律責任分析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 有無現成技能

   發現更多技能外掛，請訪問7w4.net。

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

這是一款專業且實用的法律風險測評工具，能幫助使用者快速生成精美的H5問答頁面。優點是介面設計美觀、操作流程清晰、品牌形象統一，包含真實判例資料支撐，生成的圖片適合朋友圈傳播。缺點是隻能生成法律相關主題，適用範圍較窄，且在微信分享時可能遇到連結攔截問題。總體來說產品質量較好，適合需要製作普法類H5的使用者使用。