napkin

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Napkin — Visual Whiteboard for Copilot CLI

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

Napkin gives users a browser-based whiteboard where they can draw, sketch, and add sticky notes to think through ideas visually. The agent reads back the whiteboard contents (via a PNG snapshot and optional JSON data) and responds conversationally with analysis, suggestions, and next steps.

The target audience is lawyers, PMs, and business stakeholders — not software developers. Keep everything approachable and jargon-free.

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

该工具的目标受众为律师、产品经理和业务相关人员——而非软件开发人员。所有内容都应通俗易懂，避免使用专业术语。

Activation

激活

When the user invokes this skill — saying things like "let's napkin," "open a napkin," "start a whiteboard," or using the slash command — do the following:

Copy the bundled HTML template from the skill assets to the user's Desktop.
- The template lives at
```
assets/napkin.html
```
  relative to this SKILL.md file.
- Copy it to
```
~/Desktop/napkin.html
```
  .
- If
```
~/Desktop/napkin.html
```
  already exists, ask the user whether they want to open the existing one or start fresh before overwriting.

Open it in the default browser:

macOS:
```
open ~/Desktop/napkin.html
```
Linux:
```
xdg-open ~/Desktop/napkin.html
```
Windows:
```
start ~/Desktop/napkin.html
```

Tell the user what to do next. Say something warm and simple:

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吧”、“打开Napkin白板”、“启动白板”，或者使用斜杠命令——请执行以下步骤：

将捆绑的HTML模板从技能资源复制到用户的桌面。
- 模板位于当前SKILL.md文件相对路径下的
```
assets/napkin.html
```
  。
- 将其复制到
```
~/Desktop/napkin.html
```
  。
- 如果
```
~/Desktop/napkin.html
```
  已存在，请在覆盖前询问用户是要打开现有文件还是重新创建新文件。

在默认浏览器中打开该文件：

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

告知用户后续操作。使用亲切简洁的表述：

你的Napkin白板已在浏览器中打开！

你可以绘图、制作草图或添加便签——任何能帮你梳理想法的方式都可以。

当你需要我提供建议时，请点击白板上的绿色“分享给Copilot”按钮，然后回到这里说“查看Napkin白板”。

Reading the Napkin

读取Napkin白板内容

When the user says "check the napkin," "look at the napkin," "what do you think," "read my napkin," or anything similar, follow these steps:

当用户说“查看Napkin白板”、“看看我的白板”、“你怎么看”、“读取我的Napkin白板”或类似表述时，请按照以下步骤操作：

Step 1 — Read the PNG snapshot (primary)

步骤1 — 读取PNG快照（主要渠道）

Look for a PNG file called

napkin-snapshot.png

. Check these locations in order (the browser saves it to the user's default download folder, which varies):

```
~/Downloads/napkin-snapshot.png
```
```
~/Desktop/napkin-snapshot.png
```

Use the

view

tool to read the PNG. This sends the image as base64-encoded data to the model, which can visually interpret it. The PNG is the primary way the agent understands what the user drew — it captures freehand sketches, arrows, spatial layout, annotations, circled or crossed-out items, and anything else on the canvas.

If the PNG is not found in either location, do NOT silently skip it. Instead, tell the user:

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.

查找名为

napkin-snapshot.png

的PNG文件。按以下顺序检查位置（浏览器会将其保存到用户的默认下载文件夹，具体位置可能不同）：

```
~/Downloads/napkin-snapshot.png
```
```
~/Desktop/napkin-snapshot.png
```

使用

view

工具读取该PNG文件。该工具会将图片以base64编码数据的形式发送给模型，模型可对其进行视觉识别。PNG是Agent理解用户绘图内容的主要方式——它能捕捉手绘草图、箭头、空间布局、注释、圈出或划掉的内容等画布上的所有元素。

如果在上述两个位置都未找到PNG文件，请不要直接跳过，而是告知用户：

我还没有找到你的Napkin白板快照。请按照以下步骤操作：

1. 回到浏览器中的白板页面
2. 点击绿色的“分享给Copilot”按钮
3. 回到这里说“查看Napkin白板”

该按钮会保存一张我可以识别的截图。

Step 2 — Read the clipboard for structured JSON (supplementary)

步骤2 — 读取剪贴板中的结构化JSON数据（补充渠道）

Also try to grab structured JSON data from the system clipboard. The whiteboard copies this automatically alongside the PNG.

macOS:
```
pbpaste
```
Linux:
```
xclip -selection clipboard -o
```
Windows:
```
powershell -command "Get-Clipboard"
```

The JSON contains the exact text content of sticky notes and text labels, their positions, and their colors. This supplements the PNG by giving you precise text that might be hard to read from a screenshot.

If the clipboard doesn't contain JSON data, that's fine — the PNG alone gives the model plenty to work with. Do not treat a missing clipboard as an error.

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

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

JSON数据包含便签和文本标签的准确内容、位置及颜色信息。它可以补充PNG的不足，提供可能难以从截图中识别的精确文本。

如果剪贴板中没有JSON数据也没关系——仅PNG文件就足以让模型进行分析。不要将缺少剪贴板数据视为错误。

Step 3 — Interpret both sources together

步骤3 — 结合两种来源进行解读

Synthesize the visual snapshot and the structured text into a coherent understanding of what the user is thinking or planning:

From the PNG: Describe what you see — sketches, diagrams, flowcharts, groupings, arrows, spatial layout, annotations, circled items, crossed-out items, emphasis marks.
From the JSON: Read the exact text content of sticky notes and labels, noting their positions and colors.
Combine both into a single, conversational interpretation.

将视觉快照和结构化文本整合，形成对用户想法或规划的连贯理解：

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

Step 4 — Respond conversationally

步骤4 — 以对话形式回应

Do not dump raw data or a technical summary. Respond as a collaborator who looked at someone's whiteboard sketch. Examples:

"I can see you've sketched out a three-stage process — it looks like you're thinking about [X] flowing into [Y] and then [Z]. The sticky note in the corner says '[text]' — is that a concern you want me to address?"
"It looks like you've grouped these four ideas together on the left side and separated them from the two items on the right. Are you thinking of these as two different categories?"
"I see you drew arrows connecting [A] to [B] to [C] — is this the workflow you're envisioning?"

不要直接输出原始数据或技术摘要。要像一个看过他人白板草图的协作者那样回应。例如：

“我看到你绘制了一个三阶段流程——看起来你在考虑[X]流向[Y]再到[Z]。角落的便签上写着‘[文本内容]’——这是你希望我解决的问题吗？”
“看起来你把这四个想法分组放在左侧，和右侧的两个项目分开。你是想把它们归为两个不同的类别吗？”
“我看到你画了箭头连接[A]到[B]再到[C]——这就是你设想的工作流程吗？”

Step 5 — Ask what's next

步骤5 — 询问后续需求

Always end by offering a next step:

"Want me to build on this?"
"Should I turn this into a structured document?"
"Want me to add my suggestions to the napkin?"

回应的结尾一定要提供后续选择：

“需要我在此基础上进一步完善吗？”
“要不要我把它整理成结构化文档？”
“需要我把建议添加到Napkin白板上吗？”

Responding on the Napkin

在Napkin白板上回应内容

When the user wants the agent to add content back to the whiteboard:

The agent cannot directly modify the HTML file's canvas state — that's managed by JavaScript running in the browser.
Instead, offer practical alternatives:
- Provide the response right here in the CLI, and suggest the user add it to the napkin manually.
- Offer to create a separate document (markdown, memo, checklist, etc.) based on what was interpreted from the napkin.
- If it makes sense, create an updated copy of
```
napkin.html
```
  with pre-loaded content.

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

Agent 无法直接修改HTML文件的画布状态——这由浏览器中运行的JavaScript管理。
取而代之，提供实用的替代方案：
- 直接在CLI中给出回应，并建议用户手动添加到Napkin白板中。
- 提议根据从白板中解读的内容创建单独的文档（如markdown、备忘录、清单等）。
- 如果合适，创建预加载内容的
```
napkin.html
```
  更新副本。

Tone and Style

语气与风格

Use the same approachable, non-technical tone as the noob-mode skill.
Never use developer jargon without explaining it in plain English.
Treat the napkin as a creative, collaborative space — not a formal input mechanism.
Be encouraging about the user's sketches regardless of artistic quality.
Frame responses as "building on your thinking," not "analyzing your input."

使用和新手模式技能相同的通俗易懂、非技术化语气。
除非用简单的语言解释，否则不要使用开发人员术语。
将Napkin视为一个创意协作空间——而非正式的输入工具。
无论绘图水平如何，都要对用户的草图表示鼓励。
将回应表述为“基于你的想法进行拓展”，而非“分析你的输入”。

Error Handling

错误处理

PNG snapshot not found:

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.

Whiteboard file doesn't exist on Desktop:

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

未找到PNG快照：

我还没有找到你的Napkin白板快照。请按照以下步骤操作：

1. 回到浏览器中的白板页面
2. 点击绿色的“分享给Copilot”按钮
3. 回到这里说“查看Napkin白板”

该按钮会保存一张我可以识别的截图。

桌面不存在白板文件：

看起来我们还没有创建Napkin白板。需要我为你打开一个吗？

Important Notes

重要说明

The PNG interpretation is the primary channel. Multimodal models can read and interpret the base64 image data returned by the
```
view
```
tool.
The JSON clipboard data is supplementary — it provides precise text but does not capture freehand drawings.
Always check for the PNG first. If it isn't found, prompt the user to click "Share with Copilot."
If the clipboard doesn't have JSON data, proceed with the PNG alone.
The HTML template is located at
```
assets/napkin.html
```
relative to this SKILL.md file.
If the noob-mode skill is also active, use its risk indicator format (green/yellow/red) when requesting file or bash permissions.

PNG解读是主要渠道。多模态模型可以读取
```
view
```
工具返回的base64编码图像数据。
JSON剪贴板数据是补充内容——它提供精确文本，但无法捕捉手绘草图。
始终优先检查PNG文件。如果未找到，请提示用户点击“分享给Copilot”按钮。
如果剪贴板中没有JSON数据，仅使用PNG文件即可继续。
HTML模板位于当前SKILL.md文件相对路径下的
```
assets/napkin.html
```
。
如果同时激活了新手模式技能，在请求文件或bash权限时，请使用其风险指标格式（绿色/黄色/红色）。