사용 가이드로 건너뛰기
Anatomy작성자 wheresryan22

Anatomy 스킬.

기술적 아이디어를 독자가 이해할 수 있는 기계로 설명하세요. Anatomy는 코딩 에이전트가 아이소메트릭 SVG 형상, 물리적 은유, 움직이는 부품과 일치하는 수치 표시를 만들도록 안내합니다.

  • 아이소메트릭 SVG
  • 기술 설명
  • 인터랙티브 그림
소스 검토 · anatomySKILL.md
작업 기술 일러스트레이션 결과물 • SVG 그림, 독립형 HTML 페이지 또는 React 컴포넌트 • 모델 기반 값과 선택적 인터랙션을 갖춘 물리적 은유 • 점검을 실행한 경우 형상 및 브라우저 검토 증거 시작하기 전에 이 키트는 Node.js 20.10+가 필요하며, 점검에는 Chrome 또는 Chromium이 필요합니다. skills CLI에는 별도의 Node 요구 사항이 있으며, README에는 CLI 1.7.1용으로 22.20+가 기록되어 있습니다.
편집 요약 · 소스 검토일 2026-10-12 · 생성된 예시 아님

01 기능

물리적 메커니즘으로 시스템 설명하기

Anatomy는 알아보기 쉬운 사물로 기술적 관계를 설명합니다. 여기의 설명은 우리가 생성한 그림이 아니라 소스에 근거합니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

큐는 물체를 담았다가 내보내는 장치로, 임계값은 한계가 표시된 게이지로 바뀔 수 있습니다. 중요한 것은 매핑입니다. 무엇이 움직이는지, 무엇을 측정하는지, 보는 사람이 무엇을 배워야 하는지입니다. 이 스킬은 에이전트가 부품을 그리기 전에 먼저 그 모델을 정하도록 요구합니다.

포함된 키트는 음영 처리된 면과 명시적인 깊이 순서를 갖춘 입체 아이소메트릭 형상을 만듭니다. 그림은 SVG, 독립형 HTML 또는 React 컴포넌트로 제공할 수 있습니다. 인터랙티브 버전은 컨트롤, 모션, 수치 표시를 같은 모델에 연결하며, 선택 사항인 WebGL은 SVG 장면 안에서 물이나 빛 같은 효과를 더합니다.

예상 결과물

  • 편집 가능한 SVG 그림, 독립형 HTML 페이지 또는 React 컴포넌트
  • 캡션, 그리고 인터랙티브 그림의 경우 컨트롤과 모델 기반 수치 표시
  • 대상 환경에서 실행한 경우 형상 점검 결과와 브라우저 캡처
예시 브리프 보기

브리프에서 검토까지

  1. 01
    아이디어를 사물에 대응시키기

    실제 동작을 제공하고 그것을 설명할 메커니즘 하나를 고르세요. 장식을 더하기 전에 각 움직임과 수치 표시가 무엇을 뜻하는지 정의합니다.

  2. 02
    부품과 카메라 계획하기

    지지 구조, 작동 메커니즘, 컨트롤을 정리하세요. 관계가 외피에 가려지지 않고 드러나는 시점을 고릅니다.

  3. 03
    형상과 동작 만들기

    입체 형상과 깊이 순서에는 키트를 사용하세요. 정적 형상은 한 번만 계산하고, 인터랙티브 부품과 표시 값은 같은 모델에 연결합니다.

  4. 04
    맥락 속에서 그림 점검하기

    관련 형상 및 선 점검을 실행한 뒤 두 테마의 브라우저 캡처를 확인하세요. 감사를 통과했다고 해서 설명이 정확하거나 구성이 읽기 쉽다는 뜻은 아닙니다.

02 사용 시점

사용 시점

물리적 비유가 기술적 아이디어를 이해하기 쉽게 만들 때 Anatomy를 사용하세요. 일반적인 다이어그램이나 일러스트 생성기보다 더 특화되어 있습니다.

적합한 경우

  • 메커니즘을 설명하는 문서눈에 보이는 하나의 물리적 관계로 큐, 임계값, 컨트롤, 컴포넌트의 동작을 보여줍니다.
  • 편집용 기술 그림사물 자체가 설명을 담당하는 블로그 글이나 랜딩 페이지용 정교한 그림을 만듭니다.
  • 인터랙티브 설명독자가 매개변수를 바꾸면 모션과 값이 함께 갱신되도록 하며, 키보드와 모션 감소 동작도 고려합니다.

확인할 한계

  • 일반 순서도 도구가 아님라벨 있는 상자와 화살표로 설명하는 편이 나은 프로세스에는 이 물리적 사물 접근이 불필요한 복잡성을 더할 수 있습니다.
  • 3D는 선택적 베타고정된 소스에서 3D 근거는 예시 하나와 테스트 그림 하나로 제한됩니다. 움직이는 형상이 많으면 별도의 성능 점검이 필요하며, 부드러운 결과가 보장되지는 않습니다.
  • 점검에는 브라우저 필요Node.js 20.10+가 키트를 실행하며, 브라우저 점검에는 Chrome 또는 Chromium이 필요합니다. 스킬을 설치한다고 해서 점검이 통과되거나 프로젝트의 모든 의존성이 제공되지는 않습니다.

준비할 입력

  • 설명할 동작실제 상태, 임계값 또는 수식과 대상 독자의 기존 지식을 제공하세요. 가상의 값은 가상이라고 표시합니다.
  • 하나의 물리적 은유사물, 움직이는 부분, 그 움직임의 의미를 설명하세요. 시각 자료는 마감이나 재질 참고용으로 공유하고, 기존 그림을 복제해 달라는 요청으로 쓰지 마세요.
  • 출력과 인터랙션 범위SVG, 독립형 HTML 또는 React 컴포넌트 중에서 고르고, 크기와 테마를 지정하며, 인터랙션, WebGL 또는 실험적 3D가 실제로 필요한지 밝히세요.

03 중요한 결정

중요한 결정

  1. 수치 표시는 모션 모델을 공유

    숫자는 메커니즘과 같은 상태를 반영할 때만 유용합니다. 이 스킬은 모션, 캡션, 표시 값이 공통 모델을 쓰도록 요구합니다.

  2. 깊이 순서도 그림의 일부

    겹치는 입체, 파이프, 움직이는 부품에는 일관된 앞뒤 순서가 필요합니다. 포함된 감사는 형상을 점검하며, 줄 끝 처리는 별도 점검이 필요합니다.

  3. 인터랙션에도 정지 버전이 있어야 함

    문서화된 워크플로에는 키보드 제어, 화면 밖 일시정지, 모션 감소가 포함됩니다. WebGL을 사용하더라도 SVG는 그것 없이 이해할 수 있어야 합니다.

04 구체적인 브리프로 시도하기

구체적인 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

아래 명령은 스킬을 프로젝트에 설치하고 에이전트를 선택할 수 있게 합니다. 실행하기 전에 업스트림 README를 확인하세요.

문서화된 설치 명령
npx skills add wheresryan22/anatomy

키트에는 Node.js 20.10+가 필요하며, README에는 skills CLI 1.7.1용으로 Node.js 22.20+가 기록되어 있습니다. 브라우저 점검에는 Chrome 또는 Chromium이 필요합니다. Claude Code 또는 OpenCode에서는 /anatomy를 호출하고, Codex에서는 $anatomy를 사용하세요.

메커니즘 하나로 시작하기

복잡한 장면을 시도하기 전에 작고 명확히 정의된 모델을 사용하세요. 아래 브리프는 테스트되지 않은 예시이며, 제공되는 완성 그림이 아닙니다.

예시 브리프
Anatomy를 사용해 제한된 큐를 독립형 HTML 그림 속의 작은 물리적 메커니즘으로 설명해 주세요. 큐는 최대 5개 항목을 담습니다. 공간이 있으면 enqueue가 하나를 추가하고, 비어 있지 않으면 dequeue가 하나를 제거하며, 거부된 작업은 개수를 바꾸지 않습니다. 먼저 사물을 제안하고 그 움직임이 무엇을 뜻하는지 설명하세요. 만든 벤치마크 데이터가 아니라 이 가상의 규칙을 사용하세요. 컨트롤은 키보드로 접근할 수 있게 하고, 개수와 모션은 하나의 모델로 구동하세요. 라이트 및 다크 테마, 390 px 뷰포트, 모션 감소를 지원하세요. WebGL이나 3D는 추가하지 마세요. 인터랙션을 더하기 전에 정적 디자인을 먼저 보여주고, 실제로 실행한 형상, 선, 브라우저 점검을 보고하세요.

설명과 그림 점검하기

결과를 모델 및 브라우저 증거와 대조해 확인하세요. 실행하지 못한 점검은 기록합니다.

  • 개수, 움직임, 비어 있음/가득 참 상태가 명시된 큐 규칙과 일치합니다.
  • 그림은 좁은 화면과 모션 없이도 읽을 수 있으며, 컨트롤은 키보드로 작동합니다.
  • 두 테마와 해당하는 형상 및 선 점검을 검토했고, 실행하지 않은 점검은 명시되어 있습니다.

OpenDesign은 코딩 에이전트용 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있다거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함된다는 뜻이 아닙니다.

05 소스 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
wheresryan22
스킬 파일
SKILL.md
라이선스
MIT
검토한 스냅샷
2026-10-12 · 689dcf966e63
편집 소스 요약
Anatomy는 물리적 사물 설명 방식에 아이소메트릭 SVG 키트, 선택적 인터랙션, 소스에서 정의한 형상 및 브라우저 점검을 결합합니다. 이는 고정된 소스에 대한 편집 요약이며 실행 보고서가 아닙니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 날짜가 기록된 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

Anatomy에는 React가 필요한가요?

아니요. 소스는 프레임워크 없이 SVG와 HTML을 만들어내는 JavaScript 또는 TypeScript는 물론 React와 Next.js 컴포넌트도 지원합니다. 호스트 프로젝트에 맞는 출력을 고르세요.

Anatomy 그림에 WebGL 또는 3D가 필요한가요?

아니요. SVG가 핵심 출력입니다. WebGL은 물, 불, 빛 같은 효과를 위한 선택 사항이며, 회전하는 3D 형상은 별도의 베타 옵션입니다. 설명에 필요한 모드만 요청하세요.

이 스킬은 anatomy-figures 패키지와 같은 것인가요?

아니요. Anatomy는 제작용 스킬과 툴킷입니다. 별도로 문서화된 anatomy-figures 패키지는 미리 만들어진 그림을 제공합니다. 하나를 설치하는 것을 다른 하나를 설치하는 것처럼 설명해서는 안 됩니다.

Anatomy

기술적 아이디어 하나를 눈에 보이게 만들기

실제 동작에서 시작해 물리적 은유를 고르고, 의도한 환경에서 그림을 점검하세요. 스킬을 실행하기 전에 소스와 설정을 검토하세요.

문서화된 설치 명령
npx skills add wheresryan22/anatomy