Impeccable: AI가 만든 UI가 다 비슷해 보이는 문제 해결하기

“AI가 만든 UI가 다 비슷하게 생겼어. Inter 폰트, 카드 중첩, 회색 텍스트…”

이것은 AI로 UI를 만드는 모든 개발자가 겪는 문제다. LLM은 코드를 잘 짜지만, 디자인 감각은 부족하다. 그래서 모든 AI 생성 UI가 비슷하게 보인다. 이것을 AI Slop이라고 부른다.

Impeccable은 이 문제를 해결한다.

Impeccable: AI 하네스의 디자인 감독관

Impeccable은 Claude Code, Codex 등의 프론트엔드 품질 향상을 위한 디자인 어휘와 명령어 체계다.

Anthropic의 frontend-design 스킬 기반 확장판
타이포그래피/색상/레이아웃/모션에 대한 큐레이션된 패턴 & 안티패턴
7개 디자인 도메인 레퍼런스 포함

7개 디자인 도메인

도메인	설명
타이포그래피	폰트, 텍스트 스타일
컬러	색상 팔레트, 대비
공간	여백, 간격, 리듬
모션	애니메이션, 트랜지션
인터랙션	사용자 반응, 피드백
반응형	화면 크기 대응
UX 라이팅	사용자 경험 텍스트

워크플로우: 점검 → 정렬 → 정제

1단계: 점검

/audit

현재 디자인을 7개 도메인에서 점검. 문제점 식별.

2단계: 정렬

/normalize

디자인 시스템에 맞게 정렬. 일관성 확보.

3단계: 정제

/polish

마지막 다듬기. 세부 조정.

주요 명령어

디자인 워크플로우

명령어	기능
`/audit`	디자인 점검
`/normalize`	정렬
`/polish`	정제
`/typeset`	타이포그래피 조정

UX & 모션

명령어	기능
`/critique`	UX 리뷰
`/distill`	단순화
`/animate`	모션 추가

특정 영역 지정

/audit checkout    # 체크아웃 페이지만 감사
/polish header     # 헤더만 정제

안티패턴 차단: AI Slop 방지

Impeccable은 흔한 LLM 디자인 오류를 자동으로 차단한다:

안티패턴	문제	해결
Inter 폰트 남용	모든 AI UI가 Inter 사용	대안 폰트 제안
카드 중첩 과다	깊이가 깊은 카드 중첩	평면적 레이아웃 권장
회색 텍스트 남용	가독성 저하	대비 향상
과도한 섀도우	인위적 느낌	미묘한 깊이 표현
동그란 버튼 남용	클릭 영역 혼란	명확한 인터랙션 영역

설치

npx skills add pbakaus/impeccable

지원 플랫폼

Claude Code
Codex CLI
Cursor
기타 주요 AI 하네스

실제 사용 예시

시나리오 1: 랜딩 페이지 디자인 감사

# AI가 랜딩 페이지 코드 생성 후
/audit

# 결과: "Inter 폰트 사용 감지. 대안 제안: Plus Jakarta Sans, Space Grotesk"
# "카드 중첩 3단계. 2단계로 줄이기 권장"
# "회색 텍스트(#888) 대비 부족. #666 이상 권장"

시나리오 2: 헤더 디자인 정제

/polish header

# 결과: 자간 조정, 행간 최적화, 여백 균형 맞춤

시나리오 3: 모션 추가

/animate

# 결과: 버튼 hover, 카드 등장, 트랜지션 효과 추가

다른 디자인 도구와의 차이

도구	방식	장점	단점
Impeccable	AI 스킬	실시간 감사, 안티패턴 차단	프론트엔드 한정
Figma	수동 디자인	완전한 제어	AI 통합 없음
Tailwind UI	컴포넌트 라이브러리	일관성	커스터마이징 제한
v0	AI UI 생성	빠름	AI Slop 문제

의미

1. AI 생성 UI의 품질 향상

더 이상 AI가 만든 UI가 “AI스러워” 보이지 않는다. 디자인 감독관이 실시간으로 감사.

2. 디자인 시스템 준수

일관된 디자인 어휘로 프로젝트 전체의 통일성 확보.

3. 디자인 지식 없이도

디자인 전문가가 아니어도, Impeccable이 가이드. “이게 왜 문제야?” → “대비가 부족해서 가독성이 떨어져요.”

마치며: AI 디자인의 품질 관리

AI가 코드를 잘 짜는 건 좋다. 하지만 디자인 감각은 별개다. Impeccable은 그 간극을 메운다.

npx skills add pbakaus/impeccable
/audit

이제 AI가 만든 UI도 “AI스럽지 않게” 보인다.

🔗 관련 정보

GitHub: pbakaus/impeccable
Demo: impeccable.style
라이선스: Apache 2.0