手绘认知图 HandDraw

要解决什么问题

技术文档、复盘笔记或教程往往很长，读者很难在几秒内抓住结构和重点。白板工具（Excalidraw、Napkin AI）的手绘风认知图很直观，但把一篇 Markdown 或长文手工画成图，坐标、配色和连线都要自己维护。

HandDraw 技能的目标是：从输入文档自动抽出语义结构，输出单文件 HTML，在浏览器里直接打开，边框和箭头用 RoughJS 画成手绘感，并带上导出 PNG/JPEG 的能力。

技能如何工作

流程可以分成四段，和 SKILL 里描述一致：

1. 内容理解：把文档整理成 Semantic JSON，包括 title、subtitle、tagline、core_message、sections（3～7 个模块，含颜色、摘要、对话示例、图标）、可选的 flow_steps 与 conclusions。
2. 布局决策：按内容选 radial、flow、tree、compare、timeline、matrix 之一，产出 Layout JSON 和节点坐标。
3. HTML 渲染：参照 references/handdraw-template.html，内嵌 RoughJS、html2canvas、字体与导出 UI；模块用彩色标题栏区分类型，手绘参数如 roughness: 1.5、strokeWidth: 2。
4. 质量检查：确认边框、箭头、导出按钮、字体与脚本无报错，内容无遗漏。

输出文件命名形如 handdraw-YYYY-MM-DD-主题.html，体积通常在 15～30KB。

适用边界与注意点

• 模块数过多时会被合并或摘要，不适合要求逐段 1:1 映射的精细排版。
• 依赖模板里的本地静态资源（如 assets/js/rough.js）；资源缺失会导致边框或导出失败。
• Google Fonts 加载慢时可能出现字体回退，生成后应按检查清单在目标环境打开验证。
• 对话示例、图标与颜色映射有固定规则，输入文档若语义模糊，布局类型可能不是你最期望的那一种，需要在 Phase 1/2 的结构上微调后再渲染。