모든 LLM은 동일한 제네릭 템플릿을 학습했다. 아무 지침 없이 UI를 만들면 똑같은 결과가 나온다: Inter 폰트, 보라색 그라디언트, 카드 안에 카드, 컬러 배경 위의 회색 텍스트. Impeccable은 이 편향을 깨기 위해 만들어진 프론트엔드 디자인 스킬이다.
Anthropic의 공식 frontend-design 스킬 위에 7개 전문 참조 파일과 23개 명령어를 더해, AI 코딩 에이전트가 일관되고 세련된 디자인 결정을 내릴 수 있도록 상세한 어휘와 규칙을 제공한다. impeccable.style에서 전후 비교 사례를 확인할 수 있다.
7개 도메인 참조 파일
| 참조 파일 | 다루는 내용 |
|---|---|
| typography | 타입 시스템, 폰트 페어링, 모듈형 스케일, OpenType |
| color-and-contrast | OKLCH, 틴티드 뉴트럴, 다크 모드, 접근성 |
| spatial-design | 간격 시스템, 그리드, 시각적 계층 구조 |
| motion-design | 이징 곡선, 스태거링, 모션 감소 처리 |
| interaction-design | 폼, 포커스 상태, 로딩 패턴 |
| responsive-design | 모바일 퍼스트, 유동적 디자인, 컨테이너 쿼리 |
| ux-writing | 버튼 레이블, 오류 메시지, 빈 상태 텍스트 |
23개 명령어 (모두 /impeccable <명령>)
| 명령 | 용도 |
|---|---|
craft | 전체 형태 설계 후 빌드 플로 |
teach | 초기 설정: PRODUCT.md·DESIGN.md 작성 |
document | 기존 코드에서 DESIGN.md 생성 |
extract | 재사용 컴포넌트와 토큰 추출 |
shape | 코드 전 UX/UI 계획 |
critique | UX 리뷰: 계층·명확성·감성 |
audit | 접근성·퍼포먼스·반응형 기술 검사 |
polish | 출시 전 최종 패스 |
bolder | 단조로운 디자인 강조 |
quieter | 과도한 디자인 억제 |
distill | 핵심만 남기기 |
harden | 에러 핸들링·엣지 케이스 추가 |
onboard | 첫 실행 플로·빈 상태·활성화 경로 |
animate | 의도적 모션 추가 |
colorize | 전략적 색상 도입 |
typeset | 폰트·계층·크기 수정 |
layout | 레이아웃·간격·비주얼 리듬 수정 |
delight | 작은 기쁨 요소 추가 |
overdrive | 기술적으로 탁월한 이펙트 추가 |
clarify | UX 카피 개선 |
adapt | 디바이스별 최적화 |
optimize | 퍼포먼스 개선 |
live | 브라우저 내 비주얼 반복 모드 |
/impeccable pin <명령>으로 단독 단축키 생성 가능 (예: pin audit → /audit).
피해야 할 안티패턴
명시적으로 금지된 패턴 목록:
- Arial, Inter, 시스템 기본 폰트 남용
- 컬러 배경 위의 회색 텍스트
- 순수 검정·회색 (항상 틴트 적용)
- 카드 안에 카드 중첩
- 바운스·엘라스틱 이징 (구식 느낌)
설치
공식 웹사이트 impeccable.style에서 프로젝트에 맞는 ZIP 다운로드:
# Cursor
cp -r dist/cursor/.cursor your-project/
# Claude Code / Codex: 저장소에서 직접 복사사용 대상 및 케이스
- AI 코딩 에이전트 사용자: Vibe Coding 결과물이 매번 비슷하게 나오는 문제를 해결하려는 개발자
- 프론트엔드 개발자: AI 어시스턴트가 팀의 디자인 기준을 따르게 만들고 싶은 경우
- 디자이너: DESIGN.md·PRODUCT.md로 AI에게 프로젝트 디자인 언어를 학습시키려는 경우
관련 문서
- design-md — DESIGN.md 오픈 표준 (Google Stitch)
- agent-skills — 에이전트 스킬 생태계 개요
- claude-code — Impeccable의 주요 실행 환경
참고 자료
- pbakaus/impeccable — GitHub 공식 저장소