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

2 hours ago 5

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

Read Entire Article

피플앤툴즈 네트워크

🛍 샵

사진 · AI 스튜디오
운세
생활 정보
아이 · 공부
- 공부나침반 — 구구단·연산·받아쓰기
일자리 · 커뮤니티
음악 · 소리
명언 · 영감
- 명언 모음 Pearls of Wisdom
- 영화 명대사
온라인 도구
뉴스 모음

📺 유튜브 최신 영상

© 2026 PeopleNTools 운영 사이트 전체 보기 유튜브 채널 샵