클로드로 만든 화면의 밤티를 지우는 디자인 스킬 5개
- 클로드 화면이 늘 보라색 그라데이션이라면 디자인 스킬이 없어서입니다.
- frontend-design 등 디자인 스킬 5개의 설치와 사용 순서를 담았습니다.
Quick Start
디자인 스킬은 클로드 코드에서 설치 명령어 한 줄로 붙입니다.
아래 다섯 개를 상황에 맞게 골라 씁니다.
- 처음이라면 앤트로픽 공식인 STEP 1(frontend-design)부터 설치합니다.
- 색·폰트 조합까지 정하고 싶으면 STEP 2(ui-ux-pro-max)를 추가합니다.
- 나머지 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 스킬을 쓰는 프론트엔드 디자이너야. 만들 화면은 [만들 화면, 예: 동네 빵집 예약 랜딩페이지]야. 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 스킬을 쓰는 UI/UX 디자이너야. 만들 서비스는 [서비스 설명, 예: 30대 직장인용 가계부 앱]이야. ui-ux-pro-max 스킬로 이 서비스에 맞는 디자인 시스템을 만들어줘. - 스타일 방향 - 컬러 팔레트(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 스킬로 화면을 점검하는 디자인 리뷰어야. 점검할 곳은 지금 프로젝트의 메인 화면이야. 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 스킬로 애니메이션을 다듬는 디자인 엔지니어야. 점검할 곳은 이 화면의 애니메이션이야. 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 코드를 점검하는 리뷰어야. 점검할 곳은 지금 프로젝트의 UI 코드야. web-design-guidelines 스킬로 규칙 위반을 찾아 고쳐줘. - 접근성 · 성능 · 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 는 여러 스킬이 든 저장소입니다.
설치 목록에서 필요한 것만 고르면 됩니다.
FAQ
다섯 개를 다 깔아야 하나요? 아닙니다.
처음이라면 앤트로픽 공식인 frontend-design 하나로 시작하고, 부족한 부분에 맞춰 하나씩 더하면 됩니다.
taste-skill·impeccable 은 왜 빠졌나요? 둘 다 이전 콘텐츠에서 이미 소개해서 이번 목록에서는 뺐습니다.
npx skills add 는 클로드 코드 안에서 치나요? 아닙니다.
터미널에서 실행하는 명령어입니다.
/plugin 으로 시작하는 명령만 클로드 코드 안에서 입력합니다.
공식 참고 자료
이메일 남기고 전체 바로 보기