Claude Code나 Codex로 프론트엔드를 만들다 보면 어느 순간 다들 같은 경험을 한다.
완성된 화면을 보는 순간 뭔가 익숙하다. 보라색 그라디언트 배경, Inter 폰트, 카드 안에 또 카드, 회색 텍스트에 커다란 글로우 숫자. “이거… 어디서 본 것 같은데?”
맞다. GPT로 만든 그 사이트랑 똑같이 생겼다. Cursor로 만든 그 랜딩 페이지랑도 똑같다. 다르게 만들어달라고 했는데 결국 다 비슷하게 나온다.
이걸 커뮤니티에서는 AI 슬롭 디자인이라고 부른다. AI가 학습 데이터에서 가장 자주 나온 패턴을 그대로 출력하는 현상이다. 못생긴 건 아닌데, 뭔가 개성이 없고 “이거 AI가 만들었다”는 게 한눈에 보인다.
Impeccable은 Paul Bakaus가 만든 오픈소스 AI 디자인 스킬로, 2026년 2월 28일 출시 이후 3주 만에 GitHub 스타 10,000개를 넘겼다.
npx skills add pbakaus/impeccable한 줄로 Claude Code, Codex, Cursor, Gemini CLI에 설치할 수 있고, 20개의 슬래시 커맨드와 7개의 도메인별 레퍼런스 파일로 AI가 생성한 프론트엔드의 디자인 품질을 교정한다.
왜 AI는 항상 같은 디자인을 뱉나
먼저 이걸 이해하고 가야 Impeccable이 왜 필요한지 납득이 된다.
LLM은 다음 토큰을 예측하는 모델이다. 학습 데이터에서 가장 자주 등장한 패턴이 가장 높은 확률로 출력된다. 웹에서 가장 많이 쓰이는 폰트? Inter다. 가장 많이 보이는 색상 조합? 보라색과 파란색 그라디언트다. 가장 흔한 UI 컴포넌트 구조? 카드다.
AI는 “멋진 디자인”을 만드는 게 아니라 “멋진 디자인처럼 보이는 것들의 평균”을 만든다. 그래서 뭘 시켜도 비슷하게 나오는 것이다.
AI 슬롭 디자인의 5대 패턴
실제로 Claude Code, Codex, Cursor로 랜딩 페이지를 만들어보면 아래 패턴이 반복된다.
1. Inter 폰트 남발 Inter는 나쁜 폰트가 아니다. 문제는 생각 없이 쓴다는 거다. AI가 만든 UI에서 Inter를 보면 “폰트 선택을 안 했구나”라는 신호다. 디자인 커뮤니티에서 Inter를 “AI의 Comic Sans”라고 부르기 시작한 이유다.
2. 보라색-파란색 그라디언트 다크 배경에 보라색과 파란색이 섞인 그라디언트. 혹은 사이언과 퍼플 악센트. 나쁜 조합이 아닌데, 모든 AI 생성 사이트에서 보이니까 문제다. “AI가 만든 사이트” 표식이 됐다.
3. 카드 안에 카드 UI 계층 구조를 이해 못 하면 뭐든 카드로 감싼다. 카드 안에 카드, 3단 중첩 컨테이너. AI는 카드가 흔한 패턴이라는 걸 알지만 언제 쓰면 안 되는지는 모른다.
4. 채도 있는 배경 위 회색 텍스트 접근성 위반의 클래식이다. 컬러풀한 배경 위에 text-gray-400 같은 회색 텍스트를 얹으면 명도 대비가 무너진다. AI는 자주 이 실수를 한다.
5. 중앙 정렬 히어로 + 빛나는 숫자 “우리 서비스는 이미 10,000+ 팀이 사용합니다”처럼 크게 빛나는 숫자, 중앙 정렬 헤드라인, 두루뭉술한 문구. Anthropic의 원래 frontend-design 스킬도 이걸 막으려 했지만 역부족이었다.
Impeccable이 뭔가
Impeccable은 Paul Bakaus가 만든 오픈소스 AI 디자인 스킬이다. Anthropic의 공식 frontend-design 스킬을 확장하는 방식으로 설계됐다.
2026년 2월 28일 첫 출시 이후 3주도 안 돼 5번의 메이저 업데이트가 나왔고, 2026년 3월 17일 기준 v1.5.1이 현재 최신 버전이다. GitHub 스타는 10,000개를 넘겼다.
라이선스는 Apache 2.0이고 공식 사이트는 impeccable.style이다.
Impeccable의 3가지 핵심 구성
1. 확장된 스킬 (SKILL.md) Anthropic의 frontend-design 스킬보다 깊게 들어간 7개의 도메인별 레퍼런스 파일이 붙어 있다.
| 레퍼런스 파일 | 담당 영역 |
|---|---|
| typography | 타입 시스템, 폰트 페어링, 모듈형 스케일, OpenType 기능 |
| color-and-contrast | OKLCH, 틴티드 뉴트럴, 다크모드, 접근성 |
| spatial-design | 여백 시스템, 그리드, 시각적 위계 |
| motion-design | 이징 커브, 스태거링, prefers-reduced-motion |
| interaction-design | 폼, 포커스 상태, 로딩 패턴 |
| responsive-design | 모바일 퍼스트, 유체 디자인, 컨테이너 쿼리 |
| ux-writing | 버튼 레이블, 에러 메시지, 빈 상태 문구 |
이 레퍼런스 파일들이 AI에게 “이렇게 해라”를 알려준다면, 안티패턴 라이브러리는 “이렇게 하지 마라”를 명시한다.
2. 20개의 슬래시 커맨드 AI에게 “더 좋게 만들어”가 아니라 구체적인 지시어로 말할 수 있게 해주는 커맨드 세트다. 각 커맨드가 디자인의 특정 측면을 담당한다.
3. 안티패턴 라이브러리 AI에게 명시적으로 “이건 하지 마라”를 전달하는 큐레이션된 금지 목록이다. 위에서 설명한 5대 패턴이 여기 들어 있다.
설치 방법
방법 1: npx (권장, 가장 빠름)
npx skills add pbakaus/impeccable
이 명령 하나로 끝난다. AI 도구를 자동으로 감지해서 파일을 올바른 위치에 놓아준다. Claude Code, Cursor, Codex CLI, Gemini CLI 모두 지원한다.
설치 후 한 번만 실행하면 된다.
/teach-impeccable
이 커맨드가 현재 프로젝트의 디자인 컨텍스트를 .impeccable.md 파일에 저장한다. v1.5.0에서 추가된 기능으로, 이후부터는 매번 컨텍스트를 다시 설명할 필요가 없다.
방법 2: 직접 다운로드
impeccable.style에서 자신의 AI 도구에 맞는 ZIP을 받아서 프로젝트에 풀면 된다.
Claude Code 기준 파일 위치
Claude Code에 설치하면 아래 구조로 파일이 생긴다.
.claude/
├── skills/
│ └── frontend-design/
│ ├── SKILL.md ← 메인 스킬 파일
│ └── reference/
│ ├── typography.md
│ ├── color-and-contrast.md
│ ├── spatial-design.md
│ ├── motion-design.md
│ ├── interaction-design.md
│ ├── responsive-design.md
│ └── ux-writing.md
.impeccable.md ← /teach-impeccable으로 생성되는 컨텍스트 파일
Codex CLI는 .codex/skills/ 하위에, Cursor는 .cursorrules 연동 방식으로 들어간다.
20개 커맨드 사용법
Impeccable의 커맨드는 크게 세 그룹으로 나뉜다.
진단 그룹
/audit — 현재 UI의 문제를 찾는다. 접근성, 퍼포먼스, 테마 일관성, 반응형 설계를 종합 검토하고 심각도별 리포트를 준다.
/audit checkout-form
특정 컴포넌트나 페이지를 지정할 수 있다. 결과는 HIGH/MEDIUM/LOW 심각도로 분류된다.
/critique — 기술적 수정이 아니라 디자인 피드백을 받는다. “이게 왜 별로인지”를 설명해준다.
교정 그룹
/normalize — 디자인 시스템 기준으로 구현을 정렬한다. /audit 이후에 쓴다. 불일치한 spacing, color token, typography를 고쳐준다.
/distill — 불필요한 복잡도를 제거한다. 과잉 중첩된 컨테이너, 안 써도 되는 shadow, 과도한 border-radius를 걷어낸다. AI 슬롭 제거에 가장 직접적인 커맨드다.
/polish — 배포 직전 마지막 손질이다. /normalize 이후에 써야 한다. 세부적인 리듬과 마이크로 인터랙션을 다듬는다.
스타일 조정 그룹
/bolder / /quieter — 디자인의 강도를 올리거나 낮춘다. “더 임팩트 있게” / “더 미니멀하게” 같은 방향 조정.
/animate — 모션 디자인을 추가한다. Impeccable의 motion-design 레퍼런스 기준으로 easing, duration, stagger를 적용한다.
/delight — 사용자를 즐겁게 하는 마이크로인터랙션, 호버 이펙트, 트랜지션을 추가한다.
v1.5에서 추가된 커맨드
/typeset — 타이포그래피에만 집중한다. 폰트 스케일, 라인 하이트, 레터 스페이싱, OpenType 피처를 최적화한다.
/arrange — 레이아웃과 여백 시스템을 정렬한다. 그리드 정합성, 수직 리듬, 시각적 위계를 교정한다.
/overdrive — 제약 없이 디자인을 극단적으로 밀어붙인다. 실험적인 표현이 필요할 때 쓴다.
핵심 워크플로
/audit → /normalize → /polish
이 세 단계가 기본 워크플로다. audit으로 문제를 찾고, normalize로 고치고, polish로 마무리한다. /distill은 AI 슬롭이 심할 때 normalize 전에 먼저 쓰면 좋다.
Before / After: 실제로 얼마나 달라지나
케이스 1: SaaS 랜딩 페이지
Claude Code로 만든 랜딩 페이지에 Impeccable을 적용한 비교다.
Before (Impeccable 없음)
/* AI가 생성한 CSS 패턴 */
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
border-radius: 12px;
color: #9ca3af; /* gray-400 — 접근성 위반 */
box-shadow: 0 0 40px rgba(139, 92, 246, 0.3); /* 글로우 */
- Inter 폰트
- 보라색 그라디언트 배경
- 그라디언트 위 회색 텍스트 (대비율 2.1:1, WCAG AA 기준 4.5:1 미달)
- 카드 3단 중첩
- 중앙 히어로에 “10,000+ 팀 사용 중” 빛나는 숫자
After (/audit → /distill → /normalize → /polish)
/* Impeccable이 교정한 패턴 */
font-family: 'Instrument Serif', Georgia, serif; /* 의도된 폰트 선택 */
background-color: oklch(97% 0.01 250); /* 틴티드 뉴트럴 */
border-radius: 6px; /* 과도하지 않은 radius */
color: oklch(25% 0.02 250); /* 고대비 텍스트 */
- 제품 성격에 맞는 폰트 페어링 제안
- OKLCH 기반 틴티드 뉴트럴 배경 (색이 있지만 튀지 않음)
- 텍스트 대비율 7.2:1 (WCAG AAA 통과)
- 카드 1단으로 정리
- 히어로 텍스트를 구체적인 문구로 교정
케이스 2: 대시보드 컴포넌트
Codex로 만든 데이터 대시보드에 /arrange → /typeset 적용.
Before
- 모든 섹션이 16px 간격으로 균일 (시각적 위계 없음)
- 숫자 KPI와 설명 텍스트가 같은 font-weight
- 테이블 헤더와 본문이 거의 같은 크기
After
- 섹션 간격: 8, 16, 32, 64px 스케일 시스템 적용
- KPI 숫자는
font-variant-numeric: tabular-nums+ tabular 폰트 - 테이블 계층: 헤더
text-xs uppercase tracking-wider, 본문text-sm
숫자가 같아도 읽히는 느낌이 완전히 다르다.
케이스 3: 폼 컴포넌트 접근성 교정
Claude Code로 만든 로그인 폼에 /audit 후 /normalize 적용.
Before
// AI가 자주 만드는 폼 패턴
<input
placeholder="이메일을 입력하세요"
className="border rounded-lg px-4 py-2 text-gray-500"
/>
// label 없음, placeholder만 있음
// focus ring 없음
// 에러 상태 없음
<label>없이 placeholder만 존재 (스크린 리더 접근성 실패)- focus 시 outline 없음 (키보드 사용자 네비게이션 불가)
- 에러 메시지를 색상만으로 표현 (색각이상 사용자 판단 불가)
After
// Impeccable /normalize 이후
<div className="space-y-1">
<label htmlFor="email" className="text-sm font-medium text-gray-900">
이메일
</label>
<input
id="email"
type="email"
className="border rounded-md px-4 py-2 focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 focus:outline-none"
aria-describedby={error ? "email-error" : undefined}
/>
{error && (
<p id="email-error" role="alert" className="text-sm text-red-600 flex items-center gap-1">
<span aria-hidden="true">⚠</span> {error}
</p>
)}
</div>
- label과 input 연결
- focus ring 명시
- 에러를 텍스트 + 아이콘으로 동시 표현
실수하기 쉬운 지점 3가지
실수 1: polish를 normalize 전에 쓴다
순서가 중요하다. /polish는 “이미 잘 정렬된 디자인의 마지막 손질”이다. normalize 없이 polish를 쓰면 불일치한 상태에서 미세 조정만 하게 된다.
틀린 순서: /audit → /polish → /normalize
올바른 순서: /audit → /normalize → /polish
AI 슬롭이 심하면 /distill을 normalize 앞에 끼운다.
추천 순서: /audit → /distill → /normalize → /polish
실수 2: /teach-impeccable을 한 번만 쓴다고 착각한다
/teach-impeccable은 프로젝트의 디자인 컨텍스트를 .impeccable.md에 저장한다. 디자인 방향이 바뀌거나 새 컴포넌트 패턴이 생기면 다시 실행해야 한다. “한 번 실행하면 영구적”이 아니다.
실수 3: /critique를 피드백으로 오해한다
/critique는 디자인에 대한 “의견”이 아니라 “진단”이다. 감정적 피드백이 아니라 구체적인 디자인 원칙 위반을 지적한다. 처음에는 좀 날카롭게 느껴질 수 있는데, 이게 정상이다. 무시하지 말고 읽어보면 실제로 고쳐야 할 지점이 맞다.
Codex와 함께 쓸 때 추가 팁
Codex는 병렬 에이전트로 여러 컴포넌트를 동시에 작업하는 방식을 자주 쓴다. 이때 Impeccable을 효과적으로 활용하려면:
1. 컴포넌트별 audit 분리
/audit header
/audit checkout-form
/audit data-table
한꺼번에 /audit을 돌리면 너무 많은 이슈가 나와서 처리가 어렵다. 컴포넌트 단위로 쪼개서 쓰면 Codex의 병렬 작업 흐름에 맞다.
2. normalize를 merge 전에 돌린다
여러 에이전트가 동시에 컴포넌트를 만들면 color token과 spacing이 제각각이 되기 쉽다. PR 머지 전에 /normalize를 한 번 돌려서 정렬하는 게 좋다.
3. .impeccable.md를 git에 포함
팀이 쓴다면 .impeccable.md를 .gitignore에 넣지 말고 커밋해야 한다. 그래야 팀 전체 에이전트가 같은 디자인 컨텍스트를 공유한다.
다른 도구와의 비교
Impeccable 말고도 AI 슬롭을 잡으려는 시도들이 있다.
| 도구 | 방식 | Impeccable과 차이 |
|---|---|---|
| Anthropic frontend-design (공식) | CLAUDE.md에 디자인 가이드라인 주입 | Impeccable이 이것의 확장판. 더 깊음 |
| UI/UX Pro Max | 시스템 프롬프트 레이어 | 특정 에이전트에 종속, 이식성 낮음 |
| Figma MCP | Figma 디자인을 AI에 참조 | 디자인 파일이 있을 때 강력. 없으면 무의미 |
| Specs (Figma 플러그인) | Claude Code·Codex용 Figma 스펙 생성 | Impeccable과 함께 쓰면 더 강력 |
Impeccable은 “Figma 파일 없이도, 디자이너 없이도 쓸 수 있는 디자인 품질 가드”라는 포지션이다.
Figma MCP가 있다면 Figma로 디자인 파일을 참조시키고, 코드로 구현한 뒤에 Impeccable로 AI 슬롭을 잡는 방식이 가장 이상적이다.
실제로 얼마나 써볼 만한가
솔직하게 말하면, Impeccable을 쓴다고 AI가 갑자기 디자이너 수준의 UI를 만들어주지는 않는다.
하지만 “AI가 만들었다”는 냄새를 지우는 데는 효과적이다. 특히:
- 스타트업 MVP나 사이드 프로젝트처럼 디자이너 없이 빠르게 만들어야 할 때
- “이건 AI가 만든 것 같다”는 피드백을 반복적으로 받을 때
- 접근성 이슈를 체계적으로 잡고 싶을 때 (WCAG 기준 audit 기능)
반면, 기존에 Figma 디자인 파일이 있고 디자이너와 협업하는 구조라면 Figma MCP가 더 직접적인 해결책이다.
GitHub에서 별을 10,000개 받았다는 건 실제로 많은 사람이 쓰고 있다는 증거다. Apache 2.0 라이선스라 상업 프로젝트에서도 부담 없이 쓸 수 있다.
자주 묻는 질문 (FAQ)
Q. Impeccable이 Anthropic 공식 기능인가요?
아닙니다. Paul Bakaus가 만든 오픈소스 커뮤니티 프로젝트입니다. Anthropic의 공식 frontend-design 스킬을 기반으로 확장한 것이고, Anthropic과 직접적인 관계는 없습니다.
Q. Claude Code만 지원하나요?
아닙니다. Claude Code, Cursor, Codex CLI, Gemini CLI를 모두 지원합니다. npx skills add pbakaus/impeccable을 실행하면 현재 환경을 자동으로 감지해서 올바른 위치에 파일을 설치합니다.
Q. 기존 프로젝트에 중간에 추가해도 되나요?
됩니다. 기존 코드를 건드리지 않습니다. 설치 후 /teach-impeccable로 현재 프로젝트 컨텍스트를 학습시키고, /audit으로 현재 상태를 먼저 진단하는 게 좋습니다.
Q. /audit을 돌리면 엄청 많은 이슈가 나오는데 어디서부터 해야 하나요?
HIGH 심각도부터 처리하면 됩니다. 특히 접근성 관련 이슈(색 대비, 포커스 상태)는 HIGH로 나오는 경우가 많은데 이게 실제로 사용자에게 가장 큰 영향을 주는 부분입니다. MEDIUM은 normalize 단계에서 자동으로 처리되는 항목이 많습니다.
Q. 팀 프로젝트에서 .impeccable.md를 어떻게 관리하나요?
.impeccable.md를 git에 커밋하고 팀 전체가 공유하는 게 권장 방식입니다. 누가 /teach-impeccable을 실행해서 업데이트하면 다른 팀원들도 같은 컨텍스트를 씁니다. 개인 취향이 담기는 파일이 아니라 프로젝트 디자인 시스템 기준이 들어가는 파일입니다.
Q. Impeccable이 없던 시절에 만든 컴포넌트가 수백 개인데, 이걸 다 고쳐야 하나요?
일일이 고칠 필요는 없습니다. 새로 만드는 컴포넌트에 적용하면서 기존 컴포넌트는 수정이 발생할 때 /normalize를 함께 돌리는 방식이 현실적입니다. 전체 일괄 교정이 필요하다면 먼저 브랜치를 따서 작업하는 게 안전합니다.
Q. v1.5에서 추가된 .impeccable.md는 뭐가 다른가요?
기존에는 /teach-impeccable을 실행해도 매 세션마다 컨텍스트를 다시 로드해야 했습니다. v1.5부터는 .impeccable.md 파일에 프로젝트별 디자인 컨텍스트가 영구 저장돼서 에이전트가 자동으로 참조합니다. 팀 공유도 이 파일을 git에 올리면 됩니다.
공식 출처
- Impeccable 공식 사이트 — 설치 및 공식 문서
- GitHub: pbakaus/impeccable — 소스코드 및 릴리즈 노트
- Impeccable v1.5 릴리즈 노트 — /typeset, /arrange, /overdrive 및 .impeccable.md 추가 (2026-03-16)
- Anthropic 공식 Skills 문서 — Claude Code 스킬 시스템 설명