手绘转飞书画板

解决的具体问题

把随手画在纸上或白板上的结构图、脑图、流程草图拍下来后，通常面临三个麻烦：图片里的线条和文字没法直接编辑，想调整某个节点必须重新画一遍；从零用代码生成专业结构图，要先写 HTML/CSS，再转成 SVG，最后还要想办法塞进飞书文档，中间步骤多、容易出错；不同平台的格式不通用，在手机上打开的文档，回到电脑上可能排版全乱。

这个技能要解决的就是这三个问题：手绘图片和文字描述两种输入，统一走同一条转换链路，最终交付物是可以直接在手机上编辑的飞书云文档画板 URL，不用在多个工具之间来回倒腾。

技能如何工作

技能的核心是一条四步流水线：识别 → 生成 HTML → 转 SVG → 写入飞书画板。

输入分两种类型：

• 手绘图片：用户上传照片或截图，技能用 file 工具读取图片，先做结构化识别。识别必须覆盖节点、连线、箭头方向、分组区域、文字标注和层级关系六个维度，不能漏掉任何一个元素。
• 文字描述：用户直接用自然语言描述结构，比如"画一个用户增长飞轮"，技能跳过图片识别，直接进入 HTML 生成阶段。如果描述模糊，会先追问一两句澄清。

两种输入最终都调用 diagram-maker 技能生成专业结构图 HTML，再通过脚本或手动构造 SVG，最后整体嵌入飞书文档的 <whiteboard> 标签。交付时只返回一个飞书文档链接，中间产物不展示。

适用边界与注意点

这个技能有几个明显的边界：

• 依赖 diagram-maker 技能。如果未安装，会回退到手动构造 SVG，但效果不如 diagram-maker 生成的图专业。
• 飞书画板不支持复杂 CSS，SVG 必须用 presentation attributes（比如 fill="..."）而不是 style="fill:..."。
• 手绘输入的识别完整度直接影响最终效果。原图中标注"未列全"或"……"的地方，会在生成的图中标注"（未列全）"，但不会替用户补充缺失内容。
• 交付的飞书画板 URL 需要用户双击画板区域才能进入编辑模式，技能在回复中必须提示这一点。

适合的场景：线下头脑风暴后快速把手绘草图变成可分享、可协作的结构图；或者把脑子里的概念用文字说出来，直接生成飞书文档里可编辑的脑图。不适合的场景：需要像素级还原原图设计、或生成包含复杂交互逻辑的图表。