mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-14 05:05:15 +00:00
Add napkin plugin: visual whiteboard collaboration for Copilot CLI (#929)
* Add napkin plugin: visual whiteboard collaboration for Copilot CLI Napkin opens an interactive HTML whiteboard in the user's browser where they can draw, sketch, and add sticky notes. When ready, they click 'Share with Copilot' which exports a PNG snapshot. The Copilot CLI agent reads the PNG via the view tool, and the multimodal AI model interprets the drawings, spatial layout, and text content — responding conversationally as a collaborator. Built for non-technical users: lawyers, PMs, business stakeholders, designers, and anyone who thinks better visually. Includes: - Self-contained HTML whiteboard (zero external dependencies) - Shape recognition (wobbly shapes snap to clean versions) - Freehand drawing, sticky notes, arrows, text labels - Auto-save to localStorage - SKILL.md with agent instructions - SVG visual guides for step-by-step README documentation - Plugin manifest for Copilot CLI installation Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Fix review feedback: roundRect compat, cross-platform shortcuts, eraser undo - Add safeRoundRect() fallback for browsers without CanvasRenderingContext2D.roundRect() - Update undo/redo button titles to show Ctrl/Cmd instead of Mac-only Cmd - Fix eraser undo by capturing state before first erase mutation per gesture Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Update skills/napkin/templates/napkin.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update plugins/napkin/README.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update skills/napkin/templates/napkin.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update skills/napkin/templates/napkin.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update skills/napkin/templates/napkin.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Add missing Line (L) and Eraser (E) keyboard shortcuts to README The in-app shortcuts panel and keyMap handler both support L for Line and E for Eraser, but the README keyboard shortcuts table was missing both entries. Adds them to match the actual implementation. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Combine docs/ and templates/ into assets/ per agentskills.io spec Moves skills/napkin/docs/*.svg and skills/napkin/templates/napkin.html into skills/napkin/assets/ to align with the Agent Skills specification. Updates all path references in SKILL.md, README.md, and generated docs. Addresses review feedback from PR #929. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Dan Velton <dvelton@Dans-MacBook-Pro.local> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Dan Velton
GitHub
2019
skills/napkin/assets/napkin.html
Normal file
2019
skills/napkin/assets/napkin.html
Normal file
File diff suppressed because it is too large
Load Diff
107
skills/napkin/assets/step1-activate.svg
Normal file
107
skills/napkin/assets/step1-activate.svg
Normal file
@@ -0,0 +1,107 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="460" viewBox="0 0 800 460">
|
||||
<defs>
|
||||
<linearGradient id="termBg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#2D2B55"/>
|
||||
<stop offset="100%" stop-color="#1E1B3A"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="browserGlow" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#0D9488" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#0D9488" stop-opacity="0.05"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="460" rx="12" fill="#F8FAFB"/>
|
||||
|
||||
<!-- Step indicator -->
|
||||
<circle cx="46" cy="28" r="16" fill="#0D9488"/>
|
||||
<text x="46" y="33" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold" fill="white">1</text>
|
||||
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">Type "let's napkin" to start</text>
|
||||
|
||||
<!-- Terminal Window -->
|
||||
<g transform="translate(40, 55)">
|
||||
<!-- Terminal chrome -->
|
||||
<rect width="480" height="280" rx="10" fill="#1E1B3A" stroke="#3D3A5C" stroke-width="1"/>
|
||||
<!-- Title bar -->
|
||||
<rect width="480" height="36" rx="10" fill="#2D2B55"/>
|
||||
<rect x="0" y="26" width="480" height="10" fill="#2D2B55"/>
|
||||
<!-- Window buttons -->
|
||||
<circle cx="20" cy="18" r="6" fill="#FF5F57"/>
|
||||
<circle cx="40" cy="18" r="6" fill="#FFBD2E"/>
|
||||
<circle cx="60" cy="18" r="6" fill="#28C840"/>
|
||||
<!-- Title -->
|
||||
<text x="240" y="22" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#8B87B0">Terminal</text>
|
||||
|
||||
<!-- Terminal content -->
|
||||
<!-- Prompt line 1 -->
|
||||
<text x="20" y="68" font-family="monospace" font-size="13" fill="#8B87B0">~/Projects</text>
|
||||
<text x="115" y="68" font-family="monospace" font-size="13" fill="#6C6A8A">$</text>
|
||||
<text x="130" y="68" font-family="monospace" font-size="13" fill="#E0DEF4">copilot</text>
|
||||
|
||||
<!-- Prompt line 2 - the napkin command -->
|
||||
<text x="20" y="100" font-family="monospace" font-size="13" fill="#0D9488">❯</text>
|
||||
<text x="36" y="100" font-family="monospace" font-size="13" fill="#E0DEF4">let's napkin</text>
|
||||
|
||||
<!-- Copilot response -->
|
||||
<text x="20" y="140" font-family="monospace" font-size="13" fill="#0D9488">✓</text>
|
||||
<text x="36" y="140" font-family="monospace" font-size="13" fill="#A5F3FC">Opening your napkin whiteboard...</text>
|
||||
|
||||
<!-- Blank line then response -->
|
||||
<text x="20" y="172" font-family="monospace" font-size="13" fill="#C4B5FD">Copilot</text>
|
||||
<text x="20" y="196" font-family="monospace" font-size="13" fill="#E0DEF4">Your napkin is open in your browser!</text>
|
||||
<text x="20" y="218" font-family="monospace" font-size="13" fill="#E0DEF4">Sketch your ideas, then click</text>
|
||||
<text x="20" y="240" font-family="monospace" font-size="13" fill="#34D399">"Share with Copilot"</text>
|
||||
<text x="215" y="240" font-family="monospace" font-size="13" fill="#E0DEF4">when ready.</text>
|
||||
|
||||
<!-- Cursor -->
|
||||
<rect x="20" y="260" width="8" height="14" fill="#0D9488" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<!-- Browser opening indicator -->
|
||||
<g transform="translate(560, 100)">
|
||||
<!-- Mini browser window -->
|
||||
<rect width="200" height="160" rx="8" fill="white" stroke="#D1D5DB" stroke-width="1.5"/>
|
||||
<!-- Browser chrome -->
|
||||
<rect width="200" height="28" rx="8" fill="#F1F5F9"/>
|
||||
<rect x="0" y="20" width="200" height="8" fill="#F1F5F9"/>
|
||||
<!-- Browser dots -->
|
||||
<circle cx="14" cy="14" r="4" fill="#E2E8F0"/>
|
||||
<circle cx="28" cy="14" r="4" fill="#E2E8F0"/>
|
||||
<circle cx="42" cy="14" r="4" fill="#E2E8F0"/>
|
||||
<!-- Address bar -->
|
||||
<rect x="56" y="7" width="132" height="14" rx="3" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||
<text x="72" y="17" font-family="Arial, Helvetica, sans-serif" font-size="7" fill="#94A3B8">napkin.html</text>
|
||||
|
||||
<!-- Canvas preview -->
|
||||
<rect x="10" y="38" width="180" height="110" rx="3" fill="#FAFAFA"/>
|
||||
<!-- Mini toolbar -->
|
||||
<rect x="40" y="44" width="120" height="14" rx="3" fill="#F1F5F9" stroke="#E2E8F0" stroke-width="0.5"/>
|
||||
<!-- Mini green button -->
|
||||
<rect x="130" y="130" width="50" height="12" rx="3" fill="#0D9488"/>
|
||||
<text x="155" y="139" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="5" fill="white">Share</text>
|
||||
<!-- Whiteboard grid dots -->
|
||||
<circle cx="50" cy="80" r="1" fill="#E2E8F0"/>
|
||||
<circle cx="80" cy="80" r="1" fill="#E2E8F0"/>
|
||||
<circle cx="110" cy="80" r="1" fill="#E2E8F0"/>
|
||||
<circle cx="140" cy="80" r="1" fill="#E2E8F0"/>
|
||||
<circle cx="50" cy="105" r="1" fill="#E2E8F0"/>
|
||||
<circle cx="80" cy="105" r="1" fill="#E2E8F0"/>
|
||||
<circle cx="110" cy="105" r="1" fill="#E2E8F0"/>
|
||||
<circle cx="140" cy="105" r="1" fill="#E2E8F0"/>
|
||||
</g>
|
||||
|
||||
<!-- Curved arrow from terminal to browser -->
|
||||
<path d="M525,200 C555,180 555,160 570,150" fill="none" stroke="#0D9488" stroke-width="2.5" stroke-dasharray="6,4"/>
|
||||
<polygon points="568,144 576,150 568,156" fill="#0D9488"/>
|
||||
|
||||
<!-- Arrow label -->
|
||||
<rect x="530" y="270" width="190" height="36" rx="6" fill="#0D9488" opacity="0.1"/>
|
||||
<text x="625" y="285" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0D9488" font-weight="bold">Browser opens</text>
|
||||
<text x="625" y="300" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488">automatically</text>
|
||||
|
||||
<!-- Bottom caption -->
|
||||
<rect x="40" y="365" width="720" height="70" rx="8" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||
<text x="60" y="393" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#64748B" font-weight="bold">How it works:</text>
|
||||
<text x="60" y="418" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#94A3B8">Type "let's napkin" (or "open the napkin") in your Copilot CLI session.</text>
|
||||
<text x="60" y="436" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#94A3B8">A whiteboard will open in your default browser — no setup needed.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
157
skills/napkin/assets/step2-whiteboard.svg
Normal file
157
skills/napkin/assets/step2-whiteboard.svg
Normal file
@@ -0,0 +1,157 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480">
|
||||
<defs>
|
||||
<linearGradient id="overlayBg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="white"/>
|
||||
<stop offset="100%" stop-color="#F8FAFB"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="480" rx="12" fill="#F8FAFB"/>
|
||||
|
||||
<!-- Step indicator -->
|
||||
<circle cx="46" cy="28" r="16" fill="#0D9488"/>
|
||||
<text x="46" y="33" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold" fill="white">2</text>
|
||||
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">The whiteboard opens in your browser</text>
|
||||
|
||||
<!-- Browser Window -->
|
||||
<g transform="translate(30, 52)">
|
||||
<!-- Browser outer frame -->
|
||||
<rect width="740" height="400" rx="10" fill="white" stroke="#D1D5DB" stroke-width="1.5"/>
|
||||
|
||||
<!-- Browser chrome -->
|
||||
<rect width="740" height="38" rx="10" fill="#F1F5F9"/>
|
||||
<rect x="0" y="28" width="740" height="10" fill="#F1F5F9"/>
|
||||
<!-- Window buttons -->
|
||||
<circle cx="18" cy="19" r="5.5" fill="#FF5F57"/>
|
||||
<circle cx="36" cy="19" r="5.5" fill="#FFBD2E"/>
|
||||
<circle cx="54" cy="19" r="5.5" fill="#28C840"/>
|
||||
<!-- Address bar -->
|
||||
<rect x="80" y="8" width="580" height="22" rx="6" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||
<text x="96" y="23" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">file:///Users/.../napkin.html</text>
|
||||
<!-- Lock icon substitute -->
|
||||
<circle cx="90" cy="19" r="3" fill="none" stroke="#94A3B8" stroke-width="1"/>
|
||||
|
||||
<!-- Whiteboard area -->
|
||||
<rect x="1" y="38" width="738" height="361" fill="white" rx="0"/>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<rect x="120" y="50" width="500" height="40" rx="20" fill="white" stroke="#E2E8F0" stroke-width="1.5"/>
|
||||
<!-- Tool buttons -->
|
||||
<!-- Pen -->
|
||||
<g transform="translate(155, 58)">
|
||||
<rect width="60" height="24" rx="12" fill="#F1F5F9"/>
|
||||
<line x1="16" y1="18" x2="26" y2="6" stroke="#64748B" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="16" cy="18" r="2" fill="#64748B"/>
|
||||
<text x="34" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Pen</text>
|
||||
</g>
|
||||
<!-- Shapes -->
|
||||
<g transform="translate(230, 58)">
|
||||
<rect width="76" height="24" rx="12" fill="#F1F5F9"/>
|
||||
<rect x="10" y="6" width="12" height="12" rx="2" fill="none" stroke="#64748B" stroke-width="1.5"/>
|
||||
<text x="30" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Shapes</text>
|
||||
</g>
|
||||
<!-- Arrow -->
|
||||
<g transform="translate(320, 58)">
|
||||
<rect width="70" height="24" rx="12" fill="#F1F5F9"/>
|
||||
<line x1="12" y1="16" x2="24" y2="8" stroke="#64748B" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<polygon points="22,5 28,8 22,11" fill="#64748B"/>
|
||||
<text x="34" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Arrow</text>
|
||||
</g>
|
||||
<!-- Sticky Note -->
|
||||
<g transform="translate(404, 58)">
|
||||
<rect width="80" height="24" rx="12" fill="#F1F5F9"/>
|
||||
<rect x="10" y="6" width="12" height="12" rx="1" fill="#FEF3C7" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<text x="28" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Sticky Note</text>
|
||||
</g>
|
||||
<!-- Eraser -->
|
||||
<g transform="translate(498, 58)">
|
||||
<rect width="70" height="24" rx="12" fill="#F1F5F9"/>
|
||||
<rect x="10" y="8" width="14" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.5"/>
|
||||
<text x="30" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Eraser</text>
|
||||
</g>
|
||||
|
||||
<!-- Share with Copilot button -->
|
||||
<rect x="540" y="356" width="180" height="36" rx="18" fill="#0D9488"/>
|
||||
<text x="582" y="378" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="white" font-weight="bold">Share with Copilot</text>
|
||||
|
||||
<!-- Subtle grid dots on canvas -->
|
||||
<g fill="#F1F5F9" opacity="0.8">
|
||||
<circle cx="100" cy="140" r="1.5"/>
|
||||
<circle cx="160" cy="140" r="1.5"/>
|
||||
<circle cx="220" cy="140" r="1.5"/>
|
||||
<circle cx="280" cy="140" r="1.5"/>
|
||||
<circle cx="340" cy="140" r="1.5"/>
|
||||
<circle cx="400" cy="140" r="1.5"/>
|
||||
<circle cx="460" cy="140" r="1.5"/>
|
||||
<circle cx="520" cy="140" r="1.5"/>
|
||||
<circle cx="580" cy="140" r="1.5"/>
|
||||
<circle cx="640" cy="140" r="1.5"/>
|
||||
<circle cx="100" cy="200" r="1.5"/>
|
||||
<circle cx="160" cy="200" r="1.5"/>
|
||||
<circle cx="220" cy="200" r="1.5"/>
|
||||
<circle cx="280" cy="200" r="1.5"/>
|
||||
<circle cx="340" cy="200" r="1.5"/>
|
||||
<circle cx="400" cy="200" r="1.5"/>
|
||||
<circle cx="460" cy="200" r="1.5"/>
|
||||
<circle cx="520" cy="200" r="1.5"/>
|
||||
<circle cx="580" cy="200" r="1.5"/>
|
||||
<circle cx="640" cy="200" r="1.5"/>
|
||||
<circle cx="100" cy="260" r="1.5"/>
|
||||
<circle cx="160" cy="260" r="1.5"/>
|
||||
<circle cx="220" cy="260" r="1.5"/>
|
||||
<circle cx="280" cy="260" r="1.5"/>
|
||||
<circle cx="340" cy="260" r="1.5"/>
|
||||
<circle cx="400" cy="260" r="1.5"/>
|
||||
<circle cx="460" cy="260" r="1.5"/>
|
||||
<circle cx="520" cy="260" r="1.5"/>
|
||||
<circle cx="580" cy="260" r="1.5"/>
|
||||
<circle cx="640" cy="260" r="1.5"/>
|
||||
<circle cx="100" cy="320" r="1.5"/>
|
||||
<circle cx="160" cy="320" r="1.5"/>
|
||||
<circle cx="220" cy="320" r="1.5"/>
|
||||
<circle cx="280" cy="320" r="1.5"/>
|
||||
<circle cx="340" cy="320" r="1.5"/>
|
||||
<circle cx="400" cy="320" r="1.5"/>
|
||||
<circle cx="460" cy="320" r="1.5"/>
|
||||
<circle cx="520" cy="320" r="1.5"/>
|
||||
<circle cx="580" cy="320" r="1.5"/>
|
||||
<circle cx="640" cy="320" r="1.5"/>
|
||||
</g>
|
||||
|
||||
<!-- Onboarding Overlay -->
|
||||
<!-- Semi-transparent backdrop -->
|
||||
<rect x="1" y="38" width="738" height="361" fill="black" opacity="0.15" rx="0"/>
|
||||
|
||||
<!-- Overlay card -->
|
||||
<rect x="195" y="135" width="350" height="200" rx="16" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||
|
||||
<!-- Pencil icon -->
|
||||
<circle cx="370" cy="175" r="22" fill="#F0FDFA"/>
|
||||
<line x1="360" y1="185" x2="380" y2="165" stroke="#0D9488" stroke-width="3" stroke-linecap="round"/>
|
||||
<circle cx="360" cy="185" r="3" fill="#0D9488"/>
|
||||
|
||||
<!-- Welcome text -->
|
||||
<text x="370" y="218" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="bold" fill="#1E293B">Welcome to your Napkin!</text>
|
||||
<text x="370" y="244" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#64748B">Sketch your ideas here — draw, write, add sticky notes.</text>
|
||||
<text x="370" y="262" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#64748B">When you're done, click "Share with Copilot"</text>
|
||||
<text x="370" y="280" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#64748B">to send your sketch back to the CLI.</text>
|
||||
|
||||
<!-- Got it button -->
|
||||
<rect x="320" y="296" width="100" height="32" rx="16" fill="#0D9488"/>
|
||||
<text x="370" y="316" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="13" font-weight="bold" fill="white">Got it!</text>
|
||||
</g>
|
||||
|
||||
<!-- Callout annotations -->
|
||||
<!-- Toolbar callout -->
|
||||
<rect x="608" y="68" width="90" height="26" rx="6" fill="#0D9488" opacity="0.12"/>
|
||||
<text x="653" y="85" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#0D9488" font-weight="bold">Drawing tools</text>
|
||||
<path d="M608,82 L590,82" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-dasharray="3,2"/>
|
||||
<polygon points="592,79 586,82 592,85" fill="#0D9488"/>
|
||||
|
||||
<!-- Share button callout -->
|
||||
<path d="M726,396 C746,396 756,416 756,436" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-dasharray="3,2"/>
|
||||
<polygon points="753,434 756,442 759,434" fill="#0D9488"/>
|
||||
<rect x="690" y="444" width="104" height="26" rx="6" fill="#0D9488" opacity="0.12"/>
|
||||
<text x="742" y="461" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#0D9488" font-weight="bold">Send to Copilot</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.0 KiB |
143
skills/napkin/assets/step3-draw.svg
Normal file
143
skills/napkin/assets/step3-draw.svg
Normal file
@@ -0,0 +1,143 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480">
|
||||
<defs>
|
||||
<linearGradient id="stickyYellow" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FEF9C3"/>
|
||||
<stop offset="100%" stop-color="#FEF3C7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="stickyPink" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FCE7F3"/>
|
||||
<stop offset="100%" stop-color="#FBCFE8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="stickyBlue" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#DBEAFE"/>
|
||||
<stop offset="100%" stop-color="#BFDBFE"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="480" rx="12" fill="#F8FAFB"/>
|
||||
|
||||
<!-- Step indicator -->
|
||||
<circle cx="46" cy="28" r="16" fill="#0D9488"/>
|
||||
<text x="46" y="33" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold" fill="white">3</text>
|
||||
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">Sketch your ideas on the whiteboard</text>
|
||||
|
||||
<!-- Browser Window -->
|
||||
<g transform="translate(30, 52)">
|
||||
<!-- Browser frame -->
|
||||
<rect width="740" height="390" rx="10" fill="white" stroke="#D1D5DB" stroke-width="1.5"/>
|
||||
<!-- Browser chrome -->
|
||||
<rect width="740" height="38" rx="10" fill="#F1F5F9"/>
|
||||
<rect x="0" y="28" width="740" height="10" fill="#F1F5F9"/>
|
||||
<circle cx="18" cy="19" r="5.5" fill="#FF5F57"/>
|
||||
<circle cx="36" cy="19" r="5.5" fill="#FFBD2E"/>
|
||||
<circle cx="54" cy="19" r="5.5" fill="#28C840"/>
|
||||
<rect x="80" y="8" width="580" height="22" rx="6" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||
<text x="96" y="23" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">napkin.html</text>
|
||||
|
||||
<!-- Whiteboard canvas -->
|
||||
<rect x="1" y="38" width="738" height="351" fill="white"/>
|
||||
|
||||
<!-- Toolbar -->
|
||||
<rect x="120" y="48" width="500" height="36" rx="18" fill="white" stroke="#E2E8F0" stroke-width="1.5"/>
|
||||
<!-- Pen tool ACTIVE -->
|
||||
<g transform="translate(155, 54)">
|
||||
<rect width="60" height="24" rx="12" fill="#0D9488"/>
|
||||
<line x1="16" y1="18" x2="26" y2="6" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="16" cy="18" r="2" fill="white"/>
|
||||
<text x="34" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="white" font-weight="bold">Pen</text>
|
||||
</g>
|
||||
<!-- Other tools -->
|
||||
<g transform="translate(230, 54)">
|
||||
<rect width="76" height="24" rx="12" fill="#F1F5F9"/>
|
||||
<rect x="10" y="6" width="12" height="12" rx="2" fill="none" stroke="#64748B" stroke-width="1.5"/>
|
||||
<text x="30" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Shapes</text>
|
||||
</g>
|
||||
<g transform="translate(320, 54)">
|
||||
<rect width="70" height="24" rx="12" fill="#F1F5F9"/>
|
||||
<line x1="12" y1="16" x2="24" y2="8" stroke="#64748B" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<polygon points="22,5 28,8 22,11" fill="#64748B"/>
|
||||
<text x="34" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Arrow</text>
|
||||
</g>
|
||||
<g transform="translate(404, 54)">
|
||||
<rect width="80" height="24" rx="12" fill="#F1F5F9"/>
|
||||
<rect x="10" y="6" width="12" height="12" rx="1" fill="#FEF3C7" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<text x="28" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Sticky Note</text>
|
||||
</g>
|
||||
<g transform="translate(498, 54)">
|
||||
<rect width="70" height="24" rx="12" fill="#F1F5F9"/>
|
||||
<rect x="10" y="8" width="14" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.5"/>
|
||||
<text x="30" y="16" font-family="Arial, Helvetica, sans-serif" font-size="9" fill="#64748B">Eraser</text>
|
||||
</g>
|
||||
|
||||
<!-- ======= USER DRAWINGS ======= -->
|
||||
|
||||
<!-- Flowchart Box 1: "Draft" -->
|
||||
<rect x="80" y="130" width="130" height="60" rx="8" fill="white" stroke="#475569" stroke-width="2"/>
|
||||
<text x="145" y="158" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#1E293B" font-weight="bold">Draft</text>
|
||||
<text x="145" y="176" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">proposal</text>
|
||||
|
||||
<!-- Arrow 1 to 2 -->
|
||||
<line x1="210" y1="160" x2="270" y2="160" stroke="#475569" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<polygon points="268,154 280,160 268,166" fill="#475569"/>
|
||||
|
||||
<!-- Flowchart Box 2: "Review" -->
|
||||
<rect x="280" y="130" width="130" height="60" rx="8" fill="white" stroke="#475569" stroke-width="2"/>
|
||||
<text x="345" y="158" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#1E293B" font-weight="bold">Review</text>
|
||||
<text x="345" y="176" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">with team</text>
|
||||
|
||||
<!-- Arrow 2 to 3 -->
|
||||
<line x1="410" y1="160" x2="470" y2="160" stroke="#475569" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<polygon points="468,154 480,160 468,166" fill="#475569"/>
|
||||
|
||||
<!-- Flowchart Box 3: "Ship" -->
|
||||
<rect x="480" y="130" width="130" height="60" rx="8" fill="white" stroke="#475569" stroke-width="2"/>
|
||||
<text x="545" y="158" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#1E293B" font-weight="bold">Ship</text>
|
||||
<text x="545" y="176" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">to customer</text>
|
||||
|
||||
<!-- Sticky Note 1: Yellow -->
|
||||
<g transform="translate(75, 225) rotate(-2)">
|
||||
<rect width="140" height="90" rx="3" fill="url(#stickyYellow)" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<text x="14" y="28" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#92400E" font-weight="bold">Need legal</text>
|
||||
<text x="14" y="48" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#92400E" font-weight="bold">review</text>
|
||||
<text x="14" y="72" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#B45309">before shipping!</text>
|
||||
</g>
|
||||
|
||||
<!-- Sticky Note 2: Pink -->
|
||||
<g transform="translate(260, 240) rotate(1.5)">
|
||||
<rect width="130" height="80" rx="3" fill="url(#stickyPink)" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<text x="14" y="28" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#9D174D" font-weight="bold">Q2 deadline</text>
|
||||
<text x="14" y="50" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#BE185D">June 30th</text>
|
||||
</g>
|
||||
|
||||
<!-- Sticky Note 3: Blue -->
|
||||
<g transform="translate(440, 230) rotate(-1)">
|
||||
<rect width="140" height="85" rx="3" fill="url(#stickyBlue)" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<text x="14" y="28" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#1E40AF" font-weight="bold">Check with</text>
|
||||
<text x="14" y="48" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#1E40AF" font-weight="bold">Sarah</text>
|
||||
<text x="14" y="70" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#2563EB">re: compliance</text>
|
||||
</g>
|
||||
|
||||
<!-- Freehand circle around "Review" box -->
|
||||
<ellipse cx="345" cy="160" rx="85" ry="45" fill="none" stroke="#EF4444" stroke-width="2" stroke-dasharray="6,3" opacity="0.7"/>
|
||||
|
||||
<!-- Freehand underline under "Ship" -->
|
||||
<path d="M490,186 C510,192 540,190 600,188" fill="none" stroke="#F59E0B" stroke-width="2.5" stroke-linecap="round" opacity="0.7"/>
|
||||
|
||||
<!-- Small star/asterisk near Review box -->
|
||||
<text x="420" y="128" font-family="Arial, Helvetica, sans-serif" font-size="20" fill="#EF4444" font-weight="bold">*</text>
|
||||
<text x="430" y="128" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#EF4444">important!</text>
|
||||
|
||||
<!-- Freehand question marks -->
|
||||
<text x="620" y="170" font-family="Arial, Helvetica, sans-serif" font-size="18" fill="#94A3B8">?</text>
|
||||
<text x="636" y="162" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#CBD5E1">?</text>
|
||||
|
||||
<!-- Share button (still visible) -->
|
||||
<rect x="540" y="348" width="180" height="34" rx="17" fill="#0D9488"/>
|
||||
<text x="582" y="369" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="white" font-weight="bold">Share with Copilot</text>
|
||||
</g>
|
||||
|
||||
<!-- Callout annotation -->
|
||||
<rect x="30" y="448" width="440" height="26" rx="8" fill="#0D9488" opacity="0.1"/>
|
||||
<text x="42" y="465" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0D9488" font-weight="bold">Draw, sketch, and add notes — whatever helps you think</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.5 KiB |
98
skills/napkin/assets/step4-share.svg
Normal file
98
skills/napkin/assets/step4-share.svg
Normal file
@@ -0,0 +1,98 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480">
|
||||
<defs>
|
||||
<linearGradient id="popupShadow" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#0D9488" stop-opacity="0.08"/>
|
||||
<stop offset="100%" stop-color="#0D9488" stop-opacity="0.02"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="480" rx="12" fill="#F8FAFB"/>
|
||||
|
||||
<!-- Step indicator -->
|
||||
<circle cx="46" cy="28" r="16" fill="#0D9488"/>
|
||||
<text x="46" y="33" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold" fill="white">4</text>
|
||||
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">Share your sketch with Copilot</text>
|
||||
|
||||
<!-- Browser Window -->
|
||||
<g transform="translate(30, 52)">
|
||||
<!-- Browser frame -->
|
||||
<rect width="740" height="340" rx="10" fill="white" stroke="#D1D5DB" stroke-width="1.5"/>
|
||||
<!-- Browser chrome -->
|
||||
<rect width="740" height="38" rx="10" fill="#F1F5F9"/>
|
||||
<rect x="0" y="28" width="740" height="10" fill="#F1F5F9"/>
|
||||
<circle cx="18" cy="19" r="5.5" fill="#FF5F57"/>
|
||||
<circle cx="36" cy="19" r="5.5" fill="#FFBD2E"/>
|
||||
<circle cx="54" cy="19" r="5.5" fill="#28C840"/>
|
||||
<rect x="80" y="8" width="580" height="22" rx="6" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||
<text x="96" y="23" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">napkin.html</text>
|
||||
|
||||
<!-- Whiteboard canvas (slightly dimmed to show overlay context) -->
|
||||
<rect x="1" y="38" width="738" height="301" fill="#FAFAFA"/>
|
||||
|
||||
<!-- Simplified whiteboard content (faded to focus on the popup) -->
|
||||
<!-- Mini flowchart -->
|
||||
<rect x="80" y="100" width="100" height="45" rx="6" fill="white" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||
<text x="130" y="127" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">Draft</text>
|
||||
<line x1="180" y1="122" x2="230" y2="122" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||
<polygon points="228,118 236,122 228,126" fill="#CBD5E1" opacity="0.6"/>
|
||||
<rect x="236" y="100" width="100" height="45" rx="6" fill="white" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||
<text x="286" y="127" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">Review</text>
|
||||
<line x1="336" y1="122" x2="386" y2="122" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||
<polygon points="384,118 392,122 384,126" fill="#CBD5E1" opacity="0.6"/>
|
||||
<rect x="392" y="100" width="100" height="45" rx="6" fill="white" stroke="#CBD5E1" stroke-width="1.5" opacity="0.6"/>
|
||||
<text x="442" y="127" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#94A3B8">Ship</text>
|
||||
|
||||
<!-- Mini sticky notes (faded) -->
|
||||
<rect x="90" y="170" width="100" height="60" rx="2" fill="#FEF9C3" opacity="0.5"/>
|
||||
<rect x="260" y="175" width="90" height="55" rx="2" fill="#FCE7F3" opacity="0.5"/>
|
||||
<rect x="420" y="168" width="100" height="58" rx="2" fill="#DBEAFE" opacity="0.5"/>
|
||||
|
||||
<!-- Share with Copilot button — HIGHLIGHTED with glow -->
|
||||
<rect x="498" y="293" width="180" height="36" rx="18" fill="#059669"/>
|
||||
<rect x="496" y="291" width="184" height="40" rx="20" fill="none" stroke="#0D9488" stroke-width="3" opacity="0.5"/>
|
||||
<text x="540" y="315" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="white" font-weight="bold">Share with Copilot</text>
|
||||
|
||||
<!-- Click cursor icon near button -->
|
||||
<g transform="translate(660, 300)">
|
||||
<path d="M0,0 L0,18 L5,14 L9,22 L13,20 L9,12 L15,12 Z" fill="#1E293B" stroke="white" stroke-width="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Confirmation Popup -->
|
||||
<rect x="190" y="165" width="360" height="145" rx="14" fill="white" stroke="#0D9488" stroke-width="2"/>
|
||||
<!-- Green check circle -->
|
||||
<circle cx="370" cy="200" r="18" fill="#D1FAE5"/>
|
||||
<path d="M360,200 L367,207 L381,193" fill="none" stroke="#059669" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- Popup text -->
|
||||
<text x="370" y="236" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#1E293B">Shared with Copilot!</text>
|
||||
<text x="370" y="258" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">A screenshot was saved and your text was copied.</text>
|
||||
<text x="370" y="276" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#64748B">Go back to your terminal to continue.</text>
|
||||
<!-- Tiny icons for PNG + text -->
|
||||
<rect x="285" y="286" width="50" height="16" rx="4" fill="#F0FDFA" stroke="#0D9488" stroke-width="0.8"/>
|
||||
<text x="310" y="297" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="8" fill="#0D9488">PNG</text>
|
||||
<rect x="345" y="286" width="50" height="16" rx="4" fill="#F0FDFA" stroke="#0D9488" stroke-width="0.8"/>
|
||||
<text x="370" y="297" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="8" fill="#0D9488">TEXT</text>
|
||||
<!-- Check marks -->
|
||||
<text x="272" y="298" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#059669">✓</text>
|
||||
<text x="332" y="298" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#059669">✓</text>
|
||||
</g>
|
||||
|
||||
<!-- Annotation Arrow 1: Pointing to Share button -->
|
||||
<g transform="translate(0, 0)">
|
||||
<rect x="590" y="395" width="180" height="28" rx="8" fill="#0D9488" opacity="0.12"/>
|
||||
<text x="680" y="413" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">Click when you're ready</text>
|
||||
<path d="M680,395 C680,380 670,365 660,355" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||||
<polygon points="656,357 660,349 664,357" fill="#0D9488"/>
|
||||
</g>
|
||||
|
||||
<!-- Annotation Arrow 2: Terminal instruction -->
|
||||
<g transform="translate(0, 0)">
|
||||
<rect x="30" y="415" width="490" height="52" rx="10" fill="white" stroke="#0D9488" stroke-width="1.5"/>
|
||||
<!-- Terminal mini icon -->
|
||||
<rect x="46" y="426" width="26" height="18" rx="3" fill="#1E1B3A"/>
|
||||
<text x="52" y="439" font-family="monospace" font-size="8" fill="#0D9488">_</text>
|
||||
<text x="82" y="437" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#334155" font-weight="bold">Next: Go back to your terminal and say:</text>
|
||||
<rect x="82" y="446" width="172" height="18" rx="4" fill="#F0FDFA"/>
|
||||
<text x="92" y="458" font-family="monospace" font-size="11" fill="#0D9488" font-weight="bold">check the napkin</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
112
skills/napkin/assets/step5-response.svg
Normal file
112
skills/napkin/assets/step5-response.svg
Normal file
@@ -0,0 +1,112 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="480" viewBox="0 0 800 480">
|
||||
<defs>
|
||||
<linearGradient id="termBg5" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#2D2B55"/>
|
||||
<stop offset="100%" stop-color="#1E1B3A"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="800" height="480" rx="12" fill="#F8FAFB"/>
|
||||
|
||||
<!-- Step indicator -->
|
||||
<circle cx="46" cy="28" r="16" fill="#0D9488"/>
|
||||
<text x="46" y="33" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold" fill="white">5</text>
|
||||
<text x="72" y="33" font-family="Arial, Helvetica, sans-serif" font-size="15" font-weight="bold" fill="#334155">Copilot reads your napkin and responds</text>
|
||||
|
||||
<!-- Terminal Window -->
|
||||
<g transform="translate(40, 55)">
|
||||
<!-- Terminal chrome -->
|
||||
<rect width="550" height="370" rx="10" fill="#1E1B3A" stroke="#3D3A5C" stroke-width="1"/>
|
||||
<!-- Title bar -->
|
||||
<rect width="550" height="36" rx="10" fill="#2D2B55"/>
|
||||
<rect x="0" y="26" width="550" height="10" fill="#2D2B55"/>
|
||||
<!-- Window buttons -->
|
||||
<circle cx="20" cy="18" r="6" fill="#FF5F57"/>
|
||||
<circle cx="40" cy="18" r="6" fill="#FFBD2E"/>
|
||||
<circle cx="60" cy="18" r="6" fill="#28C840"/>
|
||||
<text x="275" y="22" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#8B87B0">Terminal</text>
|
||||
|
||||
<!-- User prompt -->
|
||||
<text x="20" y="62" font-family="monospace" font-size="13" fill="#0D9488">❯</text>
|
||||
<text x="36" y="62" font-family="monospace" font-size="13" fill="#E0DEF4">check the napkin</text>
|
||||
|
||||
<!-- Loading indicator -->
|
||||
<text x="20" y="88" font-family="monospace" font-size="13" fill="#0D9488">✓</text>
|
||||
<text x="36" y="88" font-family="monospace" font-size="13" fill="#A5F3FC">Reading your napkin...</text>
|
||||
|
||||
<!-- Copilot response header -->
|
||||
<text x="20" y="120" font-family="monospace" font-size="13" fill="#C4B5FD">Copilot</text>
|
||||
|
||||
<!-- Response content - warm, conversational -->
|
||||
<text x="20" y="148" font-family="monospace" font-size="12" fill="#E0DEF4">I can see your sketch! Here's what I'm picking up:</text>
|
||||
|
||||
<!-- Response body -->
|
||||
<text x="20" y="178" font-family="monospace" font-size="12" fill="#E0DEF4">You've drawn a three-stage workflow:</text>
|
||||
<text x="20" y="200" font-family="monospace" font-size="12" fill="#A5F3FC"> Draft</text>
|
||||
<text x="80" y="200" font-family="monospace" font-size="12" fill="#64748B">→</text>
|
||||
<text x="100" y="200" font-family="monospace" font-size="12" fill="#A5F3FC">Review</text>
|
||||
<text x="165" y="200" font-family="monospace" font-size="12" fill="#64748B">→</text>
|
||||
<text x="185" y="200" font-family="monospace" font-size="12" fill="#A5F3FC">Ship</text>
|
||||
|
||||
<text x="20" y="228" font-family="monospace" font-size="12" fill="#E0DEF4">Your sticky notes highlight some key items:</text>
|
||||
|
||||
<!-- Sticky note references -->
|
||||
<text x="20" y="254" font-family="monospace" font-size="12" fill="#FBBF24">■</text>
|
||||
<text x="36" y="254" font-family="monospace" font-size="12" fill="#FEF3C7">"Need legal review" — before the Ship phase</text>
|
||||
<text x="20" y="276" font-family="monospace" font-size="12" fill="#F472B6">■</text>
|
||||
<text x="36" y="276" font-family="monospace" font-size="12" fill="#FCE7F3">"Q2 deadline" — June 30th</text>
|
||||
<text x="20" y="298" font-family="monospace" font-size="12" fill="#60A5FA">■</text>
|
||||
<text x="36" y="298" font-family="monospace" font-size="12" fill="#DBEAFE">"Check with Sarah" — re: compliance</text>
|
||||
|
||||
<text x="20" y="328" font-family="monospace" font-size="12" fill="#E0DEF4">It looks like you're planning a review workflow</text>
|
||||
<text x="20" y="348" font-family="monospace" font-size="12" fill="#E0DEF4">with a legal gate. Would you like me to help you</text>
|
||||
<text x="20" y="368" font-family="monospace" font-size="12" fill="#E0DEF4">turn this into a checklist or project plan?</text>
|
||||
|
||||
<!-- Cursor -->
|
||||
<rect x="20" y="385" width="8" height="14" fill="#0D9488" opacity="0.8"/>
|
||||
</g>
|
||||
|
||||
<!-- Annotation callout -->
|
||||
<g transform="translate(608, 75)">
|
||||
<rect width="170" height="84" rx="10" fill="#0D9488" opacity="0.1"/>
|
||||
<text x="85" y="24" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">Copilot sees your</text>
|
||||
<text x="85" y="42" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">drawings and text,</text>
|
||||
<text x="85" y="60" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">then responds in</text>
|
||||
<text x="85" y="78" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" fill="#0D9488" font-weight="bold">plain English</text>
|
||||
</g>
|
||||
<!-- Arrow from annotation to terminal content -->
|
||||
<path d="M608,130 C598,140 596,150 594,160" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||||
<polygon points="590,158 594,166 598,158" fill="#0D9488"/>
|
||||
|
||||
<!-- What Copilot understood panel -->
|
||||
<g transform="translate(608, 190)">
|
||||
<rect width="170" height="230" rx="10" fill="white" stroke="#E2E8F0" stroke-width="1"/>
|
||||
<text x="85" y="24" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="11" font-weight="bold" fill="#334155">What Copilot understood:</text>
|
||||
<line x1="15" y1="34" x2="155" y2="34" stroke="#E2E8F0" stroke-width="1"/>
|
||||
|
||||
<!-- Mini flowchart icon -->
|
||||
<rect x="15" y="48" width="14" height="14" rx="2" fill="#F0FDFA" stroke="#0D9488" stroke-width="1"/>
|
||||
<text x="35" y="59" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">3-stage workflow</text>
|
||||
|
||||
<!-- Sticky note icon -->
|
||||
<rect x="15" y="74" width="14" height="14" rx="1" fill="#FEF9C3" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<text x="35" y="85" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">Legal review needed</text>
|
||||
|
||||
<!-- Calendar icon -->
|
||||
<rect x="15" y="100" width="14" height="14" rx="2" fill="#FCE7F3" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<text x="35" y="111" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">Q2 deadline (June 30)</text>
|
||||
|
||||
<!-- Person icon -->
|
||||
<rect x="15" y="126" width="14" height="14" rx="2" fill="#DBEAFE" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<text x="35" y="137" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">Follow up with Sarah</text>
|
||||
|
||||
<!-- Annotation icon -->
|
||||
<rect x="15" y="152" width="14" height="14" rx="7" fill="#FEE2E2" stroke="#EF4444" stroke-width="0.8"/>
|
||||
<text x="35" y="163" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#475569">Review step = priority</text>
|
||||
|
||||
<line x1="15" y1="180" x2="155" y2="180" stroke="#E2E8F0" stroke-width="1"/>
|
||||
<text x="85" y="200" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#0D9488" font-weight="bold">Everything from your</text>
|
||||
<text x="85" y="216" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="10" fill="#0D9488" font-weight="bold">napkin — captured!</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
Reference in New Issue
Block a user