claude-draw

Handschriftliche Eingabe für Claude Code. Claude stellt eine visuelle Frage, eine Leinwand erscheint auf dem Gerät deiner Wahl, du zeichnest die Antwort, Claude liest sie.

Zwei Modi: eine leere Leinwand zum Skizzieren einer Idee und Annotation, bei der Claude einen Screenshot als Grundlage einfügt und dich bittet, ihn zu markieren. Der zweite ist der, der sich lohnt, für die Zeiten, in denen das Beschreiben einer visuellen Änderung in Worten langsamer ist als das Zeigen darauf.

Voraussetzungen

Node 18 oder neuer im PATH. Sonst nichts. Kein npm install, keine Abhängigkeiten.

Related MCP server: the-mogiyoon-mcp

Installation

Das Repo ist sein eigener Single-Plugin-Marketplace, daher braucht eine frische Maschine zwei Befehle:

/plugin marketplace add ThePhilipWilson/claude-draw
/plugin install claude-draw@claude-draw

Oder lege es stattdessen in ein Skills-Verzeichnis, das bei jeder Sitzung ohne Installationsschritt geladen wird:

mkdir -p ~/.claude/skills
cp -r /path/to/claude-draw ~/.claude/skills/

Starte Claude Code in jedem Fall neu. Bestätige mit claude plugin list und prüfe, ob der claude-draw MCP-Server verbunden ist.

Nichts im Plugin ist pfad- oder betriebssystemspezifisch: Der Browser-Launcher wählt start, open oder xdg-open je nach Plattform, und alle Pfade werden relativ zum Plugin-Root aufgelöst.

Verwendung

Claude steuert es über MCP. Du führst nichts von Hand aus.

• request_drawing fragt dich nach einer Skizze oder einer Annotation und wartet.

• draw_status meldet, ob eine Leinwand verbunden ist, und gibt dir die URLs.

• open_canvas öffnet die Leinwand auf dem Rechner, auf dem Claude läuft.

Tippe /draw, um selbst nach einer Leinwand zu fragen.

Die Leinwand

Stift, Linie, Pfeil, Box, Ellipse, Füllung und Radierer, in sechs Farben. Tasten: P L A B O F E für Werkzeuge, 1-6 für Farbe, [ ] für Größe, Ctrl+Z Rückgängig, Ctrl+V zum Einfügen eines Bildes, Ctrl+Enter zum Senden. Bilder können auch auf das Fenster gezogen werden.

Die Füllung hat zwei Vorstellungen von einer Kante, und das erneute Auswählen des Werkzeugs wechselt zwischen ihnen. Füllung: Form stoppt nur an deinen eigenen Markierungen, sodass eine Umrisslinie, die du gezeichnet hast, mit einem Tipp vollständig gefüllt wird, egal was darunter liegt. Füllung: Bild stoppt auch an Kanten im Bild, zum Ausmalen einer Region eines Screenshots, den du nicht selbst umrandet hast. In beiden Fällen landet die Farbe auf der Markierungsebene, sodass der Radierer sie entfernt, ohne das Bild zu beschädigen.

Senden zeigt dir zuerst das flache Bild und die Beschriftung, mit Enter zum Bestätigen und Esc zum Zurückgehen. „Sende mir einen Screenshot“ ist die andere Richtung: Es sagt Claude, etwas zu erfassen und es dir zur Annotation zurückzuschicken, was besser ist, als auf einem Tablet nach einer Datei zu suchen. Was auch immer im Beschriftungsfeld steht, wird mitgesendet, sodass du sagen kannst, wovon du ein Bild möchtest. „Überspringen“ sagt Claude, dass du diese Frage nicht beantwortest.

Zeichnen von einem anderen Gerät

Standardmäßig deaktiviert: Der Daemon bindet nur Loopback, sodass die Leinwand von diesem Rechner aus erreichbar ist und von sonst niemandem. Schalte es ein, und ein Tablet, Telefon oder Chromebook im selben Wi-Fi kann die Zeichenfläche sein, während Claude auf deinem Desktop läuft.

1. Setze CLAUDE_DRAW_LAN=1 in der Umgebung, in der Claude Code läuft, z. B. in settings.json:

   { "env": { "CLAUDE_DRAW_LAN": "1" } }

   Ein bereits laufender Daemon behält seine alte Bindung. Starte Claude Code neu oder bitte Claude um draw_status, das anzeigt, wenn der laufende Daemon und die Einstellung nicht übereinstimmen.

2. Bitte Claude um draw_status, um die LAN-URL zu erhalten, etwa http://192.168.1.20:7331/.

3. Öffne sie auf dem Gerät und lasse den Tab offen.

4. Jede spätere Anfrage erscheint automatisch auf dieser Seite. Kein Aktualisieren, kein erneutes Öffnen.

Lege sie einmal pro Gerät als Lesezeichen an.

Firewall. Eingehendes TCP auf Port 7331 muss für private Netzwerke erlaubt sein.

• Windows: New-NetFirewallRule -DisplayName "Claude draw" -Direction Inbound -Action Allow -Protocol TCP -LocalPort 7331-7340 -Profile Private -RemoteAddress LocalSubnet -Program "<path to node.exe>" aus einer Eingabeaufforderung mit Administratorrechten.

• macOS: Beim ersten Start wirst du aufgefordert, eingehende Verbindungen für node zu erlauben. Akzeptiere.

• Linux: Erlaube den Port in deiner Firewall, falls du eine verwendest.

Sicherheit

Der Daemon bindet standardmäßig nur Loopback, es sei denn, du aktivierst es, sodass nichts in deinem Netzwerk es erreichen kann.

Mit CLAUDE_DRAW_LAN=1 bleiben die beiden Richtungen bewusst getrennt. Alles im lokalen Netzwerk kann die Leinwand laden und eine Zeichnung übermitteln. Nur Loopback kann eine Anfrage erstellen oder den Daemon herunterfahren, sodass ein Gerät in deinem Netzwerk Claudes Fragen beantworten kann, aber deine Sitzung nicht steuern kann. Wissenswert, bevor du es aktivierst: Es gibt keine Authentifizierung, sodass jeder in diesem Netzwerk die Eingabeaufforderung und das Bild sehen kann, das du annotieren sollst.

Konfiguration

Aufbau

claude-draw/
  .claude-plugin/plugin.json        manifest
  .claude-plugin/marketplace.json   single-plugin marketplace, for /plugin marketplace add
  .mcp.json                         MCP server registration
  package.json                      pins "type": "commonjs" (see below)
  skills/draw/SKILL.md              when to use it, how to read a drawing
  server/daemon.js                  long-lived HTTP + SSE daemon
  server/canvas.html                the canvas page, single file
  server/mcp.js                     stdio MCP server, starts the daemon on demand
  test/e2e.js                       full round-trip test, no fixtures needed

package.json existiert, um "type": "commonjs" festzulegen. Node löst den Modultyp aus dem nächstgelegenen package.json im Verzeichnisbaum auf. Wenn dieses Plugin also in ein Projekt eingefügt wird, das "type": "module" deklariert, würde sonst jeder require-Aufruf einen Fehler werfen. Entferne es nicht.

Tests

npm test

Startet einen Daemon auf einem freien Port, treibt eine echte SSE-Verbindung, sendet Anfragen, übermittelt und überspringt Zeichnungen und übt das MCP-stdio-Protokoll. Kein Netzwerk, keine Fixtures, keine Abhängigkeiten. Beendet sich mit einem Fehlercode bei Fehlern.

Der Daemon startet beim ersten request_drawing-Aufruf und bleibt aktiv, was die Leinwandseite zwischen Anfragen am Leben hält, statt sie auf einer toten Seite zu stranden.