Community이미지github.com

parthkapoor15/skill-library

SVG 아이콘, 로고, 일러스트레이션을 Hairline 선 그림으로 변환합니다. /hairline-adopt 명령어로 파일을 불러와 등각 투영 선 그림으로 재구성하고 포인터에 반응하는 동작을 부여합니다.

skill-library란 무엇인가요?

이 스킬은 사용자가 제공한 SVG 파일(아이콘, 로고, 일러스트레이션)을 분석하여 @lucasmarkes/hairline 엔진 기반의 등각 투영 선 그림(Hairline figure)으로 재구성합니다. 원본 SVG를 단순히 추적하거나 애니메이션화하지 않고, 도형의 비율과 구성 요소를 유지한 채 완전히 새로운 선 그림을 생성합니다. 또한 포인터의 움직임에 반응하는 제스처(gesture)를 자동으로 부여하거나 사용자가 지정한 상호작용 방식을 적용할 수 있습니다. 이 스킬은 Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용 가능하며, `/hairline-create` 명령어를 통해 파일 경로와 제스처 설명을 입력받아 작동합니다. 디자인 도구나 인터랙티브 프로토타입에서 SVG 에셋을 생동감 있는 선 그림 캐릭터로 변환하고자 할 때 유용합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/parthkapoor15/skill-library/tree/HEAD/skills/hairline/hairline-adopt

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Hairline: 도형 입양하기

사용자는 도형을 가지고 있으며, 그것을 살아있는 Hairline 선 그림으로 만들고 싶어합니다. 이 스킬은 도형을 읽고, Hairline 엔진에서 객체를 솔리드로 재구성한 후 제스처를 부여합니다. SVG 자체를 애니메이션화하거나 추적하지 않습니다. 도형은 정체성을 제공하고, 그림은 그 비율과 부품을 유지한 채 새롭게 만들어집니다.

필요한 것

  • 하나의 .svg 파일: 아이콘, 로고, 일러스트레이션. 여러 개가 주어지면 하나씩 그림을 만듭니다. 어떤 것이 먼저인지 물어보세요.
  • 선택적으로, 포인터가 무엇을 해야 하는지에 대한 설명. 제공되지 않으면 개념들이 제스처를 제안합니다.

수행 방법

파일 경로와, 그 뒤에 사용자가 제스처에 대해 말한 내용을 그대로 입력하여 /hairline-create를 호출하세요. 0단계에서 도형을 읽고 객체와 그 부품을 수정합니다. 그런 다음 개념들은 이를 유지하면서 제스처에서 차이를 보이거나, 제스처가 주어진 경우 형태와 출력에서 차이를 보입니다. 그 이후의 모든 것(빌드, 확인, 인계)은 해당 스킬의 몫입니다.

말할 내용

개념을 제시할 때, 먼저 한 줄로 도형을 무엇으로 읽었는지와 유지한 부품이 무엇인지 말하세요. 사용자가 읽기를 수정하면, 어떤 개념이든 구축하기 전에 그들의 방식대로 다시 읽으세요.

도형이 다른 사람의 소유인 마크(예: 로고)인 경우, 인계 시에 이를 알리세요: 페이지에 다른 회사의 마크가 표시되며, 게시 여부는 그들의 결정입니다.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

관련 스킬