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

AI UI가 다 비슷한 이유와 해결책. ui-ux-pro-max 등 디자인 스킬 5종 설치법을 Claude Code·Codex·Cursor별로.

- source: https://polroute.com/posts/llm-design-skills-top5/
- category: AI 워크플로우
- published: 2026-08-23

---

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

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

![Anthropic 공식 frontend-design 스킬 원문 — AI 생성 디자인이 크림색+세리프+테라코타, 검정+형광 액센트, 신문형 레이아웃 세 가지로 수렴한다고 적힌 문단](/images/llm-design-skills-top5-1.webp)

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

## 스킬이 뭐길래

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

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

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

```bash
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개)이 어긋나는데, 실제 동작은 설치본 기준입니다.

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

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

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

### 2. taste-skill — "AI 냄새" 자체를 겨냥

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

```bash
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이라고 알려줘서 프롬프트를 정확하게 쓰게 해 줍니다.

```bash
npx skills@latest add emilkowalski/skills
```

### 4. frontend-design — Anthropic 공식

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

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

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

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

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

```bash
npx skills add uxjoseph/supanova-design-skill
```

## Codex와 Cursor

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

```bash
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 무료 연동](/posts/figma-mcp-free-setup/) 쪽을 참고하세요.

## 겹쳐 깔지 마세요

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

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

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

## 정리

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