HandDraw Skill - 手绘图生成器

目标

将输入文档转换为高质量手绘风格的 HTML 认知图,稳定输出类似 Napkin AI / Excalidraw 的效果。

核心特征:

• ✅ 手绘边框和箭头 (RoughJS)
• ✅ 彩色模块标签区分
• ✅ 对话示例展示
• ✅ 图标系统
• ✅ 导出功能 (PNG/JPEG)
• ✅ 单文件 HTML,可直接打开

工作流程

用户文档
    ↓
[Phase 1] 内容理解 → Semantic JSON
    ↓
[Phase 2] 布局决策 → Layout JSON + 布局类型
    ↓
[Phase 3] HTML 渲染 → 使用模板生成完整 HTML
    ↓
[Phase 4] 质量检查 → 验证输出完整性

Phase 1: 内容理解

从输入文档提取语义结构,输出 Semantic JSON:

{
  "title": "文档主标题",
  "subtitle": "副标题(可选)",
  "tagline": "一句话标语(可选)",
  "core_message": "核心观点/结论",
  "sections": [
    {
      "id": 1,
      "title": "模块标题",
      "color": "blue",
      "summary": "模块摘要",
      "description": "详细描述",
      "dialog": {
        "you": "用户可能问的问题",
        "ai": "AI 可能的回答"
      },
      "icon": "🧠"
    }
  ],
  "flow_steps": [
    {
      "title": "步骤标题",
      "description": "步骤说明",
      "icon": "🎯"
    }
  ],
  "conclusions": [
    {
      "title": "结论区块标题",
      "items": ["要点1", "要点2"]
    }
  ]
}

提取规则

1. title: 文档主标题或核心主题
2. subtitle: 副标题,补充说明
3. tagline: 一句话标语,高亮显示
4. core_message: 用一句话概括文档最重要的信息
5. sections: 识别 3-7 个关键模块(过多则合并/摘要)
• 每个模块包含: 标题、颜色、摘要、描述、对话示例、图标
6. flow_steps: 如果有流程内容,提取步骤
7. conclusions: 行动建议或关键结论

颜色映射

Phase 2: 布局决策

根据 Semantic JSON 自动选择最合适的图形结构:

布局类型选择指南

布局选择规则

IF sections 有明确顺序/步骤 → flow
IF sections 有层级关系 → tree
IF sections 有对比关系 → compare
IF sections 有时间信息 → timeline
IF sections 有分类/评估 → matrix
ELSE → radial (默认)

输出 Layout JSON

{
  "layout": "radial",
  "canvas_width": 1400,
  "canvas_height": 1800,
  "title": "AI第二大脑",
  "nodes": [
    {
      "id": "center",
      "type": "center",
      "label": "AI智囊团",
      "icon": "🤖",
      "x": 700,
      "y": 400
    },
    {
      "id": "node1",
      "type": "card",
      "label": "思维模式校准",
      "color": "blue",
      "x": 200,
      "y": 200
    }
  ],
  "edges": [
    {"from": "center", "to": "node1"}
  ]
}

Phase 3: HTML 渲染

必须使用完整模板,参考 references/handdraw-template.html

技术要求

必须包含:

• ✅ RoughJS 本地静态文件 (手绘风格)
• ✅ html2canvas 本地静态文件 (导出功能)
• ✅ Google Fonts (马善政 + Patrick Hand)
• ✅ 固定导出按钮 (右上角)
• ✅ 导出选项面板 (PNG/JPEG/SVG)
• ✅ 导出提示 Toast

手绘风格参数:

• roughness: 1.5 (标准手绘感)
• bowing: 1 (轻微弯曲)
• strokeWidth: 2 (线条粗细)

页面结构

┌─────────────────────────────────────┐
│  [导出按钮]                          │
│                                     │
│  ┌───────────────────────────────┐  │
│  │         标题区域               │  │
│  │  主标题 + 副标题 + 标语        │  │
│  ───────────────────────────────┘  │
│                                     │
│  ┌───────────────────────────────┐  │
│  │         主区域                 │  │
│  │  ┌─────┐    ┌─────┐          │  │
│  │  │模块1│ ←→ │模块2│          │  │
│  │  └─────┘    └─────┘          │  │
│  │     ↕          ↕              │  │
│  │  ┌─────┐    ┌─────┐          │  │
│  │  │模块3│ ←→ │中心 │          │  │
│  │  └─────┘    └─────┘          │  │
│  ───────────────────────────────┘  │
│                                     │
│  ┌───────────────────────────────┐  │
│  │         流程区域               │  │
│  │  步骤1 → 步骤2 → 步骤3        │  │
│  └───────────────────────────────┘  │
│                                     │
│  ┌──────┐ ┌──────┐ ┌──────┐       │  │
│  │结论1 │ │结论2 │ │结论3 │       │  │
│  └──────┘ └──────┘ └──────┘       │  │
└─────────────────────────────────────┘

模块卡片结构

每个模块卡片必须包含:

1. 彩色标题栏 - 背景色区分模块类型
2. 描述文字 - 1-2 行摘要
3. 对话示例 (可选) - 展示用户和 AI 的交互
4. 图标 - 右上角或左上角

<div class="module-node module-blue">
    <div class="module-title">1. 思维模式校准</div>
    <div class="module-desc">帮你识别思维盲区...</div>
    <div class="dialog">
        <div class="you">你：我是不是忽略了什么？</div>
        <div class="ai">AI：你可能低估了...</div>
    </div>
    <div class="module-icon">🧠</div>
</div>

渲染步骤

1. 创建画布: 1400px 宽度,根据内容计算高度
2. 布局节点: 根据 layout 类型计算坐标
3. 绘制边框: RoughJS 手绘风格
4. 绘制连接: 箭头线条
5. 填充内容: 标题、描述、对话
6. 添加导出功能: 按钮 + 面板 + Toast

Phase 4: 质量检查

生成后必须验证:

检查清单

• [ ] HTML 文件可正常打开
• [ ] RoughJS 边框正常渲染
• [ ] 箭头连接正确
• [ ] 导出按钮可见且可用
• [ ] 字体加载正常
• [ ] 无 JavaScript 错误
• [ ] 模块颜色区分清晰
• [ ] 内容完整无遗漏

常见问题

图标映射

{
  "风险": "⚠️",
  "目标": "🎯",
  "AI": "🤖",
  "增长": "",
  "流程": "➡️",
  "决策": "♟️",
  "想法": "💡",
  "团队": "👥",
  "时间": "",
  "金钱": "💰",
  "安全": "🔒",
  "数据": "📊",
  "用户": "👤",
  "系统": "⚙️",
  "学习": "",
  "思维": "🧠",
  "复盘": "📋",
  "项目": "🏗️",
  "战略": "♟️",
  "认知": "💭"
}

输出要求

最终输出:

1. 完整的 HTML 文件: 可在浏览器中直接打开
2. 文件位置: 保存在用户指定路径或当前工作目录
3. 文件名格式: handdraw-YYYY-MM-DD-主题.html
4. 文件大小: 通常 15-30KB

参考资源

• 完整模板: references/handdraw-template.html (必须参考)
• 质量检查清单: references/quality-checklist.md (生成后验证)
• RoughJS 指南: references/roughjs-guide.md
• 布局算法: references/layout-algorithms.md
• 字体资源: references/fonts.md
• 生成脚本: scripts/generate_handdraw.py