애플은 기기마다 치수 도면을 공개합니다. 케이스를 만드는 회사가 크기에 맞춰 만들 수 있게 하려는 것으로, 한 장에 여러 시점과 치수가 촘촘히 들어갑니다.
enesozturk/dimensional-drawing은 내 화면 컴포넌트를 그런 도면 한 장으로 그리게 하는 에이전트 스킬입니다. 카드나 다이얼로그를 주면 여백, 간격, 모서리 둥글기, 레이어, 다른 요소와의 관계가 적힌 스펙 시트가 나옵니다. 깃허브 스타는 약 1,900개, 라이선스는 MIT입니다(2026년 11월 7일 기준).
들어 있는 것
skills/
├── dimensional-drawing/ 도면 스킬 (예시: 카드·다이얼로그 HTML)
└── dimensional-drawing-motion/ 도면을 약 10초 영상으로규칙
| 규칙 | 뜻 |
|---|---|
| 흑백 | 회색만 쓰고, 선 굵기·점선·빗금으로 구분 |
| 내용 말고 구조 | TITLE SLOT · FLEX, ACTION · HUG, CONTENT SLOT · FILL |
| 숫자 말고 변수 | S1, R2, H1 = 2·S1 + H3, R2 = R1 − B − S6 |
| 브랜드 없음 | UI-CARD-001 같은 중립 이름 |
| 값 지어내지 않기 | 모르는 값은 [TBD] |
결과물에는 위쪽 제목 칸과 주요 변수, 노트, 평면도, 분해도(레이어), 모서리·필드 같은 상세도, 변수 표가 들어갑니다. 공개된 스펙이 있는 실물(README 예시는 보온병)도 같은 방식으로 그립니다.
설치
Claude Code:
git clone https://github.com/enesozturk/dimensional-drawing
cp -r dimensional-drawing/skills/* ~/.claude/skills/claude.ai·Claude 데스크톱은 스킬 폴더(예: skills/dimensional-drawing)를 zip으로 묶어 설정 → Capabilities → Skills에 추가합니다. Codex, Cursor, Gemini CLI 같은 다른 에이전트는 npx skills add enesozturk/dimensional-drawing을 쓰거나 SKILL.md를 가리키면 됩니다.
요청 예시
컴포넌트의 출처(저장소 파일, Storybook, URL, 스크린샷)를 가리키며 부탁합니다.
Make a dimensional drawing of the
Cardcomponent insrc/components/Card.tsx
Draw the anatomy of our settings dialog, same style as the examples
영상으로
모션 스킬은 완성된 도면을 펜으로 그리듯 움직이는 약 10초 영상으로 만듭니다. 머리말 확대 → 평면도로 물러나기 → 레이어가 분해도로 떠오르기 → 전체 시트 순서입니다. Claude에게 “animate this drawing”이라고 하면 Motion 아티팩트로 만들어 MP4로 내보내고, Claude 없이도 Playwright와 ffmpeg로 렌더할 수 있습니다(adapters/headless). 다른 애니메이션 라이브러리는 시험하지 않았다고 적혀 있습니다.
오늘 할 일
내 카드 컴포넌트 하나를 도면으로 뽑아 보세요. 값이 [TBD]로 남은 칸이 디자인 시스템에서 아직 정하지 않은 값입니다.
쇼츠로 보기
이 글은 비치콤버스 쇼츠 No.90의 짝 글입니다. 짧은 주소 beachcombers.co.kr/s/90.