Impeccable 완벽 가이드

CLAUDE CODE SKILL

Impeccable 완벽 가이드

설치부터 실전 사용까지, 복붙으로 바로 쓰는 치트시트

📌 목차

1. Impeccable이 뭔데?

2. 설치 (복붙용)

3. 초기 설정

4. 7가지 디자인 레퍼런스

5. 18개 커맨드 치트시트

6. 실전 복붙 예시

7. 안티패턴 (AI가 피할 것)

8. 추가 도구 (CLI / 크롬 확장)

9. 추천 워크플로우 (순서대로 따라하기)

1. Impeccable이 뭔데?

Anthropic이 만든 기본 frontend-design 스킬의 상위 호환이다.

AI가 UI를 짜면 매번 똑같은 디자인이 나온다 — Inter 폰트, 보라색 그라데이션, 카드 안에 카드, 회색 텍스트... 이런 걸 "AI 슬롭(AI Slop)"이라고 부른다.

Impeccable은 이걸 막기 위해 만들어진 도구다.

💡 한 줄 요약

AI에게 "디자인 언어"를 가르쳐서, 프로덕션급 고퀄리티 UI를 만들게 해주는 스킬 + 커맨드 모음

구분	frontend-design (기본)	Impeccable (업그레이드)
제작	Anthropic 공식	Paul Bakaus
레퍼런스	1개	7개 도메인별
커맨드	기본 가이드	18개 전문 커맨드
안티패턴	없음	25개 규칙
라이선스	Apache 2.0	Apache 2.0 (무료)

2. 설치 (복붙용)

✅ 방법 A — 자동 설치 (가장 추천)

$ npx skills add pbakaus/impeccable

사용 중인 AI 도구를 자동 감지해서 올바른 위치에 설치해준다.

✅ 방법 B — Claude Code 플러그인

/plugin marketplace add pbakaus/impeccable

Claude Code 안에서 /plugin 열어서 확인 가능.

✅ 방법 C — 수동 복사 (Claude Code)

# 프로젝트 단위
$ cp -r dist/claude-code/.claude your-project/

# 글로벌 (모든 프로젝트에 적용)
$ cp -r dist/claude-code/.claude/* ~/.claude/

✅ 방법 D — 다른 도구별 설치

# Cursor
$ cp -r dist/cursor/.cursor your-project/

# Gemini CLI
$ cp -r dist/gemini/.gemini your-project/

# Codex CLI
$ cp -r dist/codex/.codex/* ~/.codex/

# OpenCode
$ cp -r dist/opencode/.opencode your-project/

# Trae (국제판)
$ cp -r dist/trae/.trae/skills/* ~/.trae/skills/

⚠️ Cursor는 Settings → Beta에서 Nightly 채널 전환 + Rules에서 Agent Skills 활성화 필요
⚠️ Gemini CLI는 npm i -g @google/gemini-cli@preview 설치 + /settings에서 Skills 활성화 필요

3. 초기 설정 (설치 후 반드시!)

🚨 설치 후 가장 먼저 이것부터 실행!

/impeccable teach

이 커맨드가 하는 일:

→ 프로젝트의 브랜드 색상, 폰트, 스타일 가이드 등 디자인 컨텍스트를 수집
→ .impeccable.md 파일에 저장
→ 이후 모든 커맨드가 이 파일을 참조해서 프로젝트에 맞는 일관된 디자인을 유지

딱 1번만 실행하면 된다. 업데이트해도 이 파일은 덮어쓰지 않는다.

4. 7가지 디자인 레퍼런스

AI에게 로드되는 디자인 전문 지식 7개 영역이다.

영역	다루는 내용
🔤 Typography	타입 시스템, 폰트 페어링, 모듈러 스케일, OpenType
🎨 Color & Contrast	OKLCH 색상, 틴티드 뉴트럴, 다크모드, 접근성
📐 Spatial Design	스페이싱 시스템, 그리드, 시각적 위계
🎬 Motion Design	이징 커브, 스태거링, reduced-motion 대응
👆 Interaction Design	폼, 포커스 상태, 로딩 패턴
📱 Responsive Design	모바일 퍼스트, 유동형 디자인, 컨테이너 쿼리
✍️ UX Writing	버튼 레이블, 에러 메시지, 빈 상태 문구

5. 18개 커맨드 치트시트

🔧 워크플로우 (큰 흐름)

커맨드	설명
/impeccable teach	프로젝트 디자인 컨텍스트 수집 (최초 1회)
/impeccable craft	디자인 브리프 → 구현까지 전체 플로우
/impeccable extract	재사용 컴포넌트/토큰을 디자인 시스템으로 추출

🔍 분석·검토

커맨드	설명
/audit	기술 품질 검사 (접근성, 성능, 반응형) — 수정 안 함, 리포트만
/critique	UX 디자인 리뷰 (위계, 명확성, 감성적 공감, 닐슨 휴리스틱)
/polish	최종 패스 — 디자인 시스템 정렬 + 출시 준비

🚀 개선 커맨드

커맨드	설명
/distill	핵심만 남기고 단순화
/clarify	불명확한 UX 문구 개선
/optimize	퍼포먼스 개선
/harden	에러 처리, 온보딩, i18n, 엣지 케이스 보강
/animate	의미 있는 모션 추가
/colorize	전략적 컬러 도입
/bolder	밋밋한 디자인을 과감하게
/quieter	과한 디자인을 차분하게
/delight	즐거운 디테일 추가
/adapt	다양한 디바이스 대응
/typeset	폰트 선택, 위계, 사이즈 교정
/layout	레이아웃, 간격, 시각적 리듬 교정
/overdrive	기술적으로 화려한 효과 (베타)

6. 실전 복붙 예시

단일 커맨드

# 블로그 페이지 기술 감사
/audit blog

# 랜딩페이지 UX 리뷰
/critique landing page

# 대시보드 컴포넌트 점검
/audit dashboard

# 결제 폼 최종 다듬기
/polish checkout-form

# 대시보드 타이포그래피 교정
/typeset dashboard

# 디자인이 밋밋할 때
/bolder hero section

# 모션 추가하고 싶을 때
/animate card list

커맨드 조합 (체이닝)

# 감사 → 최종 정리까지 한번에
/audit /polish blog

# UX 리뷰 + 에러 처리 보강
/critique /harden checkout

# 타이포 + 레이아웃 동시 교정
/typeset /layout settings page

💡 Codex CLI는 문법이 다르다: /prompts:audit, /prompts:polish 형태로 사용

7. 안티패턴 (AI가 피할 것)

Impeccable이 명시적으로 차단하는 "AI 슬롭" 패턴들:

❌ 과용 폰트 금지

Arial, Inter, 시스템 기본폰트

❌ 회색 텍스트 금지

컬러 배경 위 회색 텍스트

❌ 순수 검정/회색 금지

반드시 틴티드(tinted) 처리

❌ 카드 남용 금지

모든 것을 카드로 감싸거나 카드 안에 카드 중첩

❌ Bounce 이징 금지

bounce/elastic 이징 (촌스러움)

❌ 보라 그라데이션 금지

보라색 그라데이션 남용

8. 추가 도구 (CLI / 크롬 확장)

CLI — 터미널에서 직접 검사

# 글로벌 설치
$ npm i -g impeccable

# 디렉토리 스캔
$ npx impeccable detect src/

# HTML 파일 스캔
$ npx impeccable detect index.html

# 라이브 URL 스캔
$ npx impeccable detect https://example.com

# 빠른 정규식 모드 + JSON 출력 (CI용)
$ npx impeccable detect --fast --json .

HTML, CSS, JSX/TSX, Vue, Svelte, CSS-in-JS를 지원한다. CI 파이프라인이나 pre-commit 훅에 넣으면 안티패턴을 자동으로 잡는다.

Chrome 확장 프로그램

Chrome 웹 스토어에서 "Impeccable" 검색해서 설치하면, 아무 웹페이지에서 클릭 한 번으로 안티패턴을 시각적으로 하이라이트 해준다. localhost, 스테이징, 프로덕션, 남의 사이트 전부 가능.

업데이트

$ npx impeccable skills update

9. 추천 워크플로우 (순서대로 따라하기)

 

1

설치

npx skills add pbakaus/impeccable

2

초기 설정 (1회)

/impeccable teach

3

디자인 브리프 + 구현

/impeccable craft

4

기술 감사

/audit 문제점 리포트 확인

5

디자인 리뷰

/critique UX 관점 피드백

6

필요한 개선 적용

/bolder /animate /typeset 등 상황에 맞게

7

최종 마무리 → 배포!

/polish 디자인 시스템 정렬 + 출시 준비

🔗 참고 링크

GitHub: https://github.com/pbakaus/impeccable

공식 사이트: https://impeccable.style/

원본 영상: 스테판초 — Impeccable 알아보기

Anthropic 기본 스킬: frontend-design SKILL.md