AI Skills
napkin

napkin

热门

面向 Copilot CLI 的可视化白板协作工具。自动在浏览器中打开交互式白板，支持手绘草图、涂鸦和贴便签，并能将所有内容一键同步回 Copilot。Copilot 能直接识别你的画作与文字，并给出深入分析、建议与创意碰撞。

3.7万Star
4711Fork
更新于 2026/8/5
获取 Skill源代码

相关 Skills

store-data-structures8.2万frontend-dev-guidelines4.6万pymoo4.2万
SKILL.md
只读
名称
napkin
描述

面向 Copilot CLI 的可视化白板协作工具。自动在浏览器中打开交互式白板，支持手绘草图、涂鸦和贴便签，并能将所有内容一键同步回 Copilot。Copilot 能直接识别你的画作与文字，并给出深入分析、建议与创意碰撞。

Napkin — Copilot CLI 可视化白板

Napkin 为用户提供了一个基于浏览器的白板，大家可以在上面自由草绘、画示意图或添加便签，用可视化的方式梳理思路。Agent 会读取白板内容（通过 PNG 截图以及可选的 JSON 数据），并以对话方式给出分析、建议和下一步规划。

目标受众是律师、PM（产品经理）以及业务干系人——而非专业软件开发者。请保持整体语气亲和、通俗易懂，避免使用技术术语。

触发激活

当用户触发此 Skill 时——比如喊出“来个 napkin”、“打开 napkin”、“开启白板”，或者使用斜杠命令（slash command）时，请按以下步骤操作：

  1. 将随包附带的 HTML 模板拷贝到用户的桌面。

    • 模板路径相对于当前 SKILL.md 文件为 assets/napkin.html。
    • 将其复制到 ~/Desktop/napkin.html。
    • 如果 ~/Desktop/napkin.html 已存在，覆盖前先询问用户是想打开现有的白板还是重新开始。

  2. 在默认浏览器中打开它：

    • macOS：open ~/Desktop/napkin.html
    • Linux：xdg-open ~/Desktop/napkin.html
    • Windows：start ~/Desktop/napkin.html

  3. 引导用户进行下一步。 用亲切直白的话提示：

    白板已经在浏览器中为你打开啦！

随便画画、涂鸦，或者贴几个便签——怎么方便梳理思路就怎么来。

想听听我的想法时，只需点击白板上绿色的“Share with Copilot”按钮，然后回到这里跟我说一句“看看白板”。

读取白板内容

当用户说“看看白板”、“看下 napkin”、“你觉得怎么样”、“读取白板”或类似表述时，请按以下步骤操作：

步骤 1 — 读取 PNG 截图（核心主渠道）

寻找名为 napkin-snapshot.png 的 PNG 文件。按顺序检查以下路径（由于浏览器保存行为不同，默认下载路径可能有所差异）：

  1. ~/Downloads/napkin-snapshot.png
  2. ~/Desktop/napkin-snapshot.png

使用 view 工具读取该 PNG 文件。这会将图像转换为 Base64 编码数据发送给模型进行视觉识别。PNG 是 Agent 理解用户画了什么内容的主要途径——它能捕捉手绘草图、箭头、空间布局、标注、圈选或划掉的内容，以及画布上的任何元素。

如果在上述两个位置均未找到 PNG，切勿默默忽略，而是要明确告知用户：

我还没拿到白板的截图呢。你可以这样操作：

1. 切换到浏览器里的白板页面
2. 点击绿色的“Share with Copilot”按钮
3. 回到这里再次对我说“看看白板”

点击那个按钮后会保存一张截图，方便我查看。

步骤 2 — 从剪贴板读取结构化 JSON（辅助补充）

同时尝试从系统剪贴板获取结构化的 JSON 数据。白板在导出 PNG 的同时会自动将该数据复制到剪贴板。

  • macOS：pbpaste
  • Linux：xclip -selection clipboard -o
  • Windows：powershell -command "Get-Clipboard"

该 JSON 包含了便签和文本标签的精确文本内容、相对位置以及颜色信息。由于截图中的文字有时难以辨识，JSON 可以作为 PNG 的有力补充，提供精准的文本数据。

如果剪贴板中没有 JSON 数据也完全没关系——光靠 PNG 就足以让模型理解大部分内容了。不要把缺少剪贴板数据当作错误处理。

步骤 3 — 综合两种数据源进行解读

结合视觉截图与结构化文本，形成对用户想法或规划的完整理解：

  • 来自 PNG 的信息： 描述你看到的图像——草图、架构图、流程图、分组、箭头、空间布局、标注、圈选元素、划掉的元素、强调标记等。
  • 来自 JSON 的信息： 读取便签和标签的精准文本，并注意其所在位置与颜色。
  • 结合两者： 融会贯通，形成一份连贯、自然的解读表达。

步骤 4 — 以协作方式进行回复

不要简单堆砌原始数据或给出冰冷的技术总结。请像一位刚刚看完同伴白板草图的协作者那样去沟通。例如：

  • “我看你画了一个三阶段的流程——似乎是想让 [X] 流转到 [Y] 再到 [Z]。角落里那张便签写着‘[文字]’，这是你希望我重点关注的问题吗？”
  • “你把左侧这四个想法归为了一组，并与右侧的两项分开了，你是打算把它们当成两个不同的类别来处理吗？”
  • “我看到你用箭头把 [A]、[B]、[C] 连了起来——这是你预期的业务流程吗？”

步骤 5 — 询问下一步打算

结尾处一定要主动提供下一步建议：

  • “需要我在此基础上进一步丰富展开吗？”
  • “要我把它整理成一份结构化的文档吗？”
  • “需要我把我的建议直接补充到白板上吗？”

在白板上反馈回复

当用户希望 Agent 将内容写回白板时：

  • Agent 无法直接修改 HTML 文件的画布状态——因为那是运行在浏览器里的 JavaScript 负责管理的。
  • 作为替代，可以提供切合实际的操作方案：
    • 直接在 CLI 对话中给出回复，并建议用户手动将其添加到白板上。
    • 提出基于白板解读出的内容，生成一份独立的文档（Markdown、备忘录、清单等）。
    • 如果合适，可以重新生成一份带有预置内容的 napkin.html 更新副本。

语气与风格

  • 保持与 noob-mode Skill 相同的好感度与非技术化亲和语气。
  • 绝不要使用开发者硬核术语；如果必须使用，一定要用通俗易懂的语言解释清楚。
  • 将白板视为一个富有创意的协作空间，而不是严肃正式的输入接口。
  • 不管用户的画功如何，都要多给予鼓励。
  • 将回复措辞定位为“基于你的思考继续延伸”，而不是“分析你的输入数据”。

错误处理

未找到 PNG 截图：

我还没拿到白板的截图呢。你可以这样操作：

1. 切换到浏览器里的白板页面
2. 点击绿色的“Share with Copilot”按钮
3. 回到这里再次对我说“看看白板”

点击那个按钮后会保存一张截图，方便我查看。

桌面未找到白板文件：

看起来咱们还没开启白板呢。需要我现在为你打开一个吗？

重要注意事项

  • PNG 图像解读是核心渠道。多模态模型能够读取并理解 view 工具返回的 Base64 图像数据。
  • 剪贴板 JSON 数据是辅助手段——它能提供精确的文字，但无法捕捉手绘线条。
  • 优先检查 PNG 文件。如果未找到，提示用户点击“Share with Copilot”。
  • 如果剪贴板中缺少 JSON 数据，直接基于 PNG 图像独立处理即可。
  • HTML 模板相对于本 SKILL.md 文件的路径为 assets/napkin.html。
  • 如果 noob-mode Skill 同时处于激活状态，在申请文件或 Bash 权限时，请遵循其风险指示器格式（绿/黄/红）。