Napkin — Tableau blanc visuel pour Copilot CLI

Napkin offre aux utilisateurs un tableau blanc basé sur navigateur où ils peuvent dessiner, esquisser et ajouter des post-it pour explorer visuellement leurs idées. L'agent relit le contenu du tableau (via un snapshot PNG et des données JSON optionnelles) et répond de manière conversationnelle avec une analyse, des suggestions et les prochaines étapes.

Le public cible est constitué d'avocats, de chefs de produit et de parties prenantes commerciales — pas de développeurs logiciels. Gardez tout abordable et sans jargon.

Activation

Quand l'utilisateur invoque cette skill — en disant des choses comme « let's napkin », « open a napkin », « start a whiteboard » ou en utilisant la commande slash — faites ce qui suit :

Copiez le modèle HTML fourni des ressources de la skill vers le Bureau de l'utilisateur.
- Le modèle se trouve à assets/napkin.html relatif à ce fichier SKILL.md.
- Copiez-le vers ~/Desktop/napkin.html.
- Si ~/Desktop/napkin.html existe déjà, demandez à l'utilisateur s'il veut ouvrir celui existant ou recommencer avant de le remplacer.
Ouvrez-le dans le navigateur par défaut :
- macOS : open ~/Desktop/napkin.html
- Linux : xdg-open ~/Desktop/napkin.html
- Windows : start ~/Desktop/napkin.html

Dites à l'utilisateur quoi faire ensuite. Dites quelque chose de chaud et simple :

Votre napkin est ouvert dans votre navigateur !

Dessinez, esquissez ou ajoutez des post-it — tout ce qui vous aide à explorer votre idée.

Quand vous êtes prêt pour mon avis, cliquez sur le bouton vert « Share with Copilot » sur le tableau, puis revenez ici et dites « check the napkin ».

Lire le Napkin

Quand l'utilisateur dit « check the napkin », « look at the napkin », « what do you think », « read my napkin », ou quelque chose de similaire, suivez ces étapes :

Étape 1 — Lire le snapshot PNG (primaire)

Cherchez un fichier PNG appelé napkin-snapshot.png. Vérifiez ces emplacements dans l'ordre (le navigateur l'enregistre dans le dossier de téléchargement par défaut de l'utilisateur, qui varie) :

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

Utilisez l'outil view pour lire le PNG. Cela envoie l'image en tant que données encodées en base64 au modèle, qui peut l'interpréter visuellement. Le PNG est le moyen primaire par lequel l'agent comprend ce que l'utilisateur a dessiné — il capture les esquisses à main levée, les flèches, la mise en page spatiale, les annotations, les éléments entourés ou barrés, et tout ce qui se trouve sur le canevas.

Si le PNG n'est trouvé dans aucun des deux emplacements, ne le sautez PAS silencieusement. À la place, dites à l'utilisateur :

Je ne vois pas encore de snapshot de votre napkin. Voici ce qu'il faut faire :

1. Allez à votre tableau blanc dans le navigateur
2. Cliquez sur le bouton vert « Share with Copilot »
3. Revenez ici et dites « check the napkin » à nouveau

Le bouton enregistre une capture d'écran que je peux regarder.

Étape 2 — Lire le presse-papiers pour les données JSON structurées (supplémentaire)

Essayez aussi de récupérer les données JSON structurées du presse-papiers système. Le tableau blanc les copie automatiquement parallèlement au PNG.

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

Le JSON contient le contenu texte exact des post-it et des étiquettes texte, leurs positions et leurs couleurs. Ceci supplémente le PNG en vous donnant le texte précis qui pourrait être difficile à lire dans une capture d'écran.

Si le presse-papiers ne contient pas de données JSON, ce n'est pas grave — le PNG seul donne au modèle beaucoup avec quoi travailler. Ne traitez pas un presse-papiers manquant comme une erreur.

Étape 3 — Interpréter les deux sources ensemble

Synthétisez le snapshot visuel et le texte structuré en une compréhension cohérente de ce que l'utilisateur pense ou planifie :

Du PNG : Décrivez ce que vous voyez — esquisses, diagrammes, organigrammes, regroupements, flèches, mise en page spatiale, annotations, éléments entourés, éléments barrés, marques d'emphase.
Du JSON : Lisez le contenu texte exact des post-it et des étiquettes, en notant leurs positions et leurs couleurs.
Combinez les deux en une seule interprétation conversationnelle.

Étape 4 — Répondre de manière conversationnelle

Ne déversez pas de données brutes ou un résumé technique. Répondez comme un collaborateur qui a regardé l'esquisse d'un tableau blanc de quelqu'un. Exemples :

« Je vois que vous avez esquissé un processus en trois étapes — il semble que vous pensiez à [X] se transformant en [Y] puis en [Z]. Le post-it dans le coin dit '[texte]' — c'est une préoccupation sur laquelle vous voulez que je me concentre ? »
« Il semble que vous ayez regroupé ces quatre idées ensemble du côté gauche et les ayez séparées des deux éléments sur la droite. Pensez-vous que ce sont deux catégories différentes ? »
« Je vois que vous avez dessiné des flèches reliant [A] à [B] à [C] — est-ce le flux de travail que vous envisagez ? »

Étape 5 — Demander l'étape suivante

Terminez toujours en offrant une prochaine étape :

« Voulez-vous que je développe cela ? »
« Devrais-je transformer cela en document structuré ? »
« Voulez-vous que j'ajoute mes suggestions au napkin ? »

Répondre sur le Napkin

Quand l'utilisateur veut que l'agent ajoute du contenu au tableau blanc :

L'agent ne peut pas modifier directement l'état du canevas du fichier HTML — cela est géré par JavaScript s'exécutant dans le navigateur.
À la place, offrez des alternatives pratiques :
- Fournissez la réponse ici même dans le CLI et suggérez à l'utilisateur de l'ajouter au napkin manuellement.
- Offrez de créer un document séparé (markdown, mémo, checklist, etc.) basé sur ce qui a été interprété du napkin.
- Si cela a du sens, créez une copie mise à jour de napkin.html avec du contenu préchargé.

Ton et Style

Utilisez le même ton abordable et non technique que la skill noob-mode.
N'utilisez jamais du jargon développeur sans l'expliquer en anglais clair.
Traitez le napkin comme un espace créatif et collaboratif — pas un mécanisme d'entrée formel.
Soyez encourageant concernant les esquisses de l'utilisateur indépendamment de la qualité artistique.
Encadrez les réponses comme « construire votre pensée », pas « analyser votre entrée ».

Gestion des erreurs

Snapshot PNG non trouvé :

Je ne vois pas encore de snapshot de votre napkin. Voici ce qu'il faut faire :

1. Allez à votre tableau blanc dans le navigateur
2. Cliquez sur le bouton vert « Share with Copilot »
3. Revenez ici et dites « check the napkin » à nouveau

Le bouton enregistre une capture d'écran que je peux regarder.

Le fichier de tableau blanc n'existe pas sur le Bureau :

Il semble que nous n'ayons pas encore démarré un napkin. Voulez-vous que j'en ouvre un pour vous ?

Notes importantes

L'interprétation PNG est le canal primaire. Les modèles multimodaux peuvent lire et interpréter les données d'image encodées en base64 retournées par l'outil view.
Les données JSON du presse-papiers sont supplémentaires — elles fournissent du texte précis mais ne capturent pas les dessins à main levée.
Vérifiez toujours le PNG en premier. S'il n'est pas trouvé, invitez l'utilisateur à cliquer sur « Share with Copilot ».
Si le presse-papiers n'a pas de données JSON, continuez avec le PNG seul.
Le modèle HTML se trouve à assets/napkin.html relatif à ce fichier SKILL.md.
Si la skill noob-mode est également active, utilisez son format d'indicateur de risque (vert/jaune/rouge) lors de la demande de permissions de fichier ou bash.