클로드 스킬
클로드 코드에 일하는 방법을 더하는 설명서
스킬은 클로드 코드에게 특정한 일을 하는 방법을 적어 준 설명서입니다. 폴더 하나에 SKILL.md 파일이 들어 있고,
클로드는 맡은 일이 그 설명과 맞을 때 꺼내 읽고 그대로 따릅니다. 한 번 설치해 두면 같은 부탁을 할 때마다 같은 방식으로 일합니다.
이 사이트도 클로드 코드로 만들고 있고, 디자인 작업에 쓸 만한 스킬을 찾다가 이 페이지를 정리했습니다. 설치 수는 2026년 11월 4일에 skills.sh에서 확인한 숫자입니다.
스킬을 찾아 주는 스킬부터
공개된 스킬은 수십만 개가 넘어서 직접 검색해 고르는 것부터 일입니다. find-skills는 그 검색을 클로드가 대신 하게 만드는 스킬입니다. Next.js를 만든 회사 버셀(Vercel)의 실험용 저장소 vercel-labs에 들어 있고, 무료입니다(MIT).
스킬 안에 적힌 순서는 이렇습니다.
- 무슨 일을 하려는지 파악합니다.
- skills.sh 순위에서 설치 수가 많은 스킬이 있는지 먼저 봅니다.
- 없으면
npx skills find 검색어로 찾습니다. - 설치 수 1천 이상, 공식 출처(vercel-labs, anthropics, microsoft 등), 저장소 별 100개 이상인지 확인합니다.
- 후보를 이름·설치 수·출처·설치 명령과 함께 보여 줍니다.
- "설치해 줘"라고 하면 설치합니다.
설치
터미널에 아래 한 줄을 붙여 넣습니다. Node.js가 설치돼 있어야 합니다.
npx skills add vercel-labs/skills --skill find-skills -g -a claude-code -y-g: 어느 폴더에서 클로드 코드를 열어도 쓰이게 전역으로 설치합니다(~/.claude/skills). 빼면 지금 폴더에만 설치됩니다.-a claude-code: 클로드 코드에 설치합니다. 코덱스는-a codex, 커서는-a cursor입니다.-y: 확인 질문을 건너뜁니다.
설치한 뒤에는 클로드 코드를 새로 열어야 목록에 나타납니다. 스킬은 세션을 시작할 때 읽기 때문입니다. 클로드 앱의 채팅 창이 아니라 클로드 코드(터미널·데스크톱 앱의 Code 탭)에서 쓰는 방법입니다.
이렇게 물어보면 됩니다
평소 말투로 부탁하면 됩니다. 고르는 기준을 같이 말하면 결과가 더 좁혀집니다.
- 피그마 시안을 코드로 옮기는 스킬 찾아 줘
- 이 사이트 주소에서 색이랑 글꼴 값을 뽑아 주는 스킬 있어?
- 웹 접근성 점검하는 스킬 찾아 줘. 설치 수 1만 이상만
- 포스터 한 장 만드는 스킬 있어?
- 발표 자료(PPT) 만드는 스킬 찾아서 설치까지 해 줘
- 테일윈드로 디자인 시스템 잡는 스킬 후보 3개 비교해 줘
- 버튼 눌렀을 때 움직임이 어색한지 봐 주는 스킬 있어?
- 리모션으로 짧은 소개 영상 만드는 스킬 찾아 줘
디자이너가 볼 만한 스킬 10개
디자인 작업과 가까운 것만 골랐습니다. 설치 명령은 npx skills add 만든곳 --skill 이름 -g 꼴입니다.
| 이름 | 하는 일 | 만든 곳 | 설치 수 |
|---|---|---|---|
frontend-design | 웹 화면을 만들 때 흔한 템플릿 느낌을 피하고 글꼴·색·여백을 의도를 갖고 고르게 합니다. | anthropics/skills | 110만 |
canvas-design | 포스터나 그래픽을 PDF·PNG 한 장으로 만듭니다. 먼저 디자인 방향을 글로 정한 뒤 그립니다. | anthropics/skills | 12.7만 |
pptx | 파워포인트 파일을 만들고 고칩니다. | anthropics/skills | 24.8만 |
extract-design-system | 공개된 웹사이트 주소를 주면 색·글꼴·간격·모서리·그림자 값을 뽑아 토큰 파일로 정리합니다. | arvindrk/extract-design-system | 13.1만 |
tailwind-design-system | 테일윈드 v4 기준으로 토큰과 컴포넌트, 다크 모드 구조를 잡습니다. | wshobson/agents | 7.2만 |
accessibility | WCAG 2.2 기준으로 대비, 키보드 이동, 대체 텍스트 같은 접근성 문제를 점검합니다. | addyosmani/web-quality-skills | 6.7만 |
review-animations | 화면 전환과 모션 코드를 검토만 합니다. 새 기능을 만들지는 않습니다. | emilkowalski/skills | 27.9만 |
remotion-best-practices | 리모션(React로 영상을 만드는 도구)으로 영상을 만들 때의 규칙을 담았습니다. | remotion-dev/skills | 74.2만 |
figma-use | 피그마 MCP가 연결돼 있을 때 피그마 파일을 직접 읽고 고칩니다. 피그마가 만든 스킬입니다. | figma/mcp-server-guide | 9,500 |
figma-generate-design | 디자인 시스템에 올린 컴포넌트를 써서 피그마에 화면을 만듭니다. 이미지가 아니라 고칠 수 있는 레이어로 만듭니다. | figma/mcp-server-guide | 6,200 |
※ 출처: 각 스킬의 skills.sh 페이지, 2026년 11월 4일 확인. 설치 수는 매일 바뀝니다.
설치 전에 볼 것
스킬은 클로드에게 주는 지시문이라, 설치하면 클로드가 가진 권한 그대로 그 지시를 따릅니다. 파일을 지우거나 외부로 보내라고 적혀 있어도 따를 수 있다는 뜻입니다. 그래서 아래를 확인하고 설치합니다.
- 설치 수가 100 아래인 스킬은 특히 조심합니다. 같은 이름을 베낀 저장소가 많습니다.
- 만든 곳을 봅니다. 앤트로픽, 피그마, 리모션처럼 도구를 만든 회사가 직접 올린 스킬이 가장 안전합니다.
- 설치할 때 나오는 보안 점검(Gen, Socket, Snyk)을 읽습니다. 위험 표시가 있으면 이유를 확인합니다.
- 설치한 뒤
SKILL.md를 한 번 열어 봅니다. 긴 글이 아니라 몇 분이면 읽습니다.
자주 쓰는 명령
npx skills list: 설치된 스킬 보기npx skills update: 설치된 스킬을 최신으로npx skills remove 이름: 스킬 지우기npx skills init 이름: 내 스킬 만들기 (자주 하는 작업이 있다면)