Napkin - 可视化白板工具，用AI分析草图想法，适合产品经理和业务人员

napkin by github/awesome-copilot

695 周安装量

27,600 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/github/awesome-copilot --skill napkin

AI/机器学习生产力产品管理

🇨🇳中文介绍

Napkin — Copilot CLI 的可视化白板

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

目标用户是律师、产品经理和业务相关人员——而非软件开发人员。请确保所有内容都易于理解且不使用专业术语。

激活

当用户调用此技能时——例如说"我们来 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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

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

查找名为 napkin-snapshot.png 的 PNG 文件。按顺序检查以下位置（浏览器会将其保存到用户的默认下载文件夹，位置可能不同）：

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

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

如果在两个位置都找不到 PNG 文件，请不要静默跳过。相反，告诉用户：

我还没有看到来自您 napkin 的快照。请按以下步骤操作：

1. 前往浏览器中的白板
2. 点击绿色的"与 Copilot 分享"按钮
3. 回到这里再说一次"检查 napkin"

该按钮会保存一个我可以查看的屏幕截图。

步骤 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]。角落里的便签写着'[文本]'——这是您希望我解决的问题吗？"
"看起来您把左边的这四个想法归为一组，并把它们和右边的两个项目分开了。您认为这是两个不同的类别吗？"
"我看到您画了箭头连接 [A] 到 [B] 再到 [C]——这是您设想的工作流程吗？"

步骤 5 — 询问后续步骤

总是以提供下一步建议结束：

"希望我在此基础上进行扩展吗？"
"需要我将其转化为结构化的文档吗？"
"需要我将我的建议添加到 napkin 上吗？"

在 Napkin 上回应

当用户希望智能体将内容添加回白板时：

智能体无法直接修改 HTML 文件的画布状态——这由浏览器中运行的 JavaScript 管理。
相反，提供实用的替代方案：
- 直接在 CLI 中提供回应，并建议用户手动将其添加到 napkin 上。
- 根据从 napkin 解读的内容，提供创建单独的文档（markdown、备忘录、清单等）的服务。
- 如果合适，创建一个带有预加载内容的 napkin.html 更新副本。

使用与 noob-mode 技能相同的平易近人、非技术性的语气。
不要在不使用通俗英语解释的情况下使用开发者术语。
将 napkin 视为一个创造性的、协作的空间——而不是一个正式的输入机制。
对用户的草图给予鼓励，无论其艺术质量如何。
将回应构建为"在您的想法基础上进行扩展"，而不是"分析您的输入"。

未找到 PNG 快照：

我还没有看到来自您 napkin 的快照。请按以下步骤操作：

1. 前往浏览器中的白板
2. 点击绿色的"与 Copilot 分享"按钮
3. 回到这里再说一次"检查 napkin"

该按钮会保存一个我可以查看的屏幕截图。

桌面上不存在白板文件：

看起来我们还没有启动一个 napkin。需要我为您打开一个吗？

PNG 解读是主要渠道。多模态模型可以读取和解释 view 工具返回的 base64 图像数据。
JSON 剪贴板数据是补充——它提供精确的文本但不捕捉手绘图。
始终首先检查 PNG 文件。如果未找到，提示用户点击"与 Copilot 分享"。
如果剪贴板没有 JSON 数据，仅使用 PNG 文件继续。
HTML 模板位于相对于此 SKILL.md 文件的 assets/napkin.html 路径。
如果 noob-mode 技能也处于活动状态，在请求文件或 bash 权限时使用其风险指示器格式（绿色/黄色/红色）。

🇺🇸English

Napkin — Visual Whiteboard for 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.

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."

Reading the 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:

Step 1 — Read the PNG snapshot (primary)

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.

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

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.

Step 3 — Interpret both sources together

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.

Step 4 — Respond conversationally

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?"

Step 5 — Ask what's next

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?"

Responding on the 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.

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."

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?

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.

Weekly Installs

498

Repository

github/awesome-copilot

GitHub Stars

26.7K

First Seen

Mar 9, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex441

gemini-cli441

opencode430

cursor427

github-copilot424

kimi-cli422

头脑风暴技能：AI协作设计流程，将创意转化为完整规范与实施计划

79,800 周安装