[Claude Code 스킬] hairline-create, 한 문장으로 움직이는 HTML 도형 만들기

"도시의 건물이 아래에서부터 한 층씩 쌓여서 완성되는 모습"을 화면에 넣고 싶었습니다. 그림 툴을 열기에는 마우스에 반응하는 움직임까지 원했고, 직접 애니메이션을 짜기에는 과한 일이었습니다. 이 글에서는 이런 요청을 HTML 파일 하나로 돌려주는 hairline-create 스킬의 사용법과, 위 요청으로 실제로 만든 예시를 다룹니다.

1. 어떤 스킬인가

hairline-create는 아이디어를 하나 주면 Hairline 스타일의 도형을 그려 주는 스킬입니다. 여기서 도형은 둥근 입체를 가는 선 하나로만 그린 아이소메트릭(등각투영) 그림이고, 마우스 포인터에 반응해서 움직입니다. 결과물은 의존성 없이 바로 열리는 HTML 파일 하나입니다. 아래쪽 강도 슬라이더와 테마 전환 버튼도 같이 들어 있습니다.

스킬이 직접 쓰는 것은 도형 코드 하나뿐입니다. 그림을 움직이는 엔진(kernel.js)과 페이지(bench.html)는 스킬에 들어 있는 고정 파일이고, 고치지 않도록 못 박혀 있습니다. 그래서 결과물의 모양과 움직임이 매번 비슷한 품질로 나옵니다.

2. 출처

항목	내용
AI 도구	Claude Code (설치기가 Codex, Cursor, OpenCode, Amp, Antigravity 등에도 설치한다고 표시했습니다)
종류	스킬
만든 사람	Lucas Marques
소개 페이지	https://hairline.lucasmarkes.com/skill
저장소	https://github.com/lucasmarkes/hairline
설치 경로	npx skills add lucasmarkes/hairline
확인한 버전	버전 번호는 확인하지 못했습니다. 2026년 10월 7일에 받은 설치본의 해시는 3fbb60d3으로 시작합니다.
라이선스	MIT (소개 페이지 표기 기준)

설치할 때 설치기가 보안 평가를 같이 보여 줍니다. 제가 설치한 시점에는 Gen이 Safe, Socket이 0 alerts, Snyk이 Med Risk였고, 끝에 "스킬은 에이전트 권한 전체로 실행되니 쓰기 전에 검토하라"는 안내가 나왔습니다. 설치 후 스킬 폴더의 SKILL.md와 스크립트를 한 번 읽어 보시길 권합니다.

3. 언제 쓰면 좋은가

• 소개 페이지나 빈 화면에 넣을, 가볍고 움직이는 그림이 필요할 때
• 그림 하나에 "이 물건이 마우스에 이렇게 반응한다"는 아이디어가 분명할 때
• 라이브러리를 새로 붙이지 않고 파일 하나로 끝내고 싶을 때

반대로 화살표와 상자로 이루어진 다이어그램, 로고 그대로의 아이콘, 색에 의존하는 그림, 글자가 있어야 이해되는 그림은 스킬이 약한 개념으로 분류해서 다시 고치라고 합니다.

4. 사용법

설치는 한 줄입니다.

npx skills add lucasmarkes/hairline

프로젝트의 .agents/skills/hairline-create 폴더에 설치되고, Claude Code에는 심볼릭 링크로 연결됩니다. 이후 아이디어를 붙여서 부릅니다.

/hairline-create <아이디어>

스킬은 다음 순서로 일합니다.

1. 개념. 아이디어를 보고 "대상, 포인터가 하는 일, 읽기창에 뜨는 말"을 한 줄로 쓴 개념을 두세 개 제안하고, 고르기를 기다립니다. 책상 위에 올려놓을 수 있는 물건이어야 하고, 글자 없이는 안 읽히는 개념은 버립니다.
2. 작성. 규칙 10개(rules.md)를 읽고 도형 코드 한 파일을 씁니다. 200줄을 넘기면 아이디어가 둘이라는 신호로 봅니다.
3. 검증. validate.mjs가 규칙을 글자 단위로 검사하고, look.mjs가 브라우저에서 사진 여덟 장을 한 장의 시트로 찍어 점검합니다. 이 단계에는 Node와 브라우저가 필요합니다.
4. 전달. HTML 파일과, 어떤 은유를 썼는지, 어떤 규칙에 기댔는지, 확인하지 못한 것이 무엇인지를 한 줄씩 알려 줍니다.
5. 조정. 고칠 점을 말하면 도형 코드만 고치고 다시 검증합니다. 열 번째 수정도 첫 번째와 같은 기준으로 봅니다.

규칙 10개는 이름만 봐도 성격이 보입니다. hit(포인터 판정은 안 움직이는 자리 기준), order(움직임은 거리순으로 퍼짐), reach(영향 범위에 끝이 있음), accent(강조는 선 색 하나뿐), rest(가만히 있을 때도 구도가 있음), honesty(가려진 선은 안 보임), cost(화면 밖에서는 멈춤), clock(고르기는 트윈, 따라가기는 스프링), radius(모서리는 모두 둥글게), quiet(그림 안에 글자 없음)입니다.

프롬프트는 물건과 움직임을 같이 말하면 가장 잘 풀립니다. "도시"처럼 넓은 말보다 "아래층부터 한 층씩 쌓여 올라가 완성되는 건물"처럼 대상과 변화를 함께 적어 주세요.

5. 적용 예시

이번에 준 요청은 이렇습니다.

/hairline-create 도시의 건물이 아래층부터 한 층씩 차례로 쌓여 올라가 완성되는 모습

개념 단계는 건너뛰었습니다. 스킬 문서가 대상과 움직임을 이미 정해서 온 경우에는 이 단계를 생략해도 된다고 적고 있기 때문입니다. 정리하면 개념은 이렇습니다. 판 위에 건물 여섯 채가 서 있고, 포인터가 가리킨 건물이 땅에서부터 층을 하나씩 올려 맨 위에 좁은 왕관층을 얹으며 완성됩니다. 나머지 건물은 원래 높이로 돌아갑니다. 읽기창에는 tower 1처럼 건물 번호가 뜨고, 슬라이더는 층과 층 사이의 시차입니다.

아래가 완성본입니다. 건물 위에 마우스를 올려 보시고, 슬라이더를 움직여 보세요.

처음 만든 결과에서 고친 것은 세 가지입니다.

• 첫 결과는 층 높이가 낮아서 건물이 케이크처럼 납작해 보였습니다. 층 높이를 7에서 11로 키웠습니다.
• 앞쪽 건물은 완성해도 4층이라 쌓이는 느낌이 약했습니다. 맨 뒤 건물을 9층, 앞쪽을 6층에서 7층으로 높여 높낮이를 만들었습니다. 가만히 있을 때는 맨 뒤 건물 하나만 진하게 보이게 해 눈 둘 곳을 정했습니다.
• 화면 배율을 키우다가 판의 아래쪽 모서리가 프레임에 닿았습니다. 규칙 reach가 "가장 극단적인 자세에서도 프레임 안에 있어야 한다"고 하기 때문에 배율을 한 단계 낮췄습니다.

만들면서 가장 마음에 들었던 부분은 포인터 판정입니다. 규칙 hit은 "지금 화면에 그려진 모양이 아니라 가만히 있을 때의 모양으로 판정하라"고 합니다. 건물이 위로 자라는 도형은 이 규칙을 안 지키면 포인터 밑에서 건물이 커졌다 줄었다를 반복하기 쉬운데, 각 건물이 처음 높이로 서 있을 때의 몸통을 기준으로 판정하니 그런 떨림이 없었습니다.

다만 이 글의 예시는 스킬이 제공하는 전체 검증을 다 돌린 것은 아닙니다. 파일 검사(validate.mjs)는 통과했지만, 사진 여덟 장 시트를 만드는 look.mjs는 설치 단계에서 별도 패키지를 받아야 해서 돌리지 않았고, 대신 브라우저에서 가만히 있을 때와 포인터를 올렸을 때, 슬라이더 최대에서 직접 봤습니다. 쓰실 때는 스킬이 안내하는 전체 검증까지 돌리시길 권합니다.

6. 써 본 소감

도형을 처음부터 짜는 것보다 훨씬 빨랐고, 무엇보다 "규칙에 맞지 않으면 완성이 아니다"라는 기준이 있어서 결과를 믿고 쓸 수 있었습니다. 한편 선 하나로만 그려야 하다 보니 색이나 글자로 풀 수 있는 설명을 포기해야 하는 점은 아쉬웠습니다. 소개 페이지나 빈 화면에 가볍게 움직이는 그림이 필요한 분이라면 한 번 써 보시길 권합니다.