claude-draw

Рукописный ввод для Claude Code. Claude задаёт визуальный вопрос, на любом удобном вам устройстве появляется холст, вы рисуете ответ, Claude считывает его.

Два режима: пустой холст для наброска идеи и аннотация, когда Claude помещает скриншот и просит вас пометить его. Второй окупает себя, когда описать визуальное изменение словами дольше, чем просто указать на него.

Требования

Node 18 или новее в PATH. Больше ничего. Никаких npm install, никаких зависимостей.

Related MCP server: Shared Whiteboard

Установка

Репозиторий — это собственный маркетплейс с одним плагином, поэтому на новой машине нужны две команды:

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

Или вместо этого поместите его в каталог skills — тогда он будет загружаться в каждой сессии без шага установки:

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

В любом случае перезапустите Claude Code. Проверьте с помощью claude plugin list и убедитесь, что MCP-сервер claude-draw подключён.

В плагине нет ничего привязанного к конкретному пути или ОС: лаунчер браузера выбирает start, open или xdg-open в зависимости от платформы, а все пути разрешаются относительно корня плагина.

Использование

Claude управляет им через MCP. Вручную вы ничего не запускаете.

• request_drawing — запрашивает у вас набросок или аннотацию и ждёт.

• draw_status — сообщает, подключён ли холст, и выдаёт вам URL-адреса.

• open_canvas — открывает холст на машине, где работает Claude.

Введите /draw, чтобы самостоятельно запросить холст.

Холст

Перо, линия, стрелка, прямоугольник, эллипс, заливка и ластик — в шести цветах. Клавиши: P L A B O F E — инструменты, 1-6 — цвет, [ ] — размер, Ctrl+Z — отмена, Ctrl+V — вставить изображение, Ctrl+Enter — отправить. Изображения также можно перетаскивать в окно.

У заливки два представления о границе, и повторный выбор инструмента переключает их. Fill: shape останавливается только на ваших собственных пометках, поэтому нарисованный вами контур заливается сплошным цветом в одно касание, что бы под ним ни находилось. Fill: image останавливается также на границах внутри картинки — для раскрашивания области скриншота, которую вы не обводили. В обоих случаях краска ложится на слой пометок, так что ластик убирает её, не повреждая изображение.

Кнопка Send сначала показывает вам сведённое изображение и подпись, Enter — подтвердить, Esc — вернуться. «Send me a screenshot» — это другое направление: он просит Claude что-то захватить и отправить обратно для аннотирования, что лучше, чем искать файл на планшете. Всё, что находится в поле подписи, отправляется вместе с ним, так что вы можете указать, что хотите увидеть на картинке. «Skip» сообщает Claude, что вы не отвечаете на этот вопрос.

Рисование с другого устройства

По умолчанию выключено: демон привязывается только к loopback, поэтому холст доступен только с этой машины и ниоткуда больше. Включите эту опцию — и планшет, телефон или Chromebook в той же Wi-Fi-сети смогут служить поверхностью для рисования, пока Claude работает на вашем рабочем столе.

1. Установите CLAUDE_DRAW_LAN=1 в окружении, в котором работает Claude Code, например в settings.json:

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

   Уже запущенный демон сохраняет старую привязку. Перезапустите Claude Code или попросите Claude выполнить draw_status — он сообщит, когда работающий демон и настройка расходятся.

2. Попросите Claude выполнить draw_status, чтобы получить LAN-URL, например http://192.168.1.20:7331/.

3. Откройте его на устройстве и оставьте вкладку открытой.

4. Все последующие запросы появляются на этой странице автоматически. Без обновления и повторного открытия.

Добавьте страницу в закладки один раз на каждом устройстве.

Брандмауэр. Входящий TCP на порту 7331 должен быть разрешён для частных сетей.

• Windows: New-NetFirewallRule -DisplayName "Claude draw" -Direction Inbound -Action Allow -Protocol TCP -LocalPort 7331-7340 -Profile Private -RemoteAddress LocalSubnet -Program "<path to node.exe>" из командной строки с правами администратора.

• macOS: при первом запуске появится запрос на разрешение входящих подключений для node. Согласитесь.

• Linux: разрешите порт в том брандмауэре, который вы используете, если он есть.

Безопасность

Демон привязывается только к loopback, если вы не включите эту возможность, поэтому из коробки ничто в вашей сети не сможет до него добраться.

При CLAUDE_DRAW_LAN=1 два направления намеренно остаются раздельными. Любое устройство в локальной сети может загрузить холст и отправить рисунок. Только loopback может создать запрос или остановить демон, поэтому устройство в вашей сети может отвечать на вопросы Claude, но не может управлять вашей сессией. Это стоит знать перед включением: аутентификации нет, так что любой в этой сети может увидеть промпт и изображение, которое вас просили аннотировать.

Конфигурация

Структура

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 существует, чтобы зафиксировать "type": "commonjs". Node определяет тип модуля по ближайшему package.json вверх по дереву, поэтому, если поместить этот плагин внутрь проекта, где объявлен "type": "module", каждый require будет выбрасывать ошибку. Не удаляйте его.

Тесты

npm test

Запускает демон на свободном порту, устанавливает реальное SSE-соединение, отправляет запросы, отправляет и пропускает рисунки, а также проверяет MCP stdio-протокол. Без сети, без фикстур, без зависимостей. При сбое завершается с ненулевым кодом.

Демон запускается при первом вызове request_drawing и остаётся работать, благодаря чему страница холста остаётся живой между запросами, а не оказывается на мёртвой странице.