iso-figure의 기능
iso-figure는 자연어 설명을 바탕으로 인터랙티브 등각 투영 도형을 생성하는 Claude용 스킬입니다. 객체의 이름을 지정하면, 번호가 매겨진 플레이트 위에 가는 선으로 그린 등각 투영 도형이 포함된 HTML 파일 하나를 생성합니다.
그림 속 객체의 부품은 눌렀을 때 반응할 수 있습니다. 객체에 따라 상호작용의 결과로 텍스트, 숫자 또는 음표가 나타날 수 있습니다. 눌러도 의미 있는 반응을 만들 수 있는 부품이 없는 객체라면 스킬이 다른 대상을 선택합니다.
예시를 보려면 데스크 신시사이저 또는 포켓 계산기를 사용해 보세요. 저장소의 examples 디렉터리에 있는 파일을 열어 볼 수도 있습니다.
생성된 도형의 작동 방식
출력물은 일반 SVG를 사용하며 외부 라이브러리가 필요하지 않습니다. 약 15줄의 투영 코드가 상자의 각 면을 SVG matrix()로 변환합니다. 이를 통해 평면에 그린 일반 사각형, 텍스트, 경로가 올바른 등각 투영 평면에 있는 것처럼 보이게 됩니다.
투영은 텍스트와 둥근 모서리도 지원합니다. 페인트 순서가 깊이를 제어하므로 요소가 예상대로 서로 앞이나 뒤에 표시됩니다.
상호작용은 하나의 상태 객체와 render() 함수로 구동됩니다. 애니메이션이나 입력에 대한 반응을 지원하면서도 생성된 파일을 독립적으로 유지할 수 있도록 CSS가 움직임을 처리합니다.
스킬 설치
Claude Code로 설치
가장 간단한 Claude Code 설정 방법은 저장소를 마켓플레이스로 추가한 다음 플러그인을 설치하는 것입니다.
/plugin marketplace add MrBongoC/ai-iso-skill
/plugin install iso-figure@ai-iso-skill
수동 설치
스킬 디렉터리를 로컬 Claude 스킬 폴더에 직접 복사하려면 저장소를 클론한 뒤 iso-figure 폴더를 복사하세요.
git clone https://github.com/MrBongoC/ai-iso-skill.git
cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/Claude.ai에서 사용
Claude.ai에서는 최신 릴리스에서 iso-figure.skill을 다운로드한 뒤 스킬 설정에서 업로드하세요.
첫 번째 도형 만들기
설치가 끝나면 누를 수 있는 부품이 있는 객체를 Claude에 요청하세요. 대상을 포함하고 원하는 상호작용을 설명하면 됩니다.
분 버튼과 카운트다운되는 디스플레이가 있는 주방 타이머의 등각 투영 도형이 프롬프트는 실제 객체를 지정하고, 인터랙티브 버튼을 추가하며, 디스플레이 동작을 정합니다. Claude는 이러한 세부 정보를 바탕으로 도형의 상태와 렌더링 로직을 결정할 수 있습니다.
스위치와 같은 상호작용을 요청할 수도 있습니다.
fig 6, 램프를 켜고 끄는 벽 조명 스위치fig 6이라는 문구는 번호가 매겨진 플레이트 형식을 지정하는 데 도움이 되며, 스위치 설명은 명확하게 누를 수 있는 부품과 그 결과를 지정합니다.
프롬프트 작성 팁
- 구체적인 객체의 이름을 지정하세요. 타이머, 계산기, 신시사이저, 조명 스위치는 그리고 누를 수 있는 알아보기 쉬운 부품을 제공합니다.
- 컨트롤을 설명하세요. 입력에 반응해야 하는 버튼, 키, 스위치 또는 기타 부품을 언급하세요.
- 결과를 설명하세요. 부품을 눌렀을 때 텍스트, 숫자, 음표 또는 이 개념이 지원하는 다른 동작이 나타나야 하는지 말하세요.
- 필요하다면 디스플레이나 출력을 포함하세요. 카운트다운, 계산 또는 변화하는 파형은 상호작용의 결과를 시각적으로 보여 줍니다.
- 누를 것이 없다면 다른 객체를 사용하세요. 이 스킬은 인터랙티브 도형을 중심으로 설계되었으므로 완전히 정적인 대상에는 적합하지 않습니다.
고급 안내
스킬 지침 확인
저장소에는 전체 절차가 SKILL.md에 포함되어 있습니다. 렌더링 커널, 생성 절차 또는 시각적 스타일을 규정하는 규칙을 이해해야 할 때 읽어 보세요.
평면과 페인트 순서 고려
도형은 SVG 평면으로 구성되므로 각 가시적인 표면을 적절한 등각 투영 면에 배치해야 합니다. 투영 코드는 필요한 SVG matrix()를 적용하고, 페인트 순서는 어떤 표면이 다른 표면을 덮을지 결정합니다. 이는 여러 겹의 컨트롤과 바닥 위에 놓이는 부품을 표현할 때 특히 중요합니다.
상호작용 상태를 명확하게 유지
생성된 디자인은 하나의 상태 객체와 하나의 render() 함수를 사용합니다. 결과를 다듬을 때는 버튼을 누른 뒤 값이 바뀌거나 스위치가 켜짐과 꺼짐 상태 사이에서 이동하는 것처럼 원하는 상태 변화를 명확하게 설명하세요.
결과를 독립 실행형 파일로 열기
출력물은 HTML 파일 하나이므로 브라우저에서 로컬로 열거나 독립적인 예시로 공유하기 쉽습니다. 드로잉이 라이브러리가 아닌 일반 SVG와 CSS를 사용하므로 프로젝트에서 설명하는 추가 종속성 설치는 필요하지 않습니다.
결론
iso-figure는 짧은 Claude 프롬프트를 컴팩트하고 인터랙티브한 아이소메트릭 일러스트로 변환합니다. Claude Code를 통해 설치하거나, 스킬을 수동으로 복사하거나, 릴리스 파일을 Claude.ai에 업로드할 수 있습니다. 최상의 결과를 얻으려면 눌렀을 때 작동하는 부분이 명확한 개체를 선택하고 각 상호작용이 어떤 결과를 만들어야 하는지 설명하세요.
이 프로젝트는 MIT 라이선스에 따라 배포됩니다.