napkin by github/awesome-copilot
npx skills add https://github.com/github/awesome-copilot --skill napkinNapkin 为用户提供了一个基于浏览器的白板,他们可以在上面绘图、草拟并添加便签,以可视化的方式梳理想法。智能体会读取白板内容(通过 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 开发者,精准高效
告诉用户下一步该做什么。 说一些热情而简单的话:
您的 napkin 已在浏览器中打开!
请绘图、草拟或添加便签——任何能帮助您梳理想法的方式都可以。
当您准备好让我提供意见时,请点击白板上的绿色"与 Copilot 分享"按钮,然后回到这里说"检查 napkin"。
当用户说"检查 napkin"、"看看 napkin"、"你觉得怎么样"、"读取我的 napkin"或任何类似的话时,请遵循以下步骤:
查找名为 napkin-snapshot.png 的 PNG 文件。按顺序检查以下位置(浏览器会将其保存到用户的默认下载文件夹,位置可能不同):
~/Downloads/napkin-snapshot.png~/Desktop/napkin-snapshot.png使用 view 工具读取 PNG 文件。这会将图像作为 base64 编码的数据发送给模型,模型可以对其进行视觉解读。PNG 是智能体理解用户所绘内容的主要方式——它捕捉了手绘草图、箭头、空间布局、注释、圈出或划掉的项目以及画布上的任何其他内容。
如果在两个位置都找不到 PNG 文件,请不要静默跳过。相反,告诉用户:
我还没有看到来自您 napkin 的快照。请按以下步骤操作:
1. 前往浏览器中的白板
2. 点击绿色的"与 Copilot 分享"按钮
3. 回到这里再说一次"检查 napkin"
该按钮会保存一个我可以查看的屏幕截图。
同时尝试从系统剪贴板获取结构化的 JSON 数据。白板在保存 PNG 时会自动复制此数据。
pbpastexclip -selection clipboard -opowershell -command "Get-Clipboard"JSON 包含便签和文本标签的确切文本内容、它们的位置和颜色。这通过提供可能难以从屏幕截图中读取的精确文本来补充 PNG 信息。
如果剪贴板不包含 JSON 数据,这没关系——仅 PNG 文件就为模型提供了足够的信息。不要将缺少剪贴板数据视为错误。
将视觉快照和结构化文本综合起来,形成对用户想法或计划的连贯理解:
不要直接转储原始数据或技术摘要。要像一个看了别人白板草图的协作者那样回应。例如:
总是以提供下一步建议结束:
当用户希望智能体将内容添加回白板时:
napkin.html 更新副本。未找到 PNG 快照:
我还没有看到来自您 napkin 的快照。请按以下步骤操作:
1. 前往浏览器中的白板
2. 点击绿色的"与 Copilot 分享"按钮
3. 回到这里再说一次"检查 napkin"
该按钮会保存一个我可以查看的屏幕截图。
桌面上不存在白板文件:
看起来我们还没有启动一个 napkin。需要我为您打开一个吗?
view 工具返回的 base64 图像数据。assets/napkin.html 路径。每周安装数
498
代码仓库
GitHub 星标数
26.7K
首次出现
2026年3月9日
安全审计
已安装于
codex441
gemini-cli441
opencode430
cursor427
github-copilot424
kimi-cli422
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.
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.
assets/napkin.html relative to this SKILL.md file.~/Desktop/napkin.html.~/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:
open ~/Desktop/napkin.htmlxdg-open ~/Desktop/napkin.htmlstart ~/Desktop/napkin.htmlTell 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."
When the user says "check the napkin," "look at the napkin," "what do you think," "read my napkin," or anything similar, follow these steps:
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.pngUse 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.
Also try to grab structured JSON data from the system clipboard. The whiteboard copies this automatically alongside the PNG.
pbpastexclip -selection clipboard -opowershell -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.
Synthesize the visual snapshot and the structured text into a coherent understanding of what the user is thinking or planning:
Do not dump raw data or a technical summary. Respond as a collaborator who looked at someone's whiteboard sketch. Examples:
Always end by offering a next step:
When the user wants the agent to add content back to the whiteboard:
napkin.html with pre-loaded content.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?
view tool.assets/napkin.html relative to this SKILL.md file.Weekly Installs
498
Repository
GitHub Stars
26.7K
First Seen
Mar 9, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex441
gemini-cli441
opencode430
cursor427
github-copilot424
kimi-cli422
头脑风暴技能:AI协作设计流程,将创意转化为完整规范与实施计划
79,800 周安装