Anatomy가 기술 개념을 인터랙티브 등각 그림으로 만든다

Anatomy는 기술 개념을 실제로 작동하는 물체로 바꿔 설명하는 Claude 스킬이다. Antigravity, OpenCode, Codex, MiniMax Code에서도 쓸 수 있으며, 세밀한 부품으로 만든 인터랙티브 등각 그림을 SVG, WebGL, 3D로 생성한다.

개념을 말하면 Anatomy는 그 개념을 작동 원리로 삼는 물리적 물체를 고안한다. 바뀐 것이 없으면 작업을 건너뛰는 캐시 키는 모든 핀이 맞아야 돌아가는 핀 텀블러 자물쇠로, 하나의 GPU 컨텍스트가 여러 캔버스를 처리하는 방식은 프린트 헤드 하나가 16개 웰을 차례로 방문하는 갠트리 플로터로 표현할 수 있다. 이어 수십 개의 음영 처리된 부품을 만들고, 제목·힌트·실시간 표시가 있는 카드 안에 배치한다. 포인터와 키보드로 움직이게 하고, 관절을 확대해 자체 점검하도록 구성한다. 그림의 수치는 부품을 움직이는 것과 같은 작은 모델에서 나온다.

설치와 첫 사용

빠른 설치 명령은 다음과 같다.

npx skills add wheresryan22/anatomy -g

CLI는 설정할 에이전트를 묻는다. 질문을 건너뛰려면 -a claude-code, -a antigravity, -a opencode, -a codex, -a minimax-code 중 하나를 붙인다. 설치한 뒤 Claude Code에서 다음과 같이 요청한다.

/anatomy explain how a token bucket rate limiter works, interactive

Antigravity, OpenCode, Codex, MiniMax Code를 대상으로 설치할 때도 해당 에이전트의 -a 옵션을 지정한다. Antigravity, OpenCode, MiniMax Code에서는 같은 /anatomy 명령을 쓰고, Codex에서는 $anatomy를 입력한다. API 키는 필요 없고 npm install도 요구하지 않는다. Node 내장 모듈만 사용한다.

Anatomy는 Agent Skill 형식으로, 저장소 루트에 SKILL.md를 둔다. skills CLI로 설치하면 저장소 전체와 예제(약 10MB)를 복사한다. 기본적으로 현재 프로젝트에 설치하고 설정할 에이전트를 묻는다. -g는 사용자 전역 설치, -a claude-code는 Claude Code만 설정한다. 다른 에이전트만 설정하려면 해당 이름을 -a에 지정한다. CLI 1.7.1은 Node.js 22.20 이상을 요구한다.

사용자 전역 설치 경로는 에이전트별로 다르다. 프로젝트 설치는 Claude Code에서 .claude/skills/anatomy, Antigravity·OpenCode·Codex에서 .agents/skills/anatomy, MiniMax Code에서 .minimax/skills/anatomy를 사용한다.

• Claude Code: npx skills add wheresryan22/anatomy -g -a claude-code 또는 git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy — ~/.claude/skills/anatomy
• Antigravity: npx skills add wheresryan22/anatomy -g -a antigravity 또는 git clone https://github.com/wheresryan22/anatomy.git ~/.gemini/antigravity/skills/anatomy — ~/.gemini/antigravity/skills/anatomy
• OpenCode: npx skills add wheresryan22/anatomy -g -a opencode 또는 git clone https://github.com/wheresryan22/anatomy.git ~/.config/opencode/skills/anatomy — ~/.config/opencode/skills/anatomy
• Codex: npx skills add wheresryan22/anatomy -g -a codex 또는 git clone https://github.com/wheresryan22/anatomy.git ~/.agents/skills/anatomy — ~/.agents/skills/anatomy
• MiniMax Code: npx skills add wheresryan22/anatomy -g -a minimax-code 또는 git clone https://github.com/wheresryan22/anatomy.git ~/.minimax/skills/anatomy — ~/.minimax/skills/anatomy

프로젝트에 Git으로 설치할 때는 Claude Code에서 git clone https://github.com/wheresryan22/anatomy.git .claude/skills/anatomy를 사용한다. Antigravity·OpenCode·Codex·MiniMax Code에는 .agents/skills/anatomy를 사용할 수 있다. OpenCode는 .opencode/skills/anatomy도 읽으며 Claude Code와 .agents 폴더도 읽는다. MiniMax Code는 $MINIMAX_DATA_DIR/skills/anatomy에 데이터를 옮긴 경우 그 아래 skills/anatomy를 쓸 수 있고, Claude Code·Codex·.agents 폴더도 읽는다. 팀이 함께 쓰려면 프로젝트 설치 폴더를 커밋한다. 업데이트는 해당 폴더에서 git pull을 실행한다.

Git 없이 ZIP을 받으려면 저장소 ZIP을 내려받아 압축을 풀고, 폴더 이름을 anatomy-main에서 anatomy로 바꾼 다음 각 에이전트의 사용자 스킬 폴더로 옮긴다. macOS·Linux에서는 다음 한 줄로 Claude Code에 설치할 수도 있다.

mkdir -p ~/.claude/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomy

다른 에이전트에는 같은 파일을 각 경로에 설치한다.

mkdir -p ~/.gemini/antigravity/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.gemini/antigravity/skills/anatomy
mkdir -p ~/.config/opencode/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.config/opencode/skills/anatomy

Claude Code는 실행 중인 세션에서도 새 스킬을 불러온다. 세션 시작 시 skills 폴더 자체가 없었다면 /reload-skills를 실행한다. Antigravity와 OpenCode에서는 채팅에 /anatomy로 표시되며 보이지 않으면 재시작한다. Codex에서는 /skills 아래에 표시되고 $anatomy로 실행한다. MiniMax Code에서는 /anatomy로 표시된다. 각 도구에서 스킬이 보이지 않으면 Codex 또는 mcode를 재시작한다.

Codex 샌드박스가 브라우저 점검을 막으면 그림 생성은 계속되지만 점검만 실패한다. Anatomy는 헤드리스 Chrome을 띄워 임시 프로필을 만들고 로컬 포트로 통신한다. Codex가 샌드박스 밖에서 점검을 실행할지 물으면 해당 명령을 허용할 수 있다. 이 방법에는 기본 설정 approval_policy = "on-request"가 필요하다. 또는 ~/.codex/config.toml에 다음을 한 번 설정한다.

approval_policy = "on-request"
sandbox_mode = "workspace-write"

[sandbox_workspace_write]
network_access = true
writable_roots = ["/tmp"]

최신 Codex에서는 설정 이름이 달라졌을 수 있으므로 해당 버전의 설정 참고 문서를 확인한다. 또는 일반 터미널에서 직접 점검을 실행한다.

node scripts/capture.mjs page.html --out shots/page.png

Codex를 --sandbox danger-full-access로 시작하는 방법도 있지만, 해당 세션의 모든 제한을 해제하므로 신뢰하는 프로젝트에서만 사용한다.

만들 수 있는 그림과 요청 방법

그림은 세 종류이며, 모두 같은 도구 모음과 카메라, 제작 규칙을 공유한다.

그림에는 밝은 테마와 어두운 테마가 있다. 셰이더를 포함해 밝은 테마를 우선 설계한다. 완성물은 사용자가 소유하는 소스 형태로 제공된다. Node 빌드 스크립트와 그 스크립트가 작성한 페이지가 나오거나, React 출력에서는 도형 모듈, 정적 그림용 서버 컴포넌트, 움직임용 클라이언트 컴포넌트가 나온다. 도구 모음도 함께 제공된다.

요청할 때는 무엇을 설명할지와 실제 수치(크기·개수·속도·임계값)를 말하는 편이 좋다. Anatomy가 상자와 화살표를 묘사하는 대신 개념에 맞는 물체를 고안한다. 원하는 기계가 정해져 있다면 물체 이름과 움직일 부분을 설명한다. 결과를 둘 곳도 독립 실행형 HTML, SVG, React·Next.js 컴포넌트 중에서 정하고 밝은 테마인지 어두운 테마인지 밝힌다. 출력 형식에 따라 제작 방식이 달라진다.

다음은 스킬의 평가 프롬프트에 포함된 요청 예다.

/anatomy a figure for our Next.js docs on database connection pooling: a pool of 10 connections, requests borrow one and give it back, and when all 10 are busy new requests wait in a queue. A React component plus a static HTML preview, dark theme.
/anatomy an isometric SVG explaining how a CDN edge cache works, cache hit vs miss, TTL of 60 s, for a dark landing page. Just the SVG file and a PNG preview.
/anatomy a Bunsen burner on a lab bench: opening the air collar turns the lazy yellow flame into a roaring blue cone. WebGL for the flame, one HTML file, dark theme.
/anatomy a heat-exchanger espresso machine with the side panel off: boiler, heat-exchanger tube, group head, pump, steam wand and gauge. Show the water flowing when you pull a shot. Standalone HTML, light theme.

예제와 출력물

저장소의 예제는 각각 빌드 스크립트를 갖춘 독립형 페이지다. --light를 붙이면 밝은 테마로 만든다. 빌드된 HTML도 저장소에 포함돼 있어 각 예제 폴더의 .html 파일을 열어 사용해 볼 수 있다. 갤러리 스크린샷은 모두 예제 페이지의 밝은 테마이며, 스킬 자체의 scripts/capture.mjs와 scripts/drive.mjs로 캡처했다.

• dial-indicator: 스탠드 위 다이얼 게이지와 게이지 블록을 그린다. 약 300줄로 가장 작은 예제다. 마우스를 올리면 캐리지가 움직이고 바늘이 각 블록을 가리킨다. node examples/dial-indicator/build.mjs
• desk-computer: 1984년 스타일의 책상용 컴퓨터다. 키보드로 입력하면 케이스 앞면과 같은 평면에 그린 CRT에 글자가 나타난다. 전원을 끄면 화면이 선과 점으로 접힌다. 입체 부품 약 85개다. node examples/desk-computer/build.mjs
• arcade-cabinet: 측면 패널을 연 아케이드 게임기다. 동전을 넣으면 동전 투입구를 지나 동전 스위치 선을 건드리고 현금함으로 들어간다. 신호가 케이블을 따라 기판으로 가고 CRT가 켜져 대기 화면을 표시한다. 입체 부품 약 240개와 케이블 15개다. node examples/arcade-cabinet/build.mjs
• raptor-engine: 시험대 위 Raptor 2 엔진이다. 11개 조립체로 분해되며 WebGL로 만든 불꽃 기둥·충격파·물보라·증기가 앞뒤 SVG 사이에 렌더링된다. 복잡한 배관, 부드러운 음영, 페이드와 감사를 보여주는 예제이며 빌드에 몇 분이 걸린다. node examples/raptor-engine/build.mjs
• ripple-tank: 종이 스크린 위 높은 다리에 놓인 학교용 잔물결 탱크를 위쪽 44° 시점에서 그린다. 두 WebGL 레이어를 등각 평면에 맞추고 model.mjs의 순수 모델로 움직인다. node examples/ripple-tank/build.mjs
• test-rig: React·Next.js 사이트에서 사용한 그림이다. 스프링 장착 캐리지 위 유리 버튼, 레일 위 손가락 프로브, 기울기를 읽는 다이얼 게이지로 이뤄져 있으며 입체 부품은 53개다. 빌드 스크립트 없이 React 앱에 복사한다.
• spot-plate: 같은 사이트의 두 번째 그림이다. 스폿 플레이트 위 유리 방울 여섯 쌍이 있고, 필러 게이지 날이 펼쳐지면 각 쌍이 하나의 유리 덩어리로 합쳐진다. 각 쌍은 하나의 거리장으로 그린다. 빌드 스크립트 없이 React 앱에 복사한다.
• turning-dial: 실제 3D로 돌아가는 조합식 다이얼, 그 위의 작은 로봇 손, 들어 올리는 3관절 손가락, 자유 물체로 떨어지는 캡슐을 보여준다. stress.mjs에는 복잡한 작업장 안의 부품 380개로 된 손이 있으며 성능 측정에 사용한다. node examples/turning-dial/build.mjs

Raptor와 아케이드 캐비닛은 인쇄물도 만든다. 빌드된 밝은 테마 페이지에서 다음 명령을 실행하면 A4 PDF 세 개, 즉 한 페이지 포스터, 한 페이지 기술 도면, 두 페이지 상세 설명서를 생성한다.

node scripts/print.mjs examples/raptor-engine/sheet.mjs --format all

그림을 인쇄용으로 요청하면 Anatomy가 sheet.mjs를 작성한다. 자세한 내용은 인쇄 안내를 참고한다. 아래 명령은 기하 감사를 실행한다. 3D 감사는 느리며, 자세한 내용은 3D 안내에 있다.

node examples/raptor-engine/build.mjs --audit
node examples/arcade-cabinet/build.mjs --audit
node examples/turning-dial/build.mjs --light --audit

구성과 점검

SKILL.md는 Claude가 읽는 작업 지침이다. 먼저 실제 수치를 모으고, 물체를 고안하고, 부품 목록과 공간을 계획한 다음, 도구 모음으로 기하 구조를 한 번 만들고 뒤에서 앞으로 그린다. 이후 그림을 구성하고 움직임을 추가한 뒤 비평가처럼 검증하도록 안내한다. 간결한 제작 규칙도 포함한다.

kit/는 등각 카메라, 입체 도형과 부품 라이브러리(iso-kit), 어느 축에서든 둥근 부품을 만드는 lathe.mjs, 파이프와 케이블을 위한 tube.mjs, WebGL 레이어 gl.mjs, 3D 실행 환경 turn*.mjs, React 컴포넌트를 포함한 그리기 라이브러리다. React 컴포넌트를 제외하면 의존성이 없다. references/에는 제작법, 도구 모음 API, 움직임, React, 검증, WebGL, 설계 과정, 3D 모드에 관한 상세 안내가 있으며 Claude가 필요할 때 읽는다.

검증 도구는 기하 구조를 확인한다. kit/audit.mjs는 부품끼리 관통하지 않는지, 각 끝이 장착부에 닿는지, 겹치는 부품이 깊이 순서대로 그려졌는지 검사한다. node build.mjs --audit로 실행한다. 헤드리스 Chrome에서 scripts/capture.mjs와 scripts/drive.mjs는 스크린샷·확대 화면·느린 동작의 접촉 시트를 만든다. scripts/lines.mjs는 허공에서 끝나는 선이 있으면 실패 처리하고, scripts/turn-check.mjs는 3D 그림을 점검한다. 스킬은 Claude가 생성한 PNG를 모두 읽도록 지시한다.

저장소에는 SKILL.md, kit/, references/, scripts/, examples/, evals/evals.json, .github/가 있다. kit/에는 TypeScript 핵심 파일 iso-kit.ts와 일반 ESM용 iso-kit.mjs, 두 테마의 iso.css, React의 서버 안전 컴포넌트 draw.tsx와 클라이언트 훅 live.tsx, lathe.mjs, tube.mjs, audit.mjs, gl.mjs, 베타 3D 실행 환경 turn.mjs, 빌더 turn-build.mjs, 궤도 감사 turn-audit.mjs가 있다. turn-fixed.mjs, canvas-painter.mjs, gl-shared.mjs는 실험용 변형으로 아직 문서화되지 않았고 예제에서도 사용하지 않는다. scripts/에는 위 점검 도구 외에 독립형 페이지에 도구 모음을 인라인하는 inline-kit.mjs, 3D 브라우저 점검 도구와 보조 파일, Node에서 3D 시간을 재는 turn-bench.mjs가 있다. examples/에는 완성된 그림 여덟 개와 커밋된 빌드 페이지가 있다.

요구 사항과 한계

Claude Code, Antigravity, OpenCode, Codex, MiniMax Code 중 하나가 필요하다. 스킬은 Claude Code용으로 작성됐지만 공개 Agent Skills 형식을 따르므로 나머지 도구도 불러올 수 있다. Codex 샌드박스가 Chrome을 막으면 해당 명령을 허용해야 한다.

Node.js 20.10 이상은 빌드·도구 모음·점검에 필요하다. Node 내장 모듈만 사용하므로 npm install은 필요 없다. 예제는 Node 20.19와 22.11에서 바이트 단위로 동일하게 다시 빌드됐다. Node 20에서는 브라우저 스크립트가 --experimental-websocket을 붙여 재시작한다. 점검에는 Chrome 또는 Chromium이 필요하다. capture.mjs, drive.mjs, lines.mjs, turn-check.mjs는 macOS·Linux·Windows의 일반적인 설치 위치와 Playwright 캐시에서 브라우저를 찾는다. 다른 바이너리는 CHROME_PATH로 지정한다. 브라우저는 WebGL을 켠 헤드리스 모드로 실행한다. React 출력에는 React 18 이상이 필요하며, 해당 기능을 쓰는 곳은 kit/react/, examples/test-rig/, examples/spot-plate/다.

Anatomy는 축·계열·데이터 플롯이 있는 차트 라이브러리가 아니다. 숫자는 모델이 움직임과 함께 갱신하는 표시와 부품의 실제 크기·개수로 나타낸다. 기계·계측기·도구·가구를 그리며 사람이나 정확한 지도를 그리지는 않는다. 만들 수 있는 작동 원리가 없는 개념은 결과가 약해질 수 있다.

그림은 부품 목록, 기하 구조, 감사, 두 테마의 모든 관절 확대 확인을 거치므로 제작에 긴 세션이 걸리는 것이 의도된 방식이다. Raptor 빌드에는 몇 분이 걸리고, 부품 30개짜리 3D 전체 궤도 감사는 15~20분 걸린다. 셰이더는 WebGL이 필요하다. WebGL이 없어도 SVG는 읽을 수 있고, 움직임 줄이기 설정을 쓰면 모든 그림이 멈춘다.

3D 모드는 베타다. 예제와 테스트 그림 하나에서 검증됐으며, 아직 실제 제품용 그림에서는 검증되지 않았다. 작은 3D 그림은 60fps로 실행된다. 부품 380개짜리 스트레스 테스트 손은 부하가 큰 기기에서 너비 1440px 기준 약 20fps, 성능을 제한한 휴대전화 프로필에서 13~15fps를 기록했다.

그림 공유와 기여

완성한 그림은 에이전트에 “publish this figure to the Anatomy community gallery”라고 요청해 공유할 수 있다. 에이전트는 제목과 GitHub 이름을 묻고 제출 내용을 보여준 뒤, 사용자가 동의하면 anatomy-community에 풀 리퀘스트를 연다. Git을 사용하거나 직접 포크할 필요는 없다. 터미널에서는 scripts/publish.mjs --submit을 실행할 수 있고, 터미널이 없다면 갤러리의 그림 제출 양식에서 GitHub Gist를 사용한다.

이슈와 풀 리퀘스트를 받는다. 기여 전에는 예제 빌드, 점검, 변경 규칙을 다루는 CONTRIBUTING.md를 읽어야 한다. 규칙에는 코드 주석을 넣지 않는 것과 도구 모음을 바꿀 때 기존 예제가 모두 바이트 단위로 동일하게 유지되도록 하는 내용이 포함된다. 행동 강령을 따르고, 보안 문제는 SECURITY.md의 안내에 따라 신고한다.

• 버그 신고
• 그림 요청
• 변경 기록

라이선스는 MIT이며, 표기된 저작권자는 Ryan, 연도는 2026이다.