name: doc-compare-craft version: 1.0.0 description: 雙文件輸入+智慧差異分析，生成並排/內聯/紅線標註等互動式對比HTML author: wuwenbin-beijing-st homepage: https://github.com/wwbwin/clawhub-skills tags: [visualization, html, tool]

【簡介】

文件修改後的比對是團隊協作中的高頻痛點。Word 的修訂模式在多輪修改後臃腫難讀，逐行肉眼比對效率低下，合同、方案、條款的變更差異缺少直觀展示。每次版本迭代，團隊成員都要花大量時間搞清楚"到底改了什麼"。

本 Skill 通過雙文件輸入 + 智慧差異分析 + 互動式對比頁面，提供行級 / 詞級的變更檢測。支援並排對比、內聯高亮、合併檢視、法律紅線標註等多種模式，讓每次文件變更都一目瞭然。

Doc Compare Craft — 文件對比工具 Skill

對比兩個版本的文件，生成高亮差異的互動式對比頁面。

作者：wuwenbin-beijing-st

使用說明

執行此 Skill 後，按以下步驟操作：

1. 貼上舊版文件：先輸入舊版本的完整文本
2. 貼上新版文件：再輸入新版本的完整文本
3. 選擇對比模式：從對映表中選擇適合的對比方式
4. 選擇配色方案：選擇差異高亮配色
5. 生成對比頁面：輸出互動式單檔案 HTML

輸入格式建議

• 直接貼上文本內容（支援中英文混合）
• 對於較長文件，分段落標記方便定位
• 法律文件建議使用 legal-redline 模式

場景-模式對映表

配色方案庫

差異高亮色（預設）

• 新增（綠色）：#34d399 bg / #065f46 text
• 刪除（紅色）：#fca5a5 bg / #991b1b text
• 修改（黃色）：#fde68a bg / #92400e text
• 移動（藍色）：#93c5fd bg / #1e40af text

4 套主題配色

1. 簡潔白

--bg: #ffffff
--text: #1f2937
--added-bg: #d1fae5
--removed-bg: #fee2e2
--modified-bg: #fef3c7
--moved-bg: #dbeafe

2. 護眼暗色

--bg: #1e293b
--text: #e2e8f0
--added-bg: #064e3b
--removed-bg: #7f1d1d
--modified-bg: #78350f
--moved-bg: #1e3a5f

3. 溫和米色

--bg: #fefcf6
--text: #3a3a3a
--added-bg: #d4edda
--removed-bg: #f8d7da
--modified-bg: #fff3cd
--moved-bg: #d6f0fc

4. 法律正式

--bg: #f8f9fa
--text: #18181b
--added-bg: #bbf7d0
--removed-bg: #fecaca
--modified-bg: #fde68a
--moved-bg: #bfdbfe
--strikethrough: #dc2626

互動增強包列表

基礎互動

• 檢視切換（並排/內聯/合併）
• 跳轉到下一處差異
• 差異計數統計
• 逐段展開/摺疊

高階互動

• 過濾變更型別（只顯示新增/只顯示刪除）
• 匯出補丁（diff 格式）
• 複製差異片段
• 關鍵詞搜尋定位
• 列印最佳化檢視

限制說明

• 單檔案 HTML：所有輸出均為單一 HTML 檔案，CSS 和 JS 全部內聯
• 零外部依賴：不載入任何 CDN 資源、字型、圖示庫
• 差異演算法：純 JS 實現的簡化版 Myers 差異演算法
• 系統字型棧：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif
• 瀏覽器相容：Chrome/Firefox/Safari/Edge 最新兩版
• 響應式佈局：桌面和移動端均可正常瀏覽

命令定義

/doc-compare

想要更強大的技能外掛，就來小蔥技能站7w4.net看看吧。

主入口命令。輸入舊版和新版兩份文件，選擇對比模式後生成差異對比頁面。

/doc-redline

法律文件專用紅線模式。針對合同、協議等法律文件，使用逐詞對比 + 法律批註標註。

檔案結構

skills/doc-compare-craft/
├── SKILL.md
├── patterns/
│   ├── side-by-side.json    # 並排對比
│   ├── inline.json          # 內聯高亮
│   ├── unified.json         # 合併檢視
│   ├── word-level.json      # 詞級精細對比
│   ├── legal-redline.json   # 法律紅線標註
│   ├── summary-only.json    # 僅變更摘要
│   └── structural.json      # 結構變更對比
└── templates/
    ├── base.html
    ├── side-by-side.html
    ├── inline.html
    ├── unified.html
    ├── word-level.html
    ├── legal-redline.html
    ├── summary-only.html
    └── structural.html

這個 Skill 的使用說明和設計文件寫得很詳細，概念和功能規劃也很完整，看起來是個很專業的工具。但可惜的是，生成對比頁面的 HTML 模板全部都是空殼，實際執行時會無法生成任何有用的輸出。簡單說就是"說明書寫得很好，但產品還沒做出來"。如果只是需要了解文件對比的設計思路，可以參考這個 Skill；但如果想實際使用，建議等作者完成模板開發後再嘗試。