목차
- 스킬이 뭔가 — 한 줄로
- 1. grill-me — 기획의 빈틈을 캐묻는다
- 2. frontend-design — AI 티 나는 UI를 피한다
- 3. design-critique — 만든 화면을 리뷰받는다
- 4. design-system — 시스템을 감사·문서화·확장한다
- 5. design-handoff — 개발에 넘기기 전 빠진 조건을 채운다
- 6. accessibility-review — WCAG 2.1 AA로 점검한다
- 7. web-design-guidelines — 구현된 코드를 검사한다
- 업무 단계에 넣으면 이렇게 됩니다
- 같은 저장소에 더 있습니다
- 핵심 요약 — 이것만 기억하자
- 출처
Claude에게 매번 긴 프롬프트를 다시 쓰는 대신, 특정 업무 방식을 미리 정의해두고 불러오는 것이 스킬(Skill)입니다. 직접 만들 수도 있지만 이미 공개된 것 중에 디자인 업무에 그대로 쓸 만한 것들이 있습니다.
이 글은 그중 7가지를 GitHub에 공개된 SKILL.md 원문 기준으로 정리한 것입니다(조회일 2026-08-20). 각 스킬이 실제로 무엇을 보고 어떤 형태로 결과를 주는지까지 확인해서 담았습니다.
⚠️ 공개 저장소의 스킬은 내용이 수시로 갱신됩니다. 이 글은 조회일 기준이며, 사내·상업 프로젝트에 적용하기 전에는 각 저장소의 라이선스와 최신 내용을 확인하세요.
스킬이 뭔가 — 한 줄로
스킬은 Claude에게 새 능력을 더하는 게 아니라, “어떤 역할로 일할지”를 미리 정해두는 것입니다. 그래서 아래 7개를 각각 기획 리뷰어·디자인 리뷰어·시스템 디자이너·QA 담당처럼 생각하면 이해가 빠릅니다.
1. grill-me — 기획의 빈틈을 캐묻는다
아이디어를 주면 바로 답을 만들어주는 대신, 질문을 던져 아직 결정하지 않은 부분을 찾아냅니다. 스킬 설명 원문이 “계획이나 디자인을 날카롭게 다듬기 위한 끈질긴 인터뷰”인데, 실제로 타깃·우선순위·예외 상황·모호한 요구사항을 계속 파고듭니다.
- 쓰는 시점: PRD를 쓰기 전, 기능 정의 단계. 화면을 그리기 시작하면 이미 늦습니다.
- 내부적으로 더 상세한
grilling인터뷰 방식을 호출하는 구조입니다. - 만든 곳: Matt Pocock
2. frontend-design — AI 티 나는 UI를 피한다
Anthropic이 공개한 스킬로, Claude가 화면을 만들 때 흔히 나오는 무난한 결과물을 막는 것이 목적입니다. 원문을 보면 접근이 꽤 구체적입니다.
- 주제부터 정한다: 제품의 주제·대상 사용자·페이지 역할을 먼저 정의하고, 그 주제의 재료·도구·용어에서 디자인 선택을 끌어옵니다.
- 색은 4~6개 명명된 값으로 팔레트를 짜고, 타이포는 프로젝트마다 다른 조합을 고릅니다.
- “대담함은 한 곳에만” — 시그니처 요소 하나에 집중하고 나머지 장식은 지웁니다.
- 3단계로 진행합니다: 브레인스토밍(색·타이포·레이아웃·시그니처 계획) → 계획 검토(제네릭 템플릿과 구별되는지) → 코드 작성.
- 반응형과 접근성(포커스 표시, 모션 감소)은 기본으로 넣고, UI 문구는 시스템 용어 대신 사용자 언어로 능동태로 씁니다.
재미있는 건 “피해야 할 AI 기본값”을 아예 목록으로 박아뒀다는 점입니다. ① 따뜻한 크림색 배경 + 고대비 세리프 + 테라코타 강조 ② 검은 배경 + 밝은 산성 초록·진홍 ③ 신문식 레이아웃 + 헤어라인 + 각진 디자인. AI로 만든 화면이 어딘가 비슷해 보이는 이유가 이 세 가지라는 뜻입니다.
3. design-critique — 만든 화면을 리뷰받는다
Figma 링크나 스크린샷, 설명과 맥락(목적·대상·제작 단계)을 주면 구조화된 피드백을 줍니다. 평가 기준은 5가지입니다.
| 기준 | 보는 것 |
|---|---|
| First Impression | 시선이 어디로 가나, 목적이 분명한가 |
| Usability | 목표 달성 가능한가, 내비게이션이 직관적인가 |
| Visual Hierarchy | 읽는 순서, 강조, 여백, 타이포 |
| Consistency | 디자인 시스템 준수, 간격·색·타이포 일관성 |
| Accessibility | 색 대비, 터치 타깃, 텍스트 가독성 |
- 단순히 좋다/나쁘다가 아니라 지적 + 근거 + 대안 + 잘된 점을 함께 냅니다.
- 혼자 디자인할 때 중간에 리뷰어 한 명을 끼워 넣는 용도로 적합합니다.
4. design-system — 시스템을 감사·문서화·확장한다
세 가지 모드로 동작합니다.
| 모드 | 하는 일 |
|---|---|
| Audit | 명명 일관성·하드코딩된 값·토큰 커버리지 점검 → 컴포넌트별 점수와 우선순위 |
| Document | 변형·상태·속성·접근성·사용 예시·Do/Don’t 정리 |
| Extend | 새 컴포넌트 설계 — 기존 패턴과의 관계, API·변형·토큰 계획 |
특히 Audit이 실무에서 유용합니다. 시스템을 만들어놓고도 컴포넌트마다 16px이 직접 박혀 있거나 이름 규칙이 갈리는 일이 흔한데, 그걸 찾아 점수로 보여줍니다.
5. design-handoff — 개발에 넘기기 전 빠진 조건을 채운다
디자인을 개발에 넘길 때 필요한 스펙 시트를 만듭니다. 원칙이 “추측하게 만들지 말라(Don’t assume)“이고, 16px 대신 spacing-md처럼 토큰으로 명시하게 합니다.
포함 항목이 촘촘합니다 — 레이아웃·토큰·브레이크포인트, 인터랙션, 콘텐츠 문자 제한과 절단 규칙, 접근성(포커스 순서·ARIA), 그리고 표로 정리되는 상태(기본·호버·로딩·에러), 반응형 동작, 모션(트리거·지속시간·이징).
디자이너가 놓치기 쉬운 질문들이 여기서 걸립니다.
데이터가 없을 때는? 로딩 중에는? 텍스트가 길면? 모바일에서는?
엣지 케이스 항목에 최소·최대 콘텐츠, 다국어 텍스트, 느린 연결까지 들어갑니다.
6. accessibility-review — WCAG 2.1 AA로 점검한다
접근성 감사를 돌립니다. 기준이 명확한 숫자로 나와 있어서 검수 체크리스트로 쓰기 좋습니다.
| 항목 | 기준 |
|---|---|
| 색 대비 (일반 텍스트) | 4.5:1 이상 |
| 색 대비 (큰 텍스트) | 3:1 이상 |
| UI 컴포넌트·그래픽 | 3:1 이상 |
| 터치 대상 | 44×44 CSS 픽셀 이상 |
이 외에 대체 텍스트와 의미 구조, 키보드 접근성과 논리적 포커스 순서, 오류 식별과 입력 레이블, UI 컴포넌트의 이름·역할·값까지 봅니다. AI로 화면을 만들었다면 마지막 QA 단계에 한 번 돌리는 용도입니다.
7. web-design-guidelines — 구현된 코드를 검사한다
Vercel이 공개한 스킬로, 앞의 것들과 결이 다릅니다. 디자인 파일이 아니라 이미 구현된 UI 코드를 봅니다.
- 리뷰할 때마다 GitHub에서 최신 가이드라인을 새로 받아 대조합니다. 규칙이 갱신되면 자동으로 반영되는 구조입니다.
- 결과를
파일:줄번호형식으로 간결하게 알려줘서 바로 고치러 갈 수 있습니다. - Claude Code로 화면을 구현한 뒤 마지막 점검에 적합합니다.
업무 단계에 넣으면 이렇게 됩니다
| 단계 | 쓰는 스킬 |
|---|---|
| 기획 검증 | grill-me |
| UI 방향 잡기 | frontend-design |
| 화면 리뷰 | design-critique |
| 시스템 점검 | design-system |
| 개발 인계 | design-handoff |
| 최종 QA | accessibility-review + web-design-guidelines |
처음이라면 grill-me → frontend-design → design-critique 세 개만으로 시작해도 충분합니다. 기획 → 화면 생성 → 리뷰라는 기본 흐름을 가장 빨리 체감할 수 있는 조합입니다.
같은 저장소에 더 있습니다
위 4개(design-critique·design-system·design-handoff·accessibility-review)가 들어 있는 Anthropic 저장소에는 user-research, ux-copy, research-synthesis도 함께 있습니다. 사용자 리서치 설계, UI 문구 작성, 리서치 결과 종합에 해당하는 스킬이라 디자인 업무 범위에 따라 함께 볼 만합니다.
핵심 요약 — 이것만 기억하자
- 스킬은 새 기능이 아니라 “역할 정의”다. 기획 리뷰어·디자인 리뷰어·QA 담당을 미리 만들어두는 것에 가깝다.
- 기획 단계엔 grill-me — 화면 그리기 전에 타깃·예외·우선순위의 빈틈을 캐묻게 한다.
- frontend-design은 “피해야 할 AI 기본값” 목록까지 갖고 있다. 색 4~6개, 대담함은 한 곳만, 계획 후 코드 작성이 핵심 규칙.
- design-critique의 기준은 5개: First Impression·Usability·Visual Hierarchy·Consistency·Accessibility.
- design-system은 Audit·Document·Extend 3모드 — 하드코딩된 값과 명명 불일치를 점수로 잡아준다.
- design-handoff는 “추측하게 만들지 말라” — 빈 상태·로딩·긴 텍스트·다국어까지 표로 정리해준다.
- QA는 두 개를 붙여 쓴다: accessibility-review(WCAG 2.1 AA, 대비 4.5:1·터치 44px)와 web-design-guidelines(코드를
파일:줄단위로 지적).
이 정보들, 어디서 직접 확인하나?
| 확인할 것 | 확인처 |
|---|---|
| grill-me 원문 | mattpocock/skills |
| frontend-design 원문 | anthropics/skills |
| 디자인 스킬 4종 + 추가 3종 | anthropics/knowledge-work-plugins |
| web-design-guidelines 원문 | vercel-labs/agent-skills |
| 검사 기준(Vercel 가이드라인) | vercel-labs/web-interface-guidelines |
| 설치·사용 방법 | 각 저장소의 README |
출처
- mattpocock/skills — grill-me SKILL.md — 설명 원문,
grilling호출 구조 - anthropics/skills — frontend-design SKILL.md — 주제 기반 접근, 팔레트 4~6개, 3단계 프로세스, 회피할 AI 기본값 3종
- anthropics/knowledge-work-plugins — design/skills — design-critique(5개 기준), design-system(3모드), design-handoff(항목·원칙), accessibility-review(WCAG 2.1 AA 수치)
- vercel-labs/agent-skills — web-design-guidelines SKILL.md — 가이드라인 실시간 수신,
file:line결과 형식 - 각 스킬의 설치 방법과 저장소 라이선스는 이 글에서 확인하지 않았으므로, 적용 전 저장소에서 직접 확인하시기 바랍니다
조회일 2026-08-20 기준. 공개 저장소의 스킬 내용은 갱신될 수 있습니다.