디자이너가 깔아 두면 좋은 AI 스킬 7개, 화면 비평·접근성·UX 문구·개발 인계까지
시안 비평, 접근성 점검, 버튼·오류 문구, 개발자 인계 문서, 디자인 시스템 정리에 쓰는 스킬을 골랐습니다. 앤트로픽 공식 design 플러그인과 별 13만 개가 넘는 UI 스킬이 중심입니다.
이 글에 담긴 것STEP 8개 · 따라 하는 데 20분
바쁘면 이것만
- /plugin marketplace add anthropics/knowledge-work-plugins → /plugin install design@knowledge-work-plugins.
- 화면 캡처를 올리고 '이 화면 디자인 비평해 줘'로 design-critique부터 써 봅니다.
- AI로 화면을 만든다면 anthropics/skills의 frontend-design과 UI UX Pro Max를 함께 깝니다.
필요한 것클로드 코드 또는 claude.ai 프로 이상, 검토할 화면 캡처나 디자인 파일
걸리는 시간20분
왜 필요한가요AI에게 '이 화면 어때?'라고만 물으면 칭찬 위주의 답이 돌아옵니다. 사용성·위계·일관성 같은 기준을 담은 스킬을 쓰면 실무 리뷰처럼 구조화된 피드백을 받을 수 있고 반복되는 인계 문서 작업도 줄어듭니다.
앤트로픽 knowledge-work-plugins의 design 플러그인에는 디자인 비평, 접근성 점검, 개발자 인계, 디자인 시스템, 사용자 조사 정리, UX 문구 스킬이 들어 있습니다. 앤트로픽 공식 skills 저장소에는 화면 코드를 만들 때 쓰는 frontend-design과 포스터·그림을 만드는 canvas-design 같은 예시 스킬이 있습니다. AI가 직접 화면을 만들게 한다면 스타일·색·폰트 규칙을 대량으로 담은 UI UX Pro Max가 자주 쓰입니다.
STEP 1설치 전에 알아 둘 것5분
스킬은 SKILL.md 설명서와 보조 파일이 든 폴더이고 필요한 순간에만 AI가 꺼내 읽습니다.
클로드 코드에서는 저장소를 플러그인 마켓플레이스로 등록한 뒤 필요한 플러그인만 설치합니다. claude.ai에서는 프로 이상 요금제에서 설정 → Capabilities의 Skills 칸에 스킬 폴더를 ZIP으로 올립니다. 이때 코드 실행과 파일 만들기가 켜져 있어야 합니다. 앤트로픽 도움말은 믿을 수 있는 곳의 스킬만 설치하고 그렇지 않은 스킬은 안에 든 스크립트와 외부 접속 지시를 먼저 읽어 보라고 안내합니다.
스킬 설명은 대부분 영어지만 한국어로 요청해도 상황에 맞는 스킬이 불려 나옵니다. 잘 안 불리면 '○○ 스킬을 써서'라고 이름을 적어 줍니다. 설치와 삭제 방법은 '클로드 코드에 스킬·MCP 붙이는 법, 설치부터 떼기까지 8단계'에 자세히 정리했습니다.
| 어디서 쓰나 | 설치 방법 | 조건 |
|---|---|---|
| 클로드 코드 | /plugin marketplace add 저장소 → /plugin install 플러그인@마켓플레이스 | 클로드 프로 이상 또는 Console 계정 |
| claude.ai(웹·앱) | 설정 → Capabilities → Skills에서 스킬 폴더 ZIP을 'Upload skill' | 프로·맥스·팀·엔터프라이즈, 코드 실행 켜기 |
| 코덱스·커서 등 다른 에이전트 | npx skills add 저장소 (-a 로 대상 에이전트 지정) | Node.js 22.20 이상 |
STEP 2시안 비평 · design-critique3분
사용성, 위계, 일관성 기준으로 구조화된 피드백을 받습니다.
탐색 단계 시안부터 마감 직전 화면까지 어느 단계인지 알려 주면 그에 맞는 깊이로 봅니다. 화면 캡처나 피그마 링크를 함께 넣습니다. 저장소는 anthropics/knowledge-work-plugins이고 별 약 3만 4천, 라이선스 Apache 2.0, 마지막 커밋은 11월 3일입니다.
클로드 코드
/plugin marketplace add anthropics/knowledge-work-plugins /plugin install design@knowledge-work-plugins
확인문서 기준: 설치가 끝나면 /plugin 목록에 나타나고, 관련 요청을 하면 스킬이 자동으로 쓰입니다
복사해서 쓰는 프롬프트
design-critique 스킬로 올린 화면을 비평해 줘. 이 화면은 [회원가입 2단계]이고 지금은 [마감 전 점검] 단계야. 가장 큰 문제 3개를 먼저, 그다음 세부 사항을 알려줘. 칭찬은 짧게.
STEP 3접근성 점검 · accessibility-review3분
WCAG 2.1 AA 기준으로 색 대비, 키보드 이동, 터치 영역, 화면 낭독기를 봅니다.
개발로 넘기기 전에 돌려 두면 출시 뒤 고치는 일이 줄어듭니다. 색 대비는 실제 색상 값을 함께 주면 더 정확합니다. 저장소는 anthropics/knowledge-work-plugins이고 별 약 3만 4천, 라이선스 Apache 2.0, 마지막 커밋은 11월 3일입니다.
복사해서 쓰는 프롬프트
accessibility-review 스킬로 이 화면을 WCAG 2.1 AA 기준으로 점검해 줘. 주요 색상 값은 [배경 #FFFFFF, 본문 #8A8A8A, 버튼 #4F7CFF]야. 문제마다 기준 번호와 고칠 방법을 적어 줘.
STEP 4UX 문구 · ux-copy3분
버튼, 오류 메시지, 빈 화면, 확인 창 문구를 쓰거나 검토합니다.
한국어 서비스라면 말투(해요체·합니다체)와 글자 수 제한을 함께 알려 줘야 자연스러운 문구가 나옵니다. 저장소는 anthropics/knowledge-work-plugins이고 별 약 3만 4천, 라이선스 Apache 2.0, 마지막 커밋은 11월 3일입니다.
복사해서 쓰는 프롬프트
ux-copy 스킬로 결제 실패 화면 문구를 써 줘. 말투는 해요체, 제목 15자 이내, 설명 40자 이내, 버튼 2개(다시 시도·다른 결제 수단)야. 사용자를 탓하는 표현은 빼 줘.
STEP 5개발자 인계 문서 · design-handoff3분
레이아웃, 디자인 토큰, 컴포넌트 속성, 상태별 동작, 반응형 기준을 정리한 명세를 만듭니다.
빠뜨리기 쉬운 오류 상태, 빈 상태, 로딩 상태와 애니메이션까지 항목으로 챙깁니다. 디자인 시스템 점검은 같은 플러그인의 design-system 스킬이 맡습니다. 저장소는 anthropics/knowledge-work-plugins이고 별 약 3만 4천, 라이선스 Apache 2.0, 마지막 커밋은 11월 3일입니다.
복사해서 쓰는 프롬프트
design-handoff 스킬로 이 화면의 개발 인계 명세를 만들어 줘. 상태는 기본·로딩·오류·빈 화면 네 가지를 모두 넣고, 반응형 기준은 [360·768·1280px]이야.
STEP 6화면 코드 만들 때 · frontend-design3분
AI가 화면을 만들 때 흔한 템플릿 느낌을 덜어 내는 디자인 방향을 잡습니다.
앤트로픽 공식 예시 스킬입니다. 글꼴, 색, 여백에 의도를 갖고 고르도록 이끄는 지침이라 랜딩 페이지 시안을 코드로 뽑을 때 효과가 큽니다. 저장소는 anthropics/skills이고 별 약 18만, 라이선스 대부분 Apache 2.0(docx·pdf·pptx·xlsx는 소스 공개), 마지막 커밋은 10월 28일입니다.
클로드 코드
/plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills
확인문서 기준: 설치가 끝나면 /plugin 목록에 나타나고, 관련 요청을 하면 스킬이 자동으로 쓰입니다
복사해서 쓰는 프롬프트
frontend-design 스킬로 [수제 빵집] 소개 랜딩 페이지를 HTML 한 장으로 만들어 줘. 분위기는 [따뜻하고 손글씨 느낌], 흔한 그라데이션 배경과 둥근 카드 남발은 피해 줘.
STEP 7스타일 규칙 모음 · UI UX Pro Max3분
UI 스타일, 색 조합, 폰트 짝, 차트 유형 규칙을 검색해 화면에 적용합니다.
README 기준으로 192개 추론 규칙과 79개 검색 가능한 UI 스타일을 담았습니다. 배너·브랜드·슬라이드용 보조 스킬도 함께 들어 있습니다. 저장소는 nextlevelbuilder/ui-ux-pro-max-skill이고 별 약 13만 8천, 라이선스 MIT, 마지막 커밋은 11월 4일입니다.
클로드 코드
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill
확인문서 기준: 설치가 끝나면 /plugin 목록에 나타나고, 관련 요청을 하면 스킬이 자동으로 쓰입니다
복사해서 쓰는 프롬프트
ui-ux-pro-max 스킬로 [헬스케어 예약 앱] 첫 화면에 맞는 스타일 3가지를 추천해 줘. 스타일마다 색 조합, 폰트 짝, 피해야 할 점을 알려주고 하나를 골라 화면 코드를 만들어 줘.
STEP 8포스터·그림 · canvas-design3분
포스터나 한 장짜리 그래픽을 PNG·PDF로 만듭니다.
디자인 철학을 먼저 정한 뒤 그림을 그리는 순서로 진행합니다. 실제 인쇄물 최종본보다는 방향을 보여 주는 시안에 맞습니다. 저장소는 anthropics/skills이고 별 약 18만, 라이선스 대부분 Apache 2.0(docx·pdf·pptx·xlsx는 소스 공개), 마지막 커밋은 10월 28일입니다.
복사해서 쓰는 프롬프트
canvas-design 스킬로 [사내 해커톤] 포스터 시안을 A3 세로 PDF로 만들어 줘. 분위기는 [밤샘 작업, 네온], 글자는 행사명과 날짜만 넣어 줘.
솔직히 한계
- 별 수와 마지막 커밋은 2026년 11월 5일 기준입니다. 스킬 이름과 설치 명령은 저장소 쪽에서 자주 바뀌니 설치 전에 README를 한 번 더 확인하세요.
- 편집부는 각 스킬의 SKILL.md와 README를 읽고 골랐고 모든 스킬을 실제 업무 자료로 돌려 보지는 않았습니다.
- AI의 디자인 비평은 실제 사용자 테스트를 대신하지 못합니다. 중요한 결정은 사용성 테스트로 확인하세요.
- anthropics/skills의 예시 스킬은 앤트로픽이 '시연·학습용'이라고 밝힌 것이라 회사 디자인 규칙에 맞게 고쳐 쓰는 편이 좋습니다.
공식 자료GitHub · anthropics/knowledge-work-plugins · https://github.com/anthropics/knowledge-work-pluginsGitHub · anthropics/skills · https://github.com/anthropics/skillsGitHub · nextlevelbuilder/ui-ux-pro-max-skill · https://github.com/nextlevelbuilder/ui-ux-pro-max-skill앤트로픽 도움말 · 클로드에서 스킬 쓰기 · https://support.claude.com/en/articles/12512180-using-skills-in-claude
SHIFT 팔로우
영상으로 보고, 기사로 자세히 읽기
30초 영상은 인스타그램과 유튜브 쇼츠에, 그날 나온 소식은 스레드에 가장 먼저 올립니다.
