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

主入口命令。输入旧版和新版两份文档，选择对比模式后生成差异对比页面。

/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；但如果想实际使用，建议等作者完成模板开发后再尝试。