wheresryan22/anatomy
An agent skill for creating detailed, interactive isometric illustrations of real-world machines and complex systems. Generates polished SVGs with optional WebGL shaders and 3D effects.
해결하는 문제
Anatomy는 AI 에이전트(특히 Claude, OpenCode, Codex)가 복잡한 기술 개념을 인터랙티브한 등각 투영 도형을 설계하고 구축하여 설명할 수 있게 하는 도구입니다. 일반적인 다이어그램 대신, AI가 기술적 아이디어를 나타내는 물리적 객체(예: 캐시 키를 핀 텀블러 자물쇠로 표현)를 발명할 수 있게 합니다.
작동 방식
이 프로젝트는 전문 드로잉 라이브러리("키트")와 AI 에이전트가 따르는 일련의 제작 규칙을 제공합니다. 워크플로우는 AI가 기술 요구 사항을 수집하고, 물리적 은유를 발명하고, 지오메트리를 계획하고, 키트를 사용하여 도형을 생성하는 것을 포함합니다.
세 가지 출력 유형을 지원합니다:
- SVG: 4색 음영과 이징 모션이 있는 솔리드 등각 투영 부품.
- SVG + WebGL: 구조용 SVG와 불, 물, 글로우 같은 효과용 WebGL 셰이더를 결합합니다.
- 3D(베타): 실제 3D 공간에서 회전하고 구부릴 수 있는 부품.
시스템에는 헤드리스 Chrome을 사용하여 지오메트리 겹침을 감사하고, 선이 공중에서 끝나지 않도록 하고, 결과 도형의 시각적 충실도를 검증하는 검증 스위트가 포함되어 있습니다.
대상 사용자
AI 에이전트를 사용하여 문서, 블로그 게시물 또는 랜딩 페이지용 고품질의 인터랙티브한 설명 도형을 만드는 개발자 및 기술 문서 작성자.
주요 특징
- 은유 기반 설명: 추상적인 기술 아이디어를 물리적이고 작동하는 모델로 변환합니다.
- 다중 모드 렌더링: 독립형 HTML, SVG 파일 또는 React/Next.js 컴포넌트를 지원합니다.
- 자동 검증: 정밀도를 보장하기 위한 지오메트리 감사 및 시각적 검사를 포함합니다.
- 제로 의존성 키트: 핵심 라이브러리는 Node의 내장 모듈만 사용합니다.
- 에이전트 네이티브: Claude Code, OpenCode, Codex와 원활하게 통합되도록 표준 Agent Skill로 설계되었습니다.
이 프로젝트를 다룬 글
관련
- 프로젝트
- 프로젝트
- 프로젝트
- 프로젝트