Impeccable: AI 코딩 도구의 디자인 편향을 교정하는 오픈소스 스킬

AI 코딩 도구(Claude Code, Cursor, Gemini CLI)로 프론트엔드를 만들면 예측 가능한 결과물이 나옵니다. Inter 폰트, 보라색 그라데이션, 카드 중첩, 회색 텍스트. 이 글에서는 이 문제를 해결하는 Impeccable 스킬의 설치부터 실전 활용까지 다룹니다.

왜 모든 AI 생성 UI가 비슷하게 보이는가

모든 LLM은 동일한 제네릭 템플릿(Tailwind UI, shadcn/ui, 다양한 보일러플레이트)에서 학습합니다. 그 결과 AI는 매번 같은 디자인 패턴을 반복합니다.

AI의 반복 패턴:
  - 폰트: Inter, Roboto, Arial (항상 같은 선택)
  - 색상: 보라색 그라데이션, 순수 회색 텍스트
  - 레이아웃: 모든 것을 카드로 감싸기, 카드 중첩
  - 모션: bounce/elastic 이징 (구식)
  - 장식: 헤딩 위 큰 둥근 아이콘 (템플릿 느낌)

Impeccable은 1개 스킬, 20개 커맨드, 큐레이션된 안티패턴으로 AI의 디자인 편향을 교정하는 오픈소스 도구입니다.

Impeccable의 핵심 아키텍처

Impeccable은 jQuery UI의 원 제작자 Paul Bakaus가 만든 오픈소스 프로젝트입니다. Anthropic의 공식 frontend-design 스킬을 기반으로 더 깊은 전문성을 추가했습니다.

7개 디자인 도메인 레퍼런스

도메인	핵심 내용	AI 편향 교정
Typography	폰트 페어링, 모듈러 스케일, OpenType	Inter 과의존 방지
Color & Contrast	OKLCH, tinted neutrals, 접근성	순수 블랙/그레이 금지
Spatial Design	스페이싱 시스템, 시각적 위계	카드 남용 방지
Motion Design	이징 커브, reduced motion	bounce 이징 금지
Interaction	폼, 포커스 상태, 로딩 패턴	세부사항 누락 방지
Responsive	모바일 퍼스트, 컨테이너 쿼리	단순 미디어쿼리 탈피
UX Writing	버튼 레이블, 에러 메시지, 빈 상태	제네릭 텍스트 방지

안티패턴 시스템

AI가 하지 말아야 할 것을 명시적으로 정의하는 것이 Impeccable의 핵심 차별점입니다.

금지 패턴:
  - 과다사용 폰트: Inter, Roboto, Arial, Open Sans
  - 컬러 배경에 회색 텍스트
  - 순수 블랙(#000) 또는 순수 그레이 (항상 tint 적용 필수)
  - 모든 콘텐츠를 카드로 감싸기 / 카드 중첩
  - bounce/elastic 이징 (구식 느낌)
  - 모든 헤딩 위 큰 둥근 아이콘 (템플릿 느낌)

20개 슬래시 커맨드 상세

진단 커맨드

/audit components/dashboard    # 5차원 점수 + P0-P3 심각도 등급
/critique pages/landing        # Nielsen 10 휴리스틱 점수화

v1.6 기준 /audit은 접근성, 성능, 반응형, 안티패턴, 코드 품질 5개 차원으로 점수를 매기고 P0(Critical)부터 P3(Nice-to-have)까지 심각도를 분류합니다.

품질 커맨드

/polish app              # 출시 전 마지막 패스
/harden forms/signup     # 에러 핸들링, i18n, 엣지 케이스
/optimize components/    # 성능 개선
/normalize components/   # 디자인 시스템 토큰 정렬

향상 커맨드

/typeset pages/blog           # 타입 스케일, 줄 간격, 폰트 최적화
/arrange pages/dashboard      # 스페이싱, 정렬, 그리드 개선
/colorize components/cards    # 전략적 색상 추가
/onboard pages/welcome        # 온보딩 플로우 디자인
/delight components/           # 즐거운 마이크로인터랙션 추가

강도 + 시스템 커맨드

/bolder pages/landing          # 밋밋한 디자인 강화
/quieter components/alerts     # 과한 디자인 톤다운
/teach-impeccable              # 원타임 프로젝트 설정
/animate components/hero       # 목적 있는 모션 추가
/extract components/shared     # 재사용 컴포넌트 추출

설치 방법

범용 설치 (9개 도구 자동 감지)

npx skills add pbakaus/impeccable

Claude Code 전용

/plugin marketplace add pbakaus/impeccable

지원 도구: Claude Code, Cursor, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Trae, OpenCode, Pi

Before/After 코드 비교

타이포그래피

/* Before (AI 기본) */
font-family: 'Inter', sans-serif;

/* After (Impeccable 적용) */
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;

색상: tinted neutrals

/* Before */
color: #666666;
background: #000000;

/* After */
color: oklch(0.55 0.02 250); /* blue tint 적용 */
background: oklch(0.13 0.01 250); /* tinted dark */

레이아웃

<!-- Before: 카드 중첩 -->
<div class="card"><div class="card"><div class="card">Content</div></div></div>

<!-- After: 공간으로 위계 표현 -->
<section class="content-area"><div class="content-group">Content</div></section>

실전 워크플로우

# 새 프로젝트 설정
/teach-impeccable

# UI 생성 후 개선
/audit app           # 전체 진단
/normalize app       # 시스템 정렬
/typeset app         # 타이포그래피 최적화
/polish app          # 최종 마무리

커맨드 체이닝도 지원됩니다:

/audit /normalize /polish blog   # 한 줄에 3개 순차 실행

FAQ

Impeccable은 무료인가요?

Apache 2.0 라이선스로 배포되는 오픈소스 프로젝트입니다. GitHub Stars 8,000개 이상.

기존 프로젝트에 영향을 주나요?

기존 코드를 변경하지 않습니다. AI가 새로운 코드를 생성할 때 더 나은 디자인 결정을 하도록 가이드합니다.

어떤 AI 코딩 도구와 호환되나요?

9개 도구를 지원합니다: Claude Code, Cursor, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Trae, OpenCode, Pi.

v1.6에서 뭐가 바뀌었나요?

Trae 프로바이더 추가, /critique에 Nielsen 10 휴리스틱 점수화, /audit에 5차원 점수 + P0-P3 심각도 등급이 추가되었습니다.

마무리

AI 코딩 도구의 디자인 품질은 도구의 한계가 아니라, AI에게 전달하는 디자인 지식의 깊이에 달려 있습니다. Impeccable은 이 지식 격차를 메우는 실용적인 해결책입니다.

Impeccable: AI 코딩 도구의 디자인 편향을 교정하는 오픈소스 스킬 완전 가이드