Taste Skill vs Impeccable vs UI UX Pro Max: 어떤 디자인 스킬이 AI UI를 덜 뻔하게 만들까?
AI 코딩 에이전트에 웹사이트를 요청하면 늘 비슷한 페이지가 나옵니다. 보라색 그라데이션, 알약 모양 배지, 똑같은 카드 세 개. 디자인 스킬은 이 문제의 가장 인기 있는 해결책이고, 상위 스킬들은 GitHub 별이 각각 100,000개를 넘었습니다. 하지만 작동 방식은 크게 다릅니다. 이 가이드는 2026년 11월 6일 기준 소스 코드와 문서를 바탕으로 비교하므로, 프로젝트에 맞는 스킬을 고를 수 있습니다.
2026년 11월 7일 업데이트 · 10분 분량
짧게 답하자면
- 새 마케팅 사이트나 회사 웹사이트를 만든다면: Taste Skill. 엄선된 라이브러리에서 아트 디렉션을 뽑아 주고 실제 브라우저에서 페이지를 점검합니다.
- 이미 있는 UI나 앱, 대시보드를 개선한다면: Impeccable. 집중된 명령 24개, CI에서 돌릴 수 있는 디텍터, iOS와 Android 레퍼런스가 있습니다.
- 플랫폼과 무관하게 제품의 디자인 시스템을 고른다면: UI UX Pro Max. SwiftUI, Jetpack Compose, React Native, Flutter까지 포함한 스타일, 팔레트, 폰트 조합 데이터베이스를 검색합니다.
- 가장 가벼운 선택: Anthropic의 frontend-design. 지침 파일 하나입니다.
- 대체가 아니라 추가 도구: 모션을 위한 Emil Kowalski의 스킬, 접근성과 UX 디테일 검토를 위한 Vercel의 web-design-guidelines.
디자인 스킬은 한 번에 하나만 쓰세요. 규칙이 서로 충돌하기 때문에(한쪽이 추천하는 스타일을 다른 쪽은 금지합니다) 둘을 겹치면 결과가 나아지기는커녕 예측하기 어려워집니다.
AI가 만든 UI가 다 비슷해 보이는 이유
방향 없이 페이지를 요청하면 모델은 지금까지 본 페이지들의 평균을 내놓습니다. 그리고 고치는 라운드마다 그 해법이 다음 기본값이 됩니다. 보라색 그라데이션과 Inter가 물러난 자리에 크림색 배경, 세리프 헤드라인, 테라코타 포인트 컬러가 들어섰고, 이제 Anthropic의 frontend-design 스킬과 Impeccable은 둘 다 이 조합도 AI 티가 나는 특징으로 경고합니다. 좋은 디자인 스킬은 만들기 전에 에이전트에게 방향을 주고, 만든 뒤에 결과를 점검할 방법을 줍니다. 패턴 자체는 AI 티 나는 UI 디자인의 특징과 피하는 방법을 참고하세요.
한눈에 보기
| 스킬 | 접근 방식 | 플랫폼 | 필요 조건 | GitHub 별 |
|---|---|---|---|---|
| Taste Skill 2.5 | 라이브러리에서 방향, 팔레트, 폰트를 뽑아 주고 브라우저에서 페이지 점검 | 회사·마케팅 웹사이트 | Node.js 22+, Chrome | ~111K |
| Impeccable 4.8 | 명령 24개로 이루어진 디자인 어휘와 규칙 기반 디텍터 | 웹, 앱, 대시보드, iOS와 Android | Node.js. 작은 엔진을 다운로드 | ~104K |
| UI UX Pro Max 2.15 | 데이터베이스를 검색해 디자인 시스템 추천 | 웹, 모바일(SwiftUI, Compose, React Native, Flutter), 데스크톱 | Python 3 | ~146K |
| Anthropic frontend-design | 아트 디렉션 지침 파일 하나 | 웹 | 없음 | anthropics/skills에 포함, 설치 1.1M+ |
별 개수와 버전은 2026년 11월 6일 기준입니다. 네 가지 모두 무료 오픈소스입니다. Taste Skill과 UI UX Pro Max는 MIT, Impeccable과 frontend-design은 Apache 2.0 라이선스입니다.
Taste Skill
Taste Skill은 Leonxlnx가 만든, 가장 유명한 “안티 슬롭” 스킬입니다(Taste Skill 튜토리얼 참고). 2026년 11월 4일에 나온 버전 2.5.0은 회사·마케팅 웹사이트에 집중한 전면 재구성입니다.
작동 방식. 프로젝트를 사업 유형별로 분류한 뒤, 엄선된 라이브러리에서 팔레트, 폰트 조합, 히어로 레이아웃을 뽑아 줍니다(규칙은 “취향으로 고르지 않고 뽑는다”). 페이지가 반복되지 않도록 이력도 남깁니다. 출처가 표기된 실제 사진, 브랜드 아이콘, 섹션 레이아웃을 함께 제공하고, 스크립트가 헤드리스 Chrome에서 네 가지 너비로 100개가 넘는 규칙에 맞춰 페이지를 점검합니다.
- 잘하는 것: 실제 에셋과 브라우저 점검이 있는, 개성 있는 웹사이트 초안.
- 주의할 점: 용량이 큽니다(약 36 MB). 첫 페이지를 만들기 전에 약 140 KB의 지침을 불러옵니다. 버전 2.5는 2.1의 앱 화면 파이프라인을 없앴고, 보라색(violet) 같은 일부 선택은 아예 금지합니다. 프로젝트 웹사이트는 아직 버전 2.1을 설명하고 있습니다.
# Codex
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill
# Claude Code
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
이전의 스타일 스킬(soft, minimalist, brutalist, gpt-taste)은 Leonxlnx/taste-skill-classics로 옮겨졌습니다.
Impeccable
Impeccable은 Paul Bakaus가 만들었으며, Anthropic의 frontend-design 스킬에서 출발해 완전한 툴킷으로 성장했습니다(Impeccable 튜토리얼 참고).
작동 방식. 긴 실행 한 번 대신, 에이전트에게 bolder, quieter, typeset, layout, critique, audit, polish, adapt 같은 24개 명령으로 된 디자인 어휘를 주고, 화면이나 컴포넌트 하나씩 적용하게 합니다. 디텍터는 모델을 호출하지 않고 62개 규칙(AI 티 31개, 품질 31개)을 점검하며, 명령줄이나 CI에서 npx impeccable detect src/로 실행합니다.
- 잘하는 것: 기존 UI를 단계별로 개선하기, 웹사이트뿐 아니라 앱과 대시보드, 네이티브 iOS·Android 가이드, 수치로 확인되는 체크리스트.
- 주의할 점: 움직이는 부품이 더 많습니다.
.impeccable/폴더, 에디터 훅, 다운로드되는 엔진이 있습니다. 훅과 라이브 모드는 둘 다 먼저 묻지 않고 동작할 수 있으므로, 켜기 전에 README의 해당 안내를 읽으세요.
npx impeccable install
# then, in Codex: $impeccable init
# in Claude Code: /impeccable init
Codex에서는 설치 후 /hooks에서 프로젝트 훅을 승인하세요.
UI UX Pro Max
UI UX Pro Max는 nextlevelbuilder가 만들었으며, 셋 중 별이 가장 많고 방식이 가장 다릅니다(UI UX Pro Max 튜토리얼 참고).
작동 방식. 규칙 모음이 아니라 검색 가능한 데이터베이스입니다. 스타일 80개, 제품 유형 192개, 팔레트 192개, 폰트 조합 74개, 스택 22개에 대한 가이드라인이 들어 있습니다. 제품을 설명하면 패턴, 스타일, 팔레트, 폰트, 해당 업종에서 피해야 할 안티 패턴, 전달 전 체크리스트를 돌려주고, 결과를 디자인 시스템 파일로 저장할 수도 있습니다.
- 잘하는 것: 일관된 디자인 시스템을 빠르게 고르기, 웹부터 SwiftUI, Jetpack Compose, React Native, Flutter, 데스크톱까지 가장 넓은 플랫폼 범위, 낮은 컨텍스트 비용(에이전트가 데이터를 불러오지 않고 질의하기 때문).
- 주의할 점: 결과를 눈으로 확인하는 단계가 없고, 글래스모피즘처럼 다른 스킬이 금지하는 일부 스타일도 평범한 스타일로 취급합니다. 결과는 제품을 어떻게 설명하느냐에 달려 있습니다.
npm install -g ui-ux-pro-max-cli
uipro init --ai codex # or: uipro init --ai claude
Anthropic frontend-design
Anthropic의 frontend-design 스킬은 약 1,500단어짜리 파일 하나입니다. 에이전트에게 디자인을 주제에 근거해 잡고, 코딩 전에 색상과 타이포그래피를 계획하고, 계획을 “비슷한 페이지라면 누구에게나 내놓을 평범한 기본값”과 비교하고, 자신의 스크린샷을 비평하라고 요구합니다. 크림색·세리프·테라코타 룩부터 평범한 SaaS 카드 키트까지, 피해야 할 AI 기본값을 다섯 묶음으로 짚어 줍니다.
- 잘하는 것: 브리프를 절대 덮어쓰지 않는, 작고 공식적인 출발점.
- 주의할 점: 도구도 검사도 없이 모델의 판단에 의존하고, 모바일 앱에 대한 언급은 적습니다.
# Claude Code
/plugin install frontend-design@claude-plugins-official
# Codex and other agents
npx skills add https://github.com/anthropics/skills --skill frontend-design
알아 둘 만한 보조 도구
- Emil Kowalski의 스킬(
npx skills@latest add emilkowalski/skills): 이징, 스프링, 애니메이션을 쓰지 말아야 할 때처럼 모션과 마감에 관한 스킬 17개. 색상, 폰트, 레이아웃은 정하지 않으므로 Taste Skill 같은 디자인 스킬과 함께 쓰세요. - Vercel의 web-design-guidelines(
npx skills add vercel-labs/agent-skills): 접근성, 포커스, 폼, 타이포그래피에 대한 100개가 넘는 규칙을 점검하고 파일과 줄 단위로 문제를 보고하는 검토 스킬. 실행할 때 GitHub에서 규칙을 가져옵니다. - ibelick의 baseline-ui(
npx skills add ibelick/ui-skills): Tailwind와 React 프로젝트를 위한 must와 never 규칙의 짧은 목록.
pretty-ui (저희가 만든 스킬)
pretty-ui는 Codex Design 팀이 만든 스킬이니 그 점을 감안해서 읽어 주세요. 아래 "더 나은 결과를 얻으려면"의 조언을 하나의 흐름으로 묶었습니다. 에이전트가 여러분의 화면과 실제 콘텐츠로 세 가지 디자인 방향을 만들어 나란히 보여 주고, 고른 방향을 DESIGN.md로 저장한 뒤 단계별로 모든 화면에 적용하고, 마지막으로 AI 티 검사기(보라색 그라데이션, 그라데이션 텍스트, 글래스모피즘, 이모지 아이콘, 내용 없는 문구, 그리드에서 벗어난 간격 등)를 실행합니다.
- 잘하는 것: 스타일을 에이전트가 아니라 사용자가 고르고, 기존 브랜드를 유지하며, 나중에 만드는 화면도 일관되게 유지합니다. 웹사이트뿐 아니라 웹 앱과 모바일 앱(React Native, SwiftUI, Compose, Flutter)도 지원하고, 디자인 시스템 라이브러리의 24가지 시스템이 들어 있습니다.
- 주의할 점: 2026년 11월 7일에 공개되어 아직 검증된 기록이 없습니다. 검사기는 단순한 규칙 모음이라 직접 눈으로 보는 리뷰를 대신하지 못합니다.
# Codex
codex plugin marketplace add ummydev/pretty-ui
codex plugin add pretty-ui@pretty-ui
# Claude Code
/plugin marketplace add ummydev/pretty-ui
/plugin install pretty-ui@pretty-ui
# Other agents
npx skills add ummydev/pretty-ui
MIT 라이선스의 무료 오픈 소스입니다.
스킬들이 공통으로 짚는 AI 티
| 패턴 | Taste Skill | Impeccable | UI UX Pro Max | frontend-design |
|---|---|---|---|---|
| 보라색 또는 바이올렛 그라데이션 | 금지 | 경고 | 일부 업종에서 경고 | 장식이면 경고 |
| 아이콘 대신 이모지 | 금지 | 금지 | 체크리스트에 포함 | — |
| 똑같은 카드의 반복 | — | 경고 | — | 경고 |
| 제목 위의 작은 대문자 라벨 | 금지 | 금지 | — | 경고 |
| 크림색, 세리프, 테라코타 | — | 경고 | — | 경고 |
| 글래스모피즘 | — | 장식이면 금지 | 스타일로 제공 | — |
대시(—)는 해당 스킬의 현재 지침이 그 패턴을 직접 다루지 않는다는 뜻입니다.
목록은 계속 바뀝니다. Inter, Fraunces, Geist, Plus Jakarta Sans는 모두 Impeccable의 과다 사용 폰트 목록에 올라 있고, 이전 버전의 Taste Skill은 그중 일부를 추천했습니다. 어떤 목록이든 취향이 아니라 점검 수단으로 쓰세요.
스킬이 있든 없든 더 나은 결과를 얻으려면
- 에이전트가 만들기 전에 방향을 주세요. 이름이 붙은 색상, 폰트, 반경, 간격이 있는 디자인 시스템이 “모던하게 만들어 줘”보다 낫습니다. 저희 디자인 시스템 라이브러리에서 고르거나 직접 DESIGN.md를 쓰세요.
- 하나가 아니라 세 가지 방향을 요청하세요. 뻔한 결과는 첫 초안을 그대로 받아들이는 데서 나옵니다. 몇 가지 방향을 나란히 비교하고 고르세요. pretty-ui가 이 과정을 대신하고 방향들을 나란히 보여 줍니다.
- 체크리스트로 검토하세요. 디텍터를 돌리거나 AI 티 나는 UI 디자인의 특징을 직접 훑어보고, 다듬기 전에 상위 세 가지 문제부터 고치세요.
자주 묻는 질문
Taste Skill과 Impeccable 중 무엇이 더 좋나요?
새 마케팅 웹사이트라면 Taste Skill이 실제 에셋이 있는 더 강한 첫 초안을 줍니다. 기존 UI, 앱, 대시보드라면 Impeccable이 더 맞습니다. 명령 하나씩 작업하고 네이티브 모바일까지 다룹니다.
이 스킬들은 Codex에서 작동하나요?
네. Taste Skill과 frontend-design은 위에 나온 대로 Codex에 설치되고, Impeccable은 npx impeccable install과 $impeccable init으로, UI UX Pro Max는 uipro init --ai codex로 설치됩니다.
모바일 앱에는 무엇이 가장 좋나요?
Impeccable에는 iOS와 Android 레퍼런스가 있고, UI UX Pro Max는 SwiftUI, Jetpack Compose, React Native, Flutter를 다룹니다. Taste Skill 2.5는 웹사이트에 집중합니다.
무료인가요?
네. 모두 오픈소스이며 무료입니다. 에이전트 사용 비용만 내면 됩니다.