에이전트 스킬·프롬프트도구/라이브러리JavaScript

wheresryan22/anatomy

An agent skill for creating detailed, interactive isometric illustrations of real-world machines and complex systems. Generates polished SVGs with optional Web…

GitHub 에서 보기 ↗카드 기준일 2026-10-31 · 처음 작성 2026-10-29 · 갱신 2026-11-02
+3,220지난 주
15.9%규모 대비 성장률
23,451누적 스타

AI 작성이 카드는 AI(Claude)가 공개 자료(README·릴리스·HN·웹 글)로 쓴 요약입니다. 사람이 검토하지 않았으며, 주장마다 출처 링크와 확인·추정 표시를 붙였습니다. 숫자는 GitHub API 값을 코드가 채웁니다.

013줄 요약

  • 무엇인지 — Anatomy는 기술 개념을 그 원리대로 움직이는 가상의 기계로 바꿔, 인터랙티브 아이소메트릭 도해를 SVG, WebGL, 베타 3D로 만들어 주는 코딩 에이전트용 스킬이다.
  • 왜 지금 떴나 — 2026-10-10 v1.0 릴리스와 함께 작성자가 X에 올린 소개 글이 크게 퍼졌고, 다음 날인 10-11에 스타가 급등했다. 이후 v1.1과 GeekNews, YouTube, HN 게시가 이어지며 관심이 유지됐다.
  • 어떤 의미인지 — 문서·블로그·교육 자료에 넣을 동작하는 설명 도해를 에이전트에게 코드로 맡길 수 있다는 뜻이다. 다만 생성 시간이 길고 결과물 검수가 필요하다.

02숫자

누적 스타23,4512026-10-31
지난 주+3,220전주 4,934
규모 대비 성장률15.9%주 시작 20,231
생성10.082026년
주간 스타 · 최근 12주
12주 전10.25 주
이번 주 일별 스타 (UTC)
일 10.25토
항목값
누적 스타23,451 (2026-10-31 기준)
이번 주 증가+3,220
성장률+16% (주 시작 20,231)
AI 탭 순위새로 뜨는 3위
일별 증가10-25 +488 · 10-26 +427 · 10-27 +410 · 10-28 +693 · 10-29 +480 · 10-30 +355 · 10-31 +367
급등일2026-10-11 +3,619 (이전 기록 0 — 공개·출시 무렵)
유형 · 카테고리도구/라이브러리 · 에이전트 스킬·프롬프트 (보조: 멀티모달(이미지·음성·영상))
확인 필요없음

03왜 지금 떴나

  • 2026-10-10 첫 릴리스 Anatomy 1.0이 나왔다. SVG 코어, WebGL 레이어, 3D 모드(베타), headless Chrome 검사, 예제 8개가 포함됐다. 같은 날 작성자 Ryan이 X에 "Describe a machine in one line. Claude brings it to life."라는 소개 글을 올렸다. GitHub 릴리스 · cellcog.ai (확인)
  • 2026-10-11 급등일이다. 저장소 공개(10-08) 사흘 만에 빠르게 주목받았다는 블로그 분석이 나왔다. explainx.ai (확인)
  • 2026-10-12 Anatomy 1.1이 릴리스됐다. 완성한 도해를 커뮤니티 갤러리에 PR로 올리는 기능이 추가됐고, OpenCode와 Codex 지원이 더해졌으며, 검사 관련 수정 38건이 반영됐다. 같은 날 여러 소개·가이드 글이 이어졌다. GitHub 릴리스 · wavect.io · cellcog.ai · futurpulse.com (확인)
  • 2026-10-20 GeekNews에 기술 개념을 움직이는 입체 도해로 만드는 스킬로 소개됐다. GeekNews (확인)
  • 2026-10-21 실제로 써 보는 YouTube 리뷰 영상이 올라왔다. 영상은 X 소개 글이 넓게 퍼졌다고 언급한다. youtube.com (확인)
  • 2026-10-24 Hacker News에 'Agent skill for creating isometric illustrations'라는 제목으로 게시됐다. HN (확인)

04무엇인가

Anatomy는 기술 개념을 글이나 정적 다이어그램 대신 '그 원리대로 작동하는 물리적 물체'로 설명하려는 에이전트 스킬이다. 예를 들어 입력이 바뀌지 않으면 작업을 건너뛰는 캐시 키는 모든 핀이 맞을 때만 돌아가는 핀 텀블러 자물쇠가 된다. 하나의 GPU 컨텍스트가 여러 캔버스를 처리하는 구조는 프린트 헤드 하나가 16개 웰을 오가는 갠트리 플로터가 된다.

사용자가 /anatomy explain how a token bucket rate limiter works, interactive처럼 요청하면 에이전트가 수십 개의 작은 입체 부품으로 기계를 조립한다. 결과물은 제목, 힌트, 실시간 판독값이 들어간 카드 형태다. 포인터와 키보드에 반응해 움직이고, 화면에 표시되는 모든 숫자는 부품을 움직이는 같은 모델에서 나온다. 에이전트는 확대 캡처로 이음새를 하나씩 점검하며 스스로 결과를 검증한다. 요청은 먼저 Figure, Hero, Epic 중 하나로 크기가 정해지고, 작업 전에 예상 소요가 안내된다.

구성은 워크플로와 제작 규칙을 담은 SKILL.md, 그리고 kit으로 나뉜다. kit에는 SVG 코어, 원형 부품, 파이프, 기하 감사(audit), WebGL 레이어, React 컴포넌트, 3D 모드(베타)가 들어 있다. 여기에 레퍼런스 문서, headless Chrome 검사 스크립트, 빌드된 예제 페이지가 함께 제공된다. Node 내장 모듈만 쓰기 때문에 의존성과 API 키가 필요 없다. 설치는 npx skills add wheresryan22/anatomy로 하며 Claude Code, Antigravity, OpenCode, Codex, MiniMax Code를 지원한다. 결과물은 단독 HTML 페이지, 스타일이 내장된 SVG, React/Next.js 컴포넌트 중 하나로 받을 수 있다.

05비교

  • 이름이 비슷한 Web Anatomy는 페이지 감사, 카피라이팅, 와이어프레임 등 전환율 개선용 스킬 묶음이다. 냉각 루프나 캐시 무효화 같은 엔지니어링 개념을 도해로 설명하는 Anatomy와는 용도가 다르다. futurpulse.com (확인)
  • 이미지 생성 모델이 래스터 그림을 출력하는 것과 달리, Anatomy의 결과물은 브라우저가 렌더링하는 편집 가능한 웹 코드다. 상호작용할 때마다 AI를 호출하지 않아도 된다. wavect.io · cellcog.ai (추정)

06활용사례

  • 문서, 랜딩 페이지, 블로그, 교육 자료에 넣을 인터랙티브 설명 도해를 만드는 데 쓴다. 캐시, 연결 풀, 요청 제한 같은 개념이 대상으로 소개된다. GeekNews · ui-skills.com (확인)
  • 예제 test-rig는 실제 사이트(React/Next)에서 쓰인 프로덕션 도해다. 스프링 캐리지 위의 유리 버튼, 레일을 따라 움직이는 프로브, 다이얼 게이지로 구성된다. ui-skills.com (확인)
  • 결과물을 단독 HTML, 단일 SVG, React/Next.js 컴포넌트로 받아 사이트에 바로 넣을 수 있다. wavect.io · explainx.ai (확인)
  • v1.1부터는 완성한 도해를 에이전트에게 요청해 커뮤니티 갤러리에 PR로 올릴 수 있다. 갤러리는 제출된 소스를 잠긴 샌드박스에서 다시 빌드하고 검사한다. GitHub 릴리스 · github.com (확인)
  • YouTube 리뷰에서 저장소의 예제(dial indicator 등)를 직접 실행해 보고 기능을 시험했다. youtube.com (확인)

07한계·리스크

항목값
라이선스MIT
기여자13
상위 1명 기여 비중59%
지난 30일 이슈열림 19 · 닫힘 4
릴리스 주기약 2.1일마다
열린 이슈+PR71
  • 생성이 매우 느리다. 리뷰에 따르면 일반 도해는 3090분, Hero급은 24시간이 걸리고, 일부 렌더는 훨씬 더 오래 걸렸다는 메인테이너 언급도 있다. 3D 감사는 부품 30개 기준 15~20분이 걸린다. 그동안 에이전트 사용 비용도 계속 발생한다. youtube.com · futurpulse.com · wavect.io (확인)
  • 3D 모드는 아직 베타다. 결과물을 프로덕션에 쓰려면 사람의 검수가 필요하다는 평가가 있다. GitHub · GitHub 릴리스 · futurpulse.com (확인)
  • 공개된 지 2주 남짓한 신생 프로젝트이고 한 명의 작성자가 주도한다. 장기 유지보수가 작성자 한 사람에게 달려 있을 수 있다. explainx.ai · cellcog.ai · github.com (추정)
  • 요구 Node 버전이 문서마다 다르다. README는 20.10 이상을, v1.0 릴리스는 skills CLI에 Node 22 이상을 명시한다. 또 갤러리 게시 기능은 Claude Code 세션 로그를 읽어 소요 시간과 토큰을 계산하므로, 전송 계획을 확인한 뒤 승인하는 것이 좋다. GitHub · GitHub 릴리스 · GitHub 릴리스 (추정)

08변경 기록

근거