claude-draw

Entrada dibujada a mano para Claude Code. Claude hace una pregunta visual, aparece un lienzo en el dispositivo que quieras, dibujas la respuesta y Claude la lee.

Dos modos: un lienzo en blanco para esbozar una idea, y anotación, donde Claude coloca una captura de pantalla y te pide que la marques. El segundo es el que merece la pena, para esos momentos en los que describir un cambio visual con palabras es más lento que señalarlo.

Requisitos

Node 18 o superior en el PATH. Nada más. Sin npm install, sin dependencias.

Related MCP server: the-mogiyoon-mcp

Instalación

El repositorio es su propio marketplace de un solo plugin, así que una máquina nueva necesita dos comandos:

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

O colócalo en un directorio de skills en su lugar, lo que lo carga en cada sesión sin paso de instalación:

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

En cualquier caso, reinicia Claude Code. Confírmalo con claude plugin list y comprueba que el servidor MCP claude-draw está conectado.

Nada en el plugin es específico de una ruta o de un sistema operativo: el lanzador del navegador elige start, open o xdg-open según la plataforma, y todas las rutas se resuelven en relación con la raíz del plugin.

Uso

Claude lo controla a través de MCP. No ejecutas nada a mano.

• request_drawing te pide un boceto o una anotación y espera.

• draw_status informa de si hay un lienzo conectado y te da las URLs.

• open_canvas abre el lienzo en la máquina en la que se está ejecutando Claude.

Escribe /draw para pedir un lienzo tú mismo.

El lienzo

Lápiz, línea, flecha, recuadro, elipse, relleno y borrador, en seis colores. Teclas: P L A B O F E para las herramientas, 1-6 para el color, [ ] para el tamaño, Ctrl+Z deshacer, Ctrl+V para pegar una imagen, Ctrl+Enter para enviar. Las imágenes también se pueden soltar en la ventana.

El relleno tiene dos conceptos de borde, y volver a seleccionar la herramienta alterna entre ellos. Relleno: forma se detiene solo en tus propias marcas, así que un contorno que hayas dibujado se rellena por completo con un solo toque, independientemente de lo que haya debajo. Relleno: imagen también se detiene en los bordes de la imagen, para colorear una región de una captura de pantalla que no hayas contorneado tú mismo. En cualquier caso, la pintura se aplica en la capa de marcas, así que el borrador la levanta sin dañar la imagen.

Al enviar, primero se te muestra la imagen aplanada y el pie de foto, con Enter para confirmar y Esc para volver atrás. «Envíame una captura de pantalla» es la otra dirección: le dice a Claude que capture algo y lo envíe de vuelta para que lo anotes, lo que es mejor que andar buscando un archivo en una tableta. Lo que haya en el cuadro de pie de foto se envía junto con ella, así que puedes decir de qué quieres una imagen. «Omitir» le dice a Claude que no vas a responder a esta.

Dibujar desde otro dispositivo

Desactivado por defecto: el daemon se vincula solo a loopback, así que el lienzo es accesible desde esta máquina y desde ningún otro sitio. Actívalo y una tableta, un teléfono o un Chromebook en la misma Wi-Fi puede ser la superficie de dibujo mientras Claude se ejecuta en tu escritorio.

1. Establece CLAUDE_DRAW_LAN=1 en el entorno en el que se ejecuta Claude Code, p. ej. en settings.json:

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

   Un daemon que ya se está ejecutando mantiene su vinculación anterior. Reinicia Claude Code, o pídele a Claude draw_status, que indica cuándo el daemon en ejecución y la configuración no coinciden.

2. Pídele a Claude draw_status para obtener la URL de la LAN, algo como http://192.168.1.20:7331/.

3. Ábrela en el dispositivo y deja la pestaña abierta.

4. Cada solicitud posterior aparece en esa página automáticamente. Sin actualizar, sin reabrir.

Añádela a marcadores una vez por dispositivo.

Firewall. Hay que permitir el TCP entrante en el puerto 7331 para redes privadas.

• Windows: New-NetFirewallRule -DisplayName "Claude draw" -Direction Inbound -Action Allow -Protocol TCP -LocalPort 7331-7340 -Profile Private -RemoteAddress LocalSubnet -Program "<path to node.exe>" desde un símbolo del sistema elevado.

• macOS: la primera ejecución pide permitir conexiones entrantes para node. Acéptalo.

• Linux: permite el puerto en el firewall que uses, si usas alguno.

Seguridad

El daemon se vincula solo a loopback salvo que optes por ello, así que, de serie, nada en tu red puede alcanzarlo.

Con CLAUDE_DRAW_LAN=1 las dos direcciones se mantienen separadas deliberadamente. Cualquier cosa en la red local puede cargar el lienzo y enviar un dibujo. Solo loopback puede crear una solicitud o apagar el daemon, así que un dispositivo en tu red puede responder a las preguntas de Claude pero no puede manejar tu sesión. Conviene saberlo antes de activarlo: no hay autenticación, así que cualquiera en esa red puede ver el prompt y la imagen que se te pidió anotar.

Configuración

Estructura

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 existe para fijar "type": "commonjs". Node resuelve el tipo de módulo a partir del package.json más cercano en el árbol, así que, de otro modo, colocar este plugin dentro de un proyecto que declare "type": "module" haría que cada require lanzara un error. No lo elimines.

Pruebas

npm test

Inicia un daemon en un puerto libre, maneja una conexión SSE real, envía solicitudes, presenta y omite dibujos, y ejercita el protocolo stdio de MCP. Sin red, sin fixtures, sin dependencias. Termina con un código de salida distinto de cero si falla.

El daemon se inicia en la primera llamada a request_drawing y permanece activo, que es lo que mantiene viva la página del lienzo entre solicitudes en lugar de dejarla en una página muerta.