claude-draw

Claude Code용 손그림 입력 도구입니다. Claude가 시각적 질문을 하면 원하는 기기에서 캔버스가 나타나고, 답을 그리면 Claude가 읽습니다.

두 가지 모드가 있습니다: 아이디어를 스케치하는 빈 캔버스와, Claude가 스크린샷을 올리고 표시를 요청하는 주석 모드입니다. 두 번째 모드가 진가를 발휘하는데, 시각적 변경을 말로 설명하는 것보다 직접 가리키는 것이 더 빠를 때 유용합니다.

요구 사항

PATH에 Node 18 이상. 그 외에는 없습니다. npm install도, 의존성도 없습니다.

Related MCP server: the-mogiyoon-mcp

설치

이 저장소는 자체 단일 플러그인 마켓플레이스이므로, 새 머신에서는 두 개의 명령이 필요합니다:

/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로 확인하고, claude-draw MCP 서버가 연결되었는지 확인하세요.

플러그인의 어떤 것도 경로별 또는 OS별로 다르지 않습니다: 브라우저 실행기는 플랫폼에 따라 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 전송입니다. 이미지를 창에 끌어다 놓을 수도 있습니다.

채우기는 경계를 판단하는 두 가지 방식이 있으며, 도구를 다시 선택하면 전환됩니다. 채우기: 도형은 직접 그린 표시에서만 멈추므로, 그린 윤곽선은 그 아래에 무엇이 있든 한 번의 탭으로 채워집니다. 채우기: 이미지는 사진의 가장자리에서도 멈추므로, 직접 윤곽선을 그리지 않은 스크린샷 영역에 색을 칠할 수 있습니다. 어느 쪽이든 페인트는 표시 레이어에 적용되므로 지우개로 지워도 이미지는 손상되지 않습니다.

전송을 누르면 병합된 이미지와 캡션이 먼저 표시되며, Enter로 확인하고 Esc로 돌아갑니다. "스크린샷 보내줘"는 반대 방향입니다: Claude에게 무언가를 캡처해서 주석을 달 수 있도록 다시 보내라고 지시하는 것으로, 태블릿에서 파일을 찾는 것보다 훨씬 낫습니다. 캡션 상자에 있는 내용도 함께 전송되므로 어떤 사진을 원하는지 말할 수 있습니다. "건너뛰기"는 이 질문에 답하지 않겠다고 Claude에게 알립니다.

다른 기기에서 그리기

기본적으로 꺼져 있습니다: 데몬이 루프백에만 바인딩하므로 캔버스는 이 머신에서만 접근할 수 있고 다른 곳에서는 접근할 수 없습니다. 켜면 같은 Wi-Fi의 태블릿, 휴대폰 또는 Chromebook이 데스크톱에서 Claude가 실행되는 동안 그리기 표면이 될 수 있습니다.

1. Claude Code가 실행되는 환경에서 CLAUDE_DRAW_LAN=1을 설정하세요, 예: 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. 이후의 모든 요청이 해당 페이지에 자동으로 나타납니다. 새로고침도, 다시 열기도 필요 없습니다.

기기당 한 번 북마크하세요.

방화벽. 포트 7331의 인바운드 TCP가 개인 네트워크에서 허용되어야 합니다.

• 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: 사용 중인 방화벽이 있다면 해당 포트를 허용하세요.

보안

데몬은 선택하지 않는 한 루프백에만 바인딩하므로, 기본 상태에서는 네트워크의 어떤 것도 접근할 수 없습니다.

CLAUDE_DRAW_LAN=1을 설정하면 두 방향이 의도적으로 분리됩니다. 로컬 네트워크의 모든 것은 캔버스를 로드하고 그림을 제출할 수 있습니다. 요청을 생성하거나 데몬을 종료할 수 있는 것은 루프백뿐이므로, 네트워크의 기기는 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 프로토콜을 실행합니다. 네트워크도, 픽스처도, 의존성도 없습니다. 실패 시 0이 아닌 코드로 종료됩니다.

데몬은 첫 번째 request_drawing 호출에서 시작되어 계속 실행되며, 이 덕분에 캔버스 페이지가 요청 사이에 죽은 페이지에 남는 대신 계속 유지됩니다.