Agent skill · design visual · github
napkin
Visual whiteboard collaboration for Copilot CLI. Creates an interactive whiteboard that opens in your browser — draw, sketch, add sticky notes, then share everything back with Copilot. Copilot sees your drawings and text, and responds with analysis, suggestions, and ideas.
Why this skill is useful
Adds a structured JSON data extraction process alongside visual interpretation of user sketches, enhancing the AI's ability to analyze visual content.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
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: 1. 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. 2. Open it in the default browser: macOS: open ~/Desktop/napkin.html Linux: xdg-open ~/Desktop/napkin.html Windows: start ~/Desktop/napkin.html 3. Tell the user what to do next. Say something warm and simple: --- 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): 1. ~/Downloads/napkin-snapshot.png 2. ~/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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/napkin