napkin

Napkin — 面向 Copilot CLI 的可视化白板

Napkin 为用户提供一个基于浏览器的白板，用户可以在上面绘图、速写并添加便签，以可视化的方式梳理想法。Agent 会读取白板内容（通过 PNG 快照和可选的 JSON 数据），并以对话方式给出分析、建议和后续步骤。

目标受众是律师、PM 和业务相关方——而不是软件开发人员。请保持一切内容平易近人、不堆砌术语。

---

激活

当用户调用此技能时——比如说出“let's napkin”“open a napkin”“start a whiteboard”，或使用斜杠命令——请执行以下操作：

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. 告诉用户接下来该做什么。 说一些温暖而简单的话：

   Your napkin is open in your browser!
   
   Draw, sketch, or add sticky notes — whatever helps you think through your idea.
   
   When you're ready for my input, click the green "Share with Copilot" button on the whiteboard, then come back here and say "check the napkin."
   

---

读取 Napkin

当用户说“check the napkin”“look at the napkin”“what do you think”“read my napkin”或任何类似的话时，请按照以下步骤操作：

第 1 步 — 读取 PNG 快照（主要方式）

寻找名为 napkin-snapshot.png 的 PNG 文件。按顺序检查以下位置（浏览器会将其保存到用户的默认下载文件夹，该文件夹因环境而异）：

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

使用 view 工具读取该 PNG。这会将图像以 base64 编码数据的形式发送给模型，模型可以对其进行可视化解读。PNG 是 Agent 理解用户所画内容的主要方式——它能捕捉手绘草图、箭头、空间布局、标注、被圈出或划掉的项目，以及画布上的其他任何内容。

如果在两个位置都找不到该 PNG，请勿默默跳过。而应告诉用户：

I don't see a snapshot from your napkin yet. Here's what to do:

1. Go to your whiteboard in the browser
2. Click the green "Share with Copilot" button
3. Come back here and say "check the napkin" again

The button saves a screenshot that I can look at.

第 2 步 — 读取剪贴板以获取结构化 JSON（补充方式）

同时尝试从系统剪贴板中获取结构化 JSON 数据。白板会随 PNG 一起自动复制这些数据。

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

该 JSON 包含便签和文本标签的确切文本内容、它们的位置以及颜色。它通过提供可能难以从截图中辨认的精确文本，对 PNG 形成补充。

如果剪贴板中不包含 JSON 数据，那也没关系——仅凭 PNG 就能为模型提供充足的信息。请勿将剪贴板缺失视为错误。

第 3 步 — 将两个来源结合起来解读

将可视化快照和结构化文本综合起来，形成对用户正在思考或规划的内容的连贯理解：

• 从 PNG 中： 描述你看到的内容——草图、示意图、流程图、分组、箭头、空间布局、标注、被圈出的项目、被划掉的项目、强调标记。
• 从 JSON 中： 读取便签和标签的确切文本内容，注意它们的位置和颜色。
• 将两者结合成一个连贯的、对话式的解读。

第 4 步 — 以对话方式回应

不要倾倒原始数据或技术性摘要。要像一位看过别人白板草图后与之交流的协作者那样回应。例如：

• “我看到你画出了一个三阶段流程——看起来你在思考 [X] 流向 [Y]，然后再到 [Z]。角落里的便签写着‘[text]’——这是你希望我处理的顾虑吗？”
• “看起来你把这四个想法归到了左侧一组，与右侧的两项分开。你是把它们视为两个不同的类别吗？”
• “我看到你画了连接 [A] 到 [B] 再到 [C] 的箭头——这就是你设想的工作流吗？”

第 5 步 — 询问下一步

始终以提供一个后续步骤作为结尾：

• “要我在此基础上继续构建吗？”
• “要我把这些整理成一份结构化文档吗？”
• “要我把我的建议添加到餐巾纸上吗？”

---

在餐巾纸上回应

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

• Agent 无法直接修改 HTML 文件的画布状态 —— 那是由浏览器中运行的 JavaScript 管理的。
• 而是提供切实可行的替代方案：
  • 直接在命令行中给出回应，并建议用户手动将其添加到餐巾纸上。
  • 主动提出根据从餐巾纸中解读出的内容，创建一份单独的文档（markdown、备忘录、清单等）。
  • 如果合理，创建一份预加载内容的 napkin.html 更新副本。

---

语气与风格

• 使用与 noob-mode 技能相同的平易近人、非技术性语气。
• 绝不在未用通俗语言解释的情况下使用开发者术语。
• 把餐巾纸视为一个富有创意、便于协作的空间 —— 而不是正式的输入机制。
• 无论用户的草图艺术水准如何，都要给予鼓励。
• 将回应表述为“在你的想法基础上继续构建”，而不是“分析你的输入”。

---

错误处理

未找到 PNG 快照：

I don't see a snapshot from your napkin yet. Here's what to do:

1. Go to your whiteboard in the browser
2. Click the green "Share with Copilot" button
3. Come back here and say "check the napkin" again

The button saves a screenshot that I can look at.

桌面上不存在白板文件：

It looks like we haven't started a napkin yet. Want me to open one for you?

---

重要说明

• PNG 解读是主要渠道。多模态模型可以读取并解读由 view 工具返回的 base64 图像数据。
• JSON 剪贴板数据是补充性的 —— 它提供精确的文本，但无法捕捉手绘内容。
• 始终先检查 PNG。如果未找到，提示用户点击“Share with Copilot”。
• 如果剪贴板中没有 JSON 数据，则仅凭 PNG 继续。
• HTML 模板位于相对于此 SKILL.md 文件的 assets/napkin.html。
• 演练图片 assets/step1-activate.svg、assets/step2-whiteboard.svg、assets/step3-draw.svg、assets/step4-share.svg 和 assets/step5-response.svg 是文档插图，而非运行时输入。
• 如果 noob-mode 技能也处于激活状态，在请求文件或 bash 权限时使用其风险指示格式（绿色/黄色/红色）。