클로드로 만든 화면의 밤티를 지우는 디자인 스킬 5개

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

Quick Start

디자인 스킬은 클로드 코드에서 설치 명령어 한 줄로 붙입니다. 아래 다섯 개를 상황에 맞게 골라 씁니다.

1. 처음이라면 앤트로픽 공식인 STEP 1(frontend-design)부터 설치합니다.
2. 색·폰트 조합까지 정하고 싶으면 STEP 2(ui-ux-pro-max)를 추가합니다.
3. 나머지 STEP 3~5는 AI 티 걸러내기·애니메이션·접근성 점검이 필요할 때 씁니다.

STEP 1 · 2분frontend-design 으로 주제에 맞는 디자인 방향부터 잡는다

이 단계에서는 화면을 만들 때마다 같은 템플릿 기본값이 나오는 걸 막습니다. frontend-design 은 앤트로픽 공식 스킬로, SKILL.md 가 "Ground your designs in the subject matter"라고 적어 두고 만드는 주제에 맞춘 방향을 먼저 정하게 하기 때문입니다.

/plugin install frontend-design@claude-plugins-official

frontend-design 스킬로 [만들 화면, 예: 동네 빵집 예약 랜딩페이지]를 만들어 주세요.
코드를 쓰기 전에 이 주제에 맞는 디자인 방향(톤·타이포·컬러·레이아웃)을 먼저 한 문단으로 제안하고, 보라색 그라데이션이나 똑같은 카드 세 개 같은 템플릿 기본값은 쓰지 마세요.

성공하면 설치 후 ✔ Successfully installed plugin 메시지가 뜨고, 화면 요청을 했을 때 코드보다 디자인 방향 제안이 먼저 돌아옵니다.

STEP 2 · 3분ui-ux-pro-max 로 스타일·색·폰트를 디자인 시스템으로 묶는다

이 단계에서는 색과 폰트를 그때그때 고르지 않고 한 벌의 디자인 시스템으로 정합니다. ui-ux-pro-max 는 디자인 스타일·컬러 팔레트·타이포그래피(폰트 조합)를 담은 "design intelligence" 스킬이기 때문입니다.

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

ui-ux-pro-max 스킬로 [서비스 설명, 예: 30대 직장인용 가계부 앱]에 맞는 디자인 시스템을 만들어 주세요.
스타일 방향, 컬러 팔레트(HEX), 제목·본문 폰트 조합을 먼저 정리하고, 그 시스템으로 메인 화면 하나를 구현해 주세요.

성공하면 마켓 추가와 설치가 각각 완료 메시지를 내고, 요청 결과로 스타일·팔레트·폰트 조합이 먼저 정리된 뒤 그 값을 쓴 화면 코드가 돌아옵니다.

STEP 3 · 2분hallmark 로 AI 티 나는 뻔한 구성을 걸러낸다

이 단계에서는 이미 만든 화면에서 AI가 만든 티가 나는 부분을 찾아 고칩니다. hallmark 는 Together AI 의 Nutlope 가 만든 스킬로, README 에 "fifty-seven slop-test gates"를 두고 AI 생성물처럼 보이는 결과를 거부한다고 적혀 있으며 hallmark audit 로 점검할 수 있기 때문입니다.

npx skills add nutlope/hallmark

hallmark 스킬로 지금 프로젝트의 메인 화면을 audit 해 주세요.
AI가 만든 티가 나는 항목을 목록으로 보여주고, 항목마다 어떻게 고칠지 제안한 다음 내가 승인하면 수정해 주세요.

성공하면 npx 설치가 끝난 뒤 스킬 목록에 hallmark 가 보이고, 요청 결과로 걸린 항목 목록과 수정 제안이 돌아옵니다.

STEP 4 · 2분emil-design-eng 로 애니메이션 곡선과 속도를 잡는다

이 단계에서는 어딘가 뻣뻣한 움직임을 자연스럽게 다듬습니다. emil-design-eng 는 Emil Kowalski 의 스킬 모음에 들어 있는 스킬로, README 가 "mostly animation"이라고 소개하듯 ease-in 과 ease-out 중 무엇을 고를지 같은 애니메이션 판단을 다루기 때문입니다.

npx skills@latest add emilkowalski/skills

emil-design-eng 스킬로 이 화면의 애니메이션을 점검해 주세요.
버튼·모달·목록 전환마다 지금 쓰는 easing 과 duration 을 표로 정리하고, 바꿔야 할 값과 그 이유를 적은 뒤 수정해 주세요.

성공하면 설치 과정에서 emilkowalski/skills 의 스킬 목록이 뜨고, 요청 결과로 요소별 easing·duration 표와 수정안이 돌아옵니다.

STEP 5 · 2분web-design-guidelines 로 접근성·UX 규칙을 점검한다

이 단계에서는 보기 좋은 것과 별개로 규칙상 빠진 곳이 없는지 확인합니다. web-design-guidelines 는 Vercel 의 agent-skills 저장소에 들어 있는 스킬로, README 가 "100+ rules covering accessibility, performance, and UX"라고 소개하기 때문입니다.

npx skills add vercel-labs/agent-skills

web-design-guidelines 스킬로 지금 프로젝트의 UI 코드를 점검해 주세요.
접근성·성능·UX 규칙 위반을 파일과 줄 번호로 보여주고, 심각한 것부터 순서대로 고쳐 주세요.

성공하면 설치 때 뜨는 선택 목록에서 web-design-guidelines 를 고를 수 있고, 요청 결과로 파일·줄 번호가 붙은 위반 목록이 돌아옵니다.

자주 막히는 곳

/plugin install frontend-design@anthropics-claude-code 가 안 됩니다. 마켓 이름이 다릅니다. 공식 마켓에 올라와 있으니 /plugin install frontend-design@claude-plugins-official 로 설치하세요.

ui-ux-pro-max 설치 명령이 마켓을 못 찾는다고 합니다. 설치 전에 /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill 로 마켓을 먼저 추가해야 합니다. 두 줄을 순서대로 실행하세요.

web-design-guidelines 를 깔았는데 다른 스킬도 같이 보입니다. vercel-labs/agent-skills 는 여러 스킬이 든 저장소입니다. 설치 목록에서 필요한 것만 고르면 됩니다.

알아 둘 한계

• hallmark 의 57개 검사 항목을 이 글에서 하나하나 확인하지는 않았습니다. 영상 속 검사 항목 화면은 설명용으로 재구성한 것이며 실제 출력이 아닙니다.
• 다섯 개가 서로 겹치는 부분이 있습니다. 한 번에 다 켜기보다 방향(frontend-design)→시스템(ui-ux-pro-max)→점검(hallmark·web-design-guidelines)→움직임(emil-design-eng) 순서로 나눠 쓰는 편이 결과를 비교하기 쉽습니다.
• 스킬 구성과 설치 방법은 바뀔 수 있으며, 이 글은 2026년 9월 21일 기준입니다.

FAQ

다섯 개를 다 깔아야 하나요? 아닙니다. 처음이라면 앤트로픽 공식인 frontend-design 하나로 시작하고, 부족한 부분에 맞춰 하나씩 더하면 됩니다.

taste-skill·impeccable 은 왜 빠졌나요? 둘 다 이전 콘텐츠에서 이미 소개해서 이번 목록에서는 뺐습니다.

npx skills add 는 클로드 코드 안에서 치나요? 아닙니다. 터미널에서 실행하는 명령어입니다. /plugin 으로 시작하는 명령만 클로드 코드 안에서 입력합니다.

공식 참고 자료

• Anthropic 공식 저장소 — anthropics/skills
• ui-ux-pro-max 공식 저장소 — nextlevelbuilder/ui-ux-pro-max-skill
• hallmark 공식 저장소 — Nutlope/hallmark
• Emil Kowalski 공식 저장소 — emilkowalski/skills
• Vercel 공식 저장소 — vercel-labs/agent-skills

각 스킬의 설치 명령어와 설명 문구는 위 저장소의 README·SKILL.md 를 2026년 9월 21일에 직접 열어 대조 확인한 내용입니다.