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


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

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

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

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

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

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

## Impeccable의 핵심 아키텍처

[Impeccable](https://github.com/pbakaus/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의 핵심 차별점입니다.

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

## 20개 슬래시 커맨드 상세

### 진단 커맨드

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

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

### 품질 커맨드

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

### 향상 커맨드

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

### 강도 + 시스템 커맨드

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

## 설치 방법

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

```bash
npx skills add pbakaus/impeccable
```

### Claude Code 전용

```bash
/plugin marketplace add pbakaus/impeccable
```

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

## Before/After 코드 비교

### 타이포그래피

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

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

### 색상: tinted neutrals

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

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

### 레이아웃

```html
<!-- 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>
```

## 실전 워크플로우

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

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

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

```bash
/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 GitHub 리포지토리](https://github.com/pbakaus/impeccable)
- [Impeccable 공식 사이트](https://impeccable.style)
- [Apidog: Impeccable Claude Code Skill 리뷰](https://apidog.com/blog/impeccable-claude-code-skill/)
- [Abduzeedo: Impeccable Open Source AI Design Skill](https://abduzeedo.com/impeccable-open-source-ai-design-skill-better-ui)
- [DeepWiki: Impeccable 분석](https://deepwiki.com/pbakaus/impeccable)