Kubai Icons는 하나의 시각적 언어를 공유하는 아이콘을 만들기 위한 Claude 스킬입니다. 기능 목록이나 기존 제품 저장소를 Claude에 제공하면, 프로젝트에 포함된 66개의 예시와 어울리는 아이콘을 디자인할 수 있습니다. 결과물은 JavaScript로 구동되는 동적 SVG이거나 독립 실행형 정적 SVG 파일일 수 있습니다.
이 시스템은 레이어드 도형, 외곽선, 강조 색상에서 파생된 색상, 그라디언트, 그림자, 객체별 호버 동작을 기반으로 합니다. 일반적인 애니메이션을 사용하는 대신 폴더는 열리고, 봉투는 봉인이 풀리며, 달력은 페이지를 넘깁니다.
라이브 갤러리 열기에서 전체 컬렉션을 미리 보고, 팔레트를 전환하고, 아이콘 위에 마우스를 올려 보세요.
프로젝트 작동 방식
Kubai Icons는 Claude가 컬렉션을 일관되게 확장하는 데 필요한 디자인 규칙과 구현 도구를 제공합니다.
PROMPT.md는 캔버스 크기, 키라인, 레이어, 모서리, 외곽선, 조명, 색상, 표시, 모션에 대한 필수 요구 사항을 정의합니다.src/engine.js는 색상 파생, 외곽선, 그라디언트, 그림자, 보간, 팔레트를 제공합니다.src/icons.js에는 새 아이콘을 만들 때 구조적 참고 자료로 사용할 수 있는 66개의 완성된 예시가 들어 있습니다.scripts/check.mjs는 기본 상태와 호버 상태, 애니메이션 중간 프레임, 여러 크기, 모든 팔레트에 걸쳐 헤드리스 시각 검사를 수행합니다.
각 아이콘은 뒷부분, 선택적인 흰색 콘텐츠, 앞부분으로 구성됩니다. 이러한 폴더 형태의 구조는 깊이감을 유지하고 움직임을 쉽게 인식하도록 합니다. 모든 요소에는 기본 상태와 호버 상태라는 두 개의 키프레임이 있습니다.
Claude 스킬 설치
Claude Code로 설치
가장 간단한 방법은 Claude Code에 저장소를 스킬 디렉터리에 설치하도록 요청하는 것입니다. 다음 요청을 보내세요.
Install the Kubai Icons skill for me:
clone https://github.com/kubai087/kubai-icons into ~/.claude/skills/kubai-icons
(if it's already there, pull the latest version instead),
make sure ~/.claude/skills/kubai-icons/SKILL.md exists, and tell me when it's ready.설치 후 Claude Code를 다시 시작하세요. 다음 시작부터 스킬을 사용할 수 있습니다.
수동 설치
최신 릴리스 아카이브를 다운로드한 다음 스킬 디렉터리에 압축을 풀 수 있습니다.
unzip kubai-icons-v1.0.0.zip -d ~/.claude/skills/또는 저장소를 직접 복제할 수 있습니다.
git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-iconsSKILL.md에 버전 및 표시 이름 필드가 필요한 스킬 마켓플레이스에서는 같은 릴리스의 kubai-icons-v*-platform.zip 아카이브를 사용하세요. 이 아카이브에는 프런트매터에 해당 필드가 포함되어 있습니다.
적합한 모델 선택
이 스킬은 정교한 기하 구조, 레이어드 애니메이션, 반복적인 스크린샷 검토를 사용합니다. 이 프로젝트는 Claude Opus 5.5로 개발하고 블라인드 테스트를 진행했습니다. Claude Code에서는 다음 명령으로 선택할 수 있습니다.
claude --model claude-opus-5-5첫 아이콘 만들기
스킬을 설치한 후 필요한 아이콘을 일반적인 언어로 설명하세요. 아이콘 관련 요청에 응답하므로 스킬 이름을 명시할 필요는 없습니다.
이 저장소를 읽고 주요 기능에 사용할 동적 아이콘을 그려 줘.이 세트에 가위 아이콘과 지도 아이콘을 추가해 줘.다른 아이콘과 어울리는 내보내기 아이콘이 필요해.
Claude는 반복 가능한 프로세스를 따릅니다.
PROMPT.md를 읽고 각 기능을 일상적인 사물과 자연스러운 호버 동작으로 설명합니다. 예를 들어 “폴더가 열립니다”와 같이 표현합니다.- 구조가 가장 가까운 기존 아이콘을 선택하고 프로젝트 엔진을 재사용합니다.
- 새 작업 옆에 비교용 아이콘을 배치한 뒤 자체 검사를 실행합니다.
- 크기, 외곽선, 레이어, 색상, 애니메이션 상태를 스크린샷으로 검토합니다.
- 체크리스트를 통과할 때까지 반복한 다음 갤러리에 아이콘을 추가하고 개수를 업데이트합니다.
자체 제품을 위한 별도의 아이콘 세트를 시작하려면, 스킬이 엔진, 갤러리, 자체 검사를 프로젝트에 복사하여 새 아이콘을 그곳에서 개발할 수 있습니다.
동적 출력 또는 정적 출력 선택
기본값은 동적 출력입니다. 여기에는 호버 시 아이콘의 도형을 변경하는 SVG와 JavaScript가 포함되며, JavaScript를 실행하는 웹 페이지나 인터페이스를 대상으로 합니다. 정적 출력은 스크립트나 스타일시트 없이 아이콘마다 하나의 독립 실행형 SVG를 생성하므로 디자인 도구, 네이티브 앱, 문서, <img> 요소에 적합합니다.
내보낸 에셋이 필요할 때는 Claude에 정적 SVG 파일 또는 Figma에 바로 넣을 수 있는 아이콘을 요청하세요. 저장소에서 기존 아이콘을 직접 내보낼 수도 있습니다.
node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/내보내기 옵션
--palette는 팔레트를 선택합니다. 사용 가능한 값에는 彩色, 蓝灰, 青瓷, 薄荷, 薰衣草, 杏色, 黑色가 있습니다.--accent #hex는 모든 아이콘에 하나의 강조 색상을 적용합니다.--state hover는 기본 포즈 대신 호버 애니메이션의 마지막 상태를 내보냅니다.--size 96은 출력 너비와 높이를 픽셀 단위로 설정합니다.--pad 2.5는 캔버스 주변에 여백을 추가하여 그림자가 잘리지 않도록 합니다.--out dir는 출력 디렉터리를 선택합니다. 기본값은export/입니다.
아이콘 세트를 로컬에서 미리 보기
저장소에는 전체 세트를 살펴볼 수 있는 갤러리가 포함되어 있습니다. 브라우저에서 index.html을 열어 아이콘을 로컬에서 확인하세요. 아이콘 위에 마우스를 올려 움직임을 확인하고, 팔레트를 변경하거나 데모 모드를 켜서 컬렉션이 애니메이션으로 재생되는 모습을 볼 수 있습니다.
팔레트는 7가지가 제공됩니다. 아이콘별 단일 색상, 블루 그레이, 셀라돈, 민트, 라벤더, 애프리콧, 블랙입니다. 팔레트 시스템은 기본 강조 색상에서 아이콘 색상을 파생하며, 팔레트를 변경하면 색상 전환도 애니메이션으로 표시됩니다.
시각적 자체 점검 실행
자체 점검을 실행하려면 Node.js 18 이상과 Chrome이 필요합니다. 헤드리스 방식으로 실행되므로 브라우저 창이 열리지 않습니다. 선택한 아이콘을 점검하고 기존 아이콘을 옆에 배치해 비교하려면 다음을 실행하세요.
node scripts/check.mjs --only 剪刀,地图 --with 文件夹,邮件,下载--only지정한 아이콘만 점검합니다. 이 옵션을 사용하지 않으면 전체 세트를 점검합니다.--with선택한 아이콘 옆에 기존 아이콘을 추가해 시각적으로 비교합니다.--accent #F59E0B밝은 배경에서 테스트 표시를 확인할 수 있도록 하나의 강조 색상을 적용합니다.--scale 3일반 크기의 3배로 시트를 렌더링해 이음새를 드러냅니다.--out dir스크린샷을check-out/이 아닌 다른 디렉터리에 저장합니다.
Chrome이 표준 경로가 아닌 곳에 설치되어 있다면 CHROME 환경 변수를 설정하세요. 저장소의 애니메이션 생성 스크립트인 scripts/media.mjs에는 추가로 ffmpeg와 img2webp가 필요합니다.
고급 워크플로 팁
의미만이 아니라 구조에서 시작하기
새 아이콘을 요청할 때는 기능과 의도한 물리적 동작을 설명하세요. Claude는 가장 가까운 기존 예시를 구조적 출발점으로 사용하므로, 보안 기호를 막연히 요청하는 것보다 “스프링처럼 튀어 열리는 자물쇠”처럼 요청하는 편이 더 유용한 방향을 제공합니다.
여러 조건에서 아이콘 비교하기
비교 아이콘, 다른 팔레트, 더 큰 배율을 사용해 점검을 실행하세요. 이를 통해 기본 미리보기 하나에서는 보이지 않을 수 있는 외곽선, 이음새, 레이어링, 표시 요소, 색상 대비의 불일치를 발견할 수 있습니다.
웹이 아닌 대상에는 정적 내보내기 사용하기
디자인 도구, 네이티브 애플리케이션, 문서, 일반 이미지 요소처럼 대상 환경에서 엔진의 JavaScript를 실행할 수 없다면 정적 SVG를 선택하세요. 호버 상호작용이 인터페이스의 일부라면 동적 출력을 사용하세요.
신중하게 개선 사항 기여하기
명확하지 않은 규칙을 보고하거나, 새로운 Claude 세션으로 블라인드 테스트를 실행하거나, 스크립트를 수정해 이 스킬을 개선할 수 있습니다. 스킬을 사용해 아이콘을 디자인한 후 풀 리퀘스트를 제출할 수도 있습니다. 기여하기 전에 CONTRIBUTING.md와 행동 강령을 읽으세요. 보안 문제는 SECURITY.md에 안내된 절차를 따르세요.
라이선스 고려 사항
Kubai Icons는 Kubai Icons License를 사용하며 오픈 소스가 아닌 소스 공개 라이선스 프로젝트입니다. 이 스킬로 만든 아이콘은 제작자에게 귀속되며 크레딧 없이 상업적으로 사용할 수 있습니다. 각 파일 상단의 저작권 고지가 유지된다면 저장소의 엔진, 갤러리, 예시 아이콘, 자체 점검 도구를 아이콘 세트 프로젝트에 복사할 수 있습니다.
66개의 예시 아이콘은 애니메이션 또는 내보낸 SVG 에셋을 포함해 제품에서 사용할 수 있지만, 별도의 아이콘 팩으로 사용할 수는 없습니다. 스킬은 개인 작업에 사용하고 수정할 수 있으며, 수정하지 않은 원본을 그대로 무료로 공유할 수 있습니다. PROMPT.md와 SKILL.md의 수정본 또는 번역본은 다른 제품으로 재출판하거나 판매하거나 다른 이름으로 제공해서는 안 됩니다.
맺음말
Kubai Icons는 Claude를 일회성 이미지 생성기가 아닌 반복 가능한 아이콘 디자인 워크플로로 바꿔 줍니다. 스킬을 설치하고 제품 기능을 설명한 다음 동적 또는 정적 출력을 선택하고 로컬 갤러리를 살펴보세요. 그런 다음 헤드리스 자체 점검을 사용해 일관성을 다듬을 수 있습니다. 포함된 엔진, 예시, 팔레트, 규칙을 활용하면 매번 시각적 시스템을 다시 구축하지 않고도 세트를 실용적으로 확장할 수 있습니다.