Anatomy - 기술 개념을 움직이는 입체 도해로 만드는 AI 에이전트 스킬

요약

이 스킬은 기술 개념을 움직이는 입체 도해로 코딩 에이전트를 이용해 제작하는 방법을 다룹니다. 캐시, 연결 풀 같은 추상적 개념을 기계나 장치에 빗대어 SVG와 WebGL 효과를 결합한 인터랙티브 웹 컴포넌트로 시각화할 수 있습니다.

문서와 블로그, 교육 자료에 사용할
인터랙티브 입체 도해를 코딩 에이전트로 제작하는 스킬
캐시, 연결 풀, 요청 제한 같은 개념을
실제로 움직이는 기계나 장치에 빗대어 시각화. 설명할 개념과 수치, 출력 형식을 지정해 요청
SVG로 부품과 배관, 음영을 구성하고, 마우스와 키보드 조작에 따라 움직임과 표시 수치가 함께 바뀌도록 제작
독립 실행 HTML, SVG 파일, React/Next.js 컴포넌트로 출력하며, 생성된 소스와 빌드 스크립트를 직접 수정 가능
불꽃과 배기가스, 물과 빛 반사 등은
SVG 사이에 WebGL 효과를 결합해 표현
부품을 실제 3D로 회전하거나 떨어뜨리는 모드도 제공
로켓 엔진 분해도, 파동 실험 장치, 타이핑 가능한 복고풍 컴퓨터 등 완성된 예제 포함
부품 간 관통과 연결 상태, 그려지는 순서를 검사하고, 브라우저 스크린샷으로 결과를 확인하는 도구 제공
Claude Code, Codex, Antigravity, OpenCode, MiniMax Code에서 사용 가능
데모 갤러리 보기
MIT 라이선스

AI 자동 생성 콘텐츠