LLM 디자인 스킬 Top 5 — Claude Code와 Codex에 감각 이식하기

LLM한테 랜딩 페이지를 만들어 달라고 하면 결과물이 늘 비슷합니다. 크림색 배경에 세리프 제목, 테라코타 포인트 컬러. 아니면 새까만 배경에 형광 연두 하나.

이건 제 인상이 아니라 Anthropic이 공식 frontend-design 스킬에 직접 적어 둔 내용입니다. AI 생성 디자인이 세 가지 룩으로 수렴한다면서, 먼저 크림색(#F4F1EA 근처) 배경 + 고대비 세리프 + 테라코타를, 그다음 검정 배경 + 형광 연두나 주황 한 색을, 마지막으로 얇은 괘선에 라운드 0인 신문 레이아웃을 지목합니다. 그러고는 이렇게 못 박습니다. “셋 다 선택이 아니라 기본값이고, 주제와 상관없이 나온다.”

디자인 스킬은 이 기본값을 밀어내는 장치입니다.

스킬이 뭐길래

거창한 게 아닙니다. SKILL.md 마크다운 한 장에 판단 기준을 적어 둔 파일이고, 에이전트가 관련 작업을 만나면 그 파일을 컨텍스트로 끌어옵니다. 설치는 사실상 파일 복사예요. Claude Code에서는 /스킬이름으로 직접 부를 수도 있는데, 그 명령어 체계는 슬래시 명령어 정리에 따로 적어 뒀습니다.

~/.claude/skills/<이름>/SKILL.md   # 전역
.claude/skills/<이름>/SKILL.md     # 프로젝트 전용

요즘은 손으로 복사하지 않고 CLI를 씁니다. Vercel이 만든 skills CLI 하나가 Claude Code, Codex, Cursor를 포함해 70개 넘는 에이전트를 커버합니다.

npx skills add <저장소>
npx skills add nvidia/skills --agent claude-code --agent codex --agent cursor
npx skills list     # 설치된 목록
npx skills check    # 업데이트 확인

Claude Code는 세션 재시작이나 /reload-skills로 새 스킬을 잡습니다.

Top 5

스킬	별	성격
ui-ux-pro-max	119.9k	디자인 시스템 DB
taste-skill	79.4k	취향 교정
emilkowalski/skills	31.6k	인터랙션·모션
frontend-design (Anthropic)	공식	방향 설정
supanova	379	한글 특화

1. ui-ux-pro-max — 규칙을 먼저 정하고 코드를 짠다

별 12만 개짜리 최다 설치 스킬입니다. 프롬프트 몇 줄이 아니라 검색 가능한 데이터베이스라는 점이 다릅니다. 제 로컬에 깔린 버전을 열어보니 이렇게 생겼습니다.

~/.claude/skills/ui-ux-pro-max/
├── SKILL.md
├── data/          # colors.csv, typography.csv, ux-guidelines.csv ... 468KB
└── scripts/       # search.py, design_system.py

67개 스타일, 96개 컬러 팔레트, 57개 폰트 페어링, 99개 UX 가이드라인, 25종 차트, 13개 스택. 화면을 그리기 전에 “이 도메인이면 이 팔레트에 이 타이포”를 먼저 확정하고 들어갑니다. 팔레트 개수는 배포판마다 달라서 문서(161개)와 설치본(96개)이 어긋나는데, 실제 동작은 설치본 기준입니다.

npx skills add nextlevelbuilder/ui-ux-pro-max-skill
# 또는 전용 CLI
npm install -g uipro-cli
uipro init --ai claude   # --ai codex / --ai cursor

정한 디자인 시스템을 프로젝트에 고정해 두는 옵션도 있습니다.

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" \
  --design-system --persist -p "MyApp"

2. taste-skill — “AI 냄새” 자체를 겨냥

이름 그대로 취향을 주입합니다. 비대칭 레이아웃, 스프링 기반 애니메이션, 넉넉한 여백처럼 기본값과 반대로 가는 규칙이 들어 있습니다. 폴더명과 설치명이 다르니 주의하세요.

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

현재 기본값은 v2(실험판)입니다. v1 동작에 의존하고 있었다면 --skill "design-taste-frontend-v1"로 고정하세요.

3. emilkowalski/skills — 만든 다음의 마감

Sonner와 Vaul을 만든 Emil Kowalski의 스킬 묶음입니다. 레이아웃이 아니라 **감각의 마지막 5%**를 다룹니다. 이징 곡선, 호버 상태, 시트 제스처, 진입/퇴장 애니메이션 같은 것들이요.

emil-design-eng가 본체고 animate, apple-design, improve-animations, animation-vocabulary, pick-ui-library가 딸려 옵니다. 이 중 animation-vocabulary가 은근히 유용합니다 — “팝오버 열릴 때 통통 튀는 그거”를 Pop in이라고 알려줘서 프롬프트를 정확하게 쓰게 해 줍니다.

npx skills@latest add emilkowalski/skills

4. frontend-design — Anthropic 공식

앞에서 인용한 그 스킬입니다. 톤을 먼저 고르게 하고, 계획을 세운 뒤 스스로 비평하고 고쳐서 짓는 2패스 프로세스를 강제합니다. 팔레트 4~6색, 최소 2개 역할의 서체, 레이아웃 컨셉, 그리고 “이 페이지를 기억하게 만들 단 하나의 요소”를 먼저 확정합니다.

npx skills add anthropics/skills --skill frontend-design

의존성이 없어서 다른 스킬과 충돌이 가장 적습니다. 하나만 깔아 본다면 여기부터.

5. supanova — 한글 프로젝트라면

taste-skill의 한국어 포크입니다. Pretendard, word-break 처리, 한국어 CTA 패턴처럼 영어권 스킬이 놓치는 부분을 채웁니다. 출력이 Tailwind CDN 단일 HTML이라 React 없이도 바로 확인됩니다.

npx skills add uxjoseph/supanova-design-skill

Codex와 Cursor

npx skills add에 --agent 플래그만 붙이면 같은 스킬이 각 도구의 규격에 맞게 설치됩니다.

npx skills add Leonxlnx/taste-skill --agent codex
npx skills add Leonxlnx/taste-skill --agent cursor

uipro-cli 계열은 uipro init --ai codex처럼 자체 플래그를 씁니다. Gemini CLI와 Windsurf도 같은 방식으로 지원됩니다. Figma 시안을 함께 물리고 싶다면 Figma MCP 무료 연동 쪽을 참고하세요.

겹쳐 깔지 마세요

셋 다 취향 계열인 스킬(taste-skill, supanova, frontend-design)을 동시에 켜두면 서로 다른 팔레트 규칙이 부딪혀서 결과가 오히려 뭉개집니다. 성격이 겹치지 않는 조합으로 두 개 정도가 적당합니다.

• 구조·시스템: ui-ux-pro-max
• 마감·모션: emil-design-eng

여기에 프로젝트 성격에 따라 취향 스킬 하나만 더 얹는 식으로요. 스킬은 결국 컨텍스트를 먹기 때문에 많이 깔수록 좋은 게 아닙니다.

정리

디자인 스킬은 모델을 바꾸는 게 아니라 모델이 기본값으로 도망가지 못하게 막는 가드레일입니다. npx skills add 한 줄이면 끝나니 하나씩 켜 보고 결과물이 달라지는지 직접 비교해 보세요. 안 맞으면 폴더 지우면 그만입니다.