임페커블(Impeccable)
임페커블(Impeccable)은 Paul Bakaus가 구축한 오픈 소스 클로드 코드(Claude Code) 스킬로, AI가 생성한 프런트엔드 출력에서 발생하는 "AI 슬롭(AI slop)" 문제를 해결합니다. 20가지 조종 명령(/audit, /polish, /critique 등), 7가지 도메인별 디자인 참조 파일, 그리고 모델이 무엇을 생성하지 말아야 할지 정확히 알려주는 선별된 안티패턴이 함께 제공됩니다. 그 결과, 자동 생성된 것이 아니라 디자인된 것처럼 보이는 UI를 얻을 수 있습니다.
모든 AI 생성 프런트엔드가 똑같이 보이는 이유
어떤 AI 코딩 어시스턴트에게든 대시보드, 랜딩 페이지 또는 설정 패널을 만들어 달라고 요청해 보세요. 전적으로 맡겨보세요. 무엇을 얻게 될까요?
Inter 폰트. 보라색-파란색 그라데이션. 카드 안에 중첩된 카드. 색깔 있는 배경 위의 회색 텍스트. 큰 숫자, 작은 라벨, 빛나는 악센트가 있는 히어로 섹션. 어쩌면 "깊이"를 위한 글래스모피즘(glassmorphism)도 있을 수 있습니다.
동일한 일반 템플릿으로 훈련된 모든 대규모 언어 모델이 동일한 일반 출력을 생성하기 때문에 이러한 모습을 수없이 보셨을 것입니다. 이것이 바로 AI 생성 프런트엔드의 함정입니다. 기술적으로는 기능적이지만, 시각적으로는 기억에 남지 않습니다.
임페커블은 이러한 순환을 깨기 위해 특별히 제작되었습니다. Anthropic의 공식 frontend-design 스킬이 토대를 마련했다면, 임페커블은 더 깊은 전문 지식, 더 넓은 도메인 범위, 그리고 AI를 가중치에 각인된 예측 가능한 패턴에서 벗어나게 하는 강력한 제약 조건을 통해 이를 발전시킵니다.
임페커블(Impeccable)은 정확히 무엇인가요?
임페커블은 Claude Code가 프런트엔드 작업을 수행하는 방식을 향상시키는 설치 가능한 지침, 참조 파일 및 슬래시 명령 세트인 클로드 코드(Claude Code) 스킬입니다.
본질적으로 이 스킬은 세 가지 구성 요소로 구성됩니다.
임페커블의 확장된 프런트엔드 디자인 스킬
임페커블 내의 frontend-design 스킬은 7가지 도메인별 참조 파일로 분할된 포괄적인 디자인 가이드입니다.
각 참조 파일은 기술적으로 정확합니다. 예를 들어, 타이포그래피 가이드는 "좋은 폰트를 사용하라"는 것을 넘어 수직 리듬이 어떻게 작동하는지, FOUT(Flash of Unstyled Text)가 왜 발생하는지, size-adjust 오버라이드를 통해 이를 방지하는 방법, 그리고 clamp()를 사용한 유동형 타이프가 실제로 잘못된 선택인 경우 등을 설명합니다. 이러한 깊이는 임페커블을 일반적인 스타일 가이드와 차별화하는 요소입니다.
임페커블의 컨텍스트 수집 프로토콜
임페커블 디자인의 가장 저평가된 측면 중 하나는 /teach-impeccable 명령입니다. 어떤 디자인 작업이 시작되기 전에, 이 스킬은 대상 고객, 사용 사례 및 브랜드 개성 등 확인된 디자인 컨텍스트를 요구합니다. 이 컨텍스트는 프로젝트 루트의 .impeccable.md에 저장되며, 이후 세션에서 자동으로 로드됩니다.
이것은 큰 차이를 만드는 작은 요소입니다. AI 생성 프런트엔드 출력은 모델이 프로젝트 컨텍스트를 가지고 있지 않아 안전하고 평균적인 선택에 의존하기 때문에 부분적으로 일반적입니다. 임페커블은 이 컨텍스트를 먼저 확립하도록 강제합니다.
AI 생성 프런트엔드를 수정하는 20가지 명령
임페커블은 20가지 사용자 호출 가능 명령을 제공하며, 각 명령은 AI 생성 프런트엔드 작업의 특정 실패 모드를 다룹니다. 이 명령들은 Claude Code 내에서 슬래시 명령으로 호출합니다.
/audit → 접근성, 성능 및 반응형 품질 확인
/critique → UX 검토: 계층 구조, 명확성, 정서적 공명
/polish → 배포 전 최종 마무리 (정렬, 간격, 세부 사항)
/distill → 핵심만 추출—자리값을 하지 못하는 복잡성 제거
/normalize → 디자인 시스템 표준에 맞추기
/animate → 의도적인 움직임 추가 (장식적인 떨림이 아님)
/colorize → 단색 인터페이스에 전략적인 색상 도입
/bolder → 안전하고 지루한 디자인을 강조
/quieter → 지나치게 공격적인 디자인을 완화
/delight → 기억에 남을 즐거운 순간 추가
/typeset → 글꼴 선택, 계층 구조 및 크기 수정
/arrange → 레이아웃, 간격 및 시각적 리듬 수정
/harden → 오류 처리, i18n, 엣지 케이스
/optimize → 성능 개선
/extract → 재사용 가능한 구성 요소 및 디자인 토큰 추출
/adapt → 다양한 장치/컨텍스트에 맞게 조정
/onboard → 온보딩 흐름 및 비어 있는 상태 디자인
/clarify → 불명확한 UX 문구 개선
/overdrive → 기술적으로 야심 찬 효과 (셰이더, 스프링 물리, 스크롤 기반 노출)
/teach-impeccable → 한 번의 설정: 디자인 컨텍스트 수집 및 저장
대부분의 명령은 선택적 범위 인수를 허용합니다. /audit header는 탐색 모음에 대해서만 감사를 실행합니다. /polish checkout-form은 결제 흐름에 대한 마무리 작업을 집중합니다. 이러한 정밀한 타겟팅은 Claude가 이미 잘 작동하는 AI 생성 프런트엔드의 부분은 건드리지 않도록 집중하게 합니다.
진정한 힘은 명령을 연결하는 데서 나옵니다. 일반적인 워크플로우는 문제를 표면화하기 위해 /audit를 실행하고, 레이아웃 문제를 해결하기 위해 /arrange를 실행하고, 타이프 계층 구조를 정리하기 위해 /typeset을 실행한 다음, 배포 전 최종 단계로 /polish를 실행하여 각 단계가 이전 단계를 기반으로 구축되도록 할 수 있습니다.
안티패턴 라이브러리: AI에게 무엇을 하지 말아야 할지 가르치기
임페커블이 AI 생성 프런트엔드 문제에 기여하는 가장 독창적인 점은 명령이 아니라 안티패턴입니다.
이 스킬은 명시적인 "DO NOT" 제약 조건을 모델의 컨텍스트에 직접 적용합니다. 이것들은 모호한 스타일 선호도가 아닙니다. 이는 AI 생성 프런트엔드 출력에서 계속해서 나타나는 특정하고 반복적인 실패 패턴입니다.
타이포그래피 안티패턴:
- Inter, Roboto, Arial 또는 시스템 기본값을 사용하지 마십시오 (디자인을 눈에 띄지 않게 만듭니다).
- "개발자 분위기"를 위한 게으른 약어로 모노스페이스 폰트를 사용하지 마십시오.
- 모든 헤딩 위에 큰 둥근 아이콘을 배치하지 마십시오. 템플릿처럼 보입니다.
색상 안티패턴:
- 색상 배경에 회색 텍스트를 사용하지 마십시오. 흐려 보입니다. 대신 배경색보다 어두운 색조를 사용하십시오.
- "AI 팔레트"를 사용하지 마십시오: 어두운 배경에 시안색, 보라색-파란색 그라데이션, 네온 악센트.
- 순수한 검정색(
#000) 또는 순수한 흰색(#fff)을 사용하지 마십시오. 중립 색조를 약간 조정하십시오.
레이아웃 안티패턴:
- 모든 것을 카드에 싸지 마십시오. 모든 요소가 컨테이너를 필요로 하는 것은 아닙니다.
- 카드 안에 카드를 중첩하지 마십시오.
- 동일한 카드 그리드를 사용하지 마십시오 (아이콘 + 제목 + 텍스트를 계속 반복하는 것).
- 모든 것을 중앙에 맞추지 마십시오. 비대칭 레이아웃의 왼쪽 정렬 텍스트는 디자인된 것처럼 보입니다.
모션 안티패턴:
- 바운스 또는 탄성 이징(easing)을 사용하지 마십시오. 시대에 뒤떨어진 느낌을 줍니다. 실제 물체는 부드럽게 감속합니다.
width,height,padding과 같은 레이아웃 속성을 애니메이션하지 마십시오.transform과opacity만 사용하십시오.
이러한 규칙은 AI 생성 프런트엔드 코드를 한눈에 알아볼 수 있게 만드는 습관과 정확히 일치하도록 패턴 일치됩니다. 이러한 규칙을 명시적으로 명명함으로써 임페커블은 외부 지침 없이는 가질 수 없었던 교정 렌즈를 모델에 제공합니다.
내부 구조: 빌드 시스템, 단위 테스트 및 다중 도구 지원
임페커블은 단순히 프롬프트 파일이 아닙니다. 빌드 시스템, 단위 테스트 스위트 및 다중 공급자 지원을 갖춘 제대로 된 소프트웨어 프로젝트입니다.
빌드 시스템
스킬 소스 파일은 source/skills/에 있으며 풍부한 YAML 프런트매터(Agent Skills 사양을 따름)를 사용합니다. 단일 빌드 단계에서 Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro 및 Pi와 같은 공급자별 형식으로 컴파일됩니다.
bun run build # 모든 8가지 공급자 형식 컴파일
bun run rebuild # 처음부터 정리 및 재구축
각 공급자는 올바른 방언을 얻습니다. Claude Code 및 OpenCode는 args 및 allowed-tools를 포함한 전체 메타데이터를 얻습니다. Codex CLI는 $ARGNAME 자리 표시자가 있는 argument-hint 형식을 얻습니다. Gemini는 최소한의 프런트매터를 얻습니다. 빌드는 scripts/lib/transformers/의 모듈형 변환기 아키텍처를 통해 이 모든 것을 자동으로 처리합니다.
단위 테스트 스위트
임페커블은 tests/build.test.js에 Bun 기반 단위 테스트 스위트를 제공합니다. 테스트는 전체 빌드 파이프라인을 다룹니다.
- 오케스트레이션 테스트는 각 변환기 함수가 올바른 인수로 호출되는지 확인합니다.
- 통합 테스트는 임시 디렉토리에 실제 소스 파일을 생성하고 각 공급자에 대해 예상 출력 파일이 존재하는지 어설션합니다.
- 변환 정확성 테스트는 특정 변환을 확인합니다. Gemini 출력에
{{args}}가 포함되는지, Codex 출력에$TARGET이 포함되는지, Claude Code 출력에user-invokable: true가 포함되는지 등입니다. - 엣지 케이스 테스트는 빈 스킬 목록을 처리하고 파이프라인이 중단되지 않는지 확인합니다.
단위 테스트 스위트를 실행하는 단일 명령은 다음과 같습니다.
bun test
이러한 단위 테스트는 임페커블에 기여하는 것을 안전하게 만듭니다. 변환기를 수정하고 단위 테스트를 실행하면 변경 사항이 지원되는 8가지 도구 중 어느 하나의 출력에 영향을 미쳤는지 즉시 알 수 있습니다. 이것이 바로 유지 관리되는 오픈 소스 프로젝트와 버려진 프롬프트 컬렉션을 구분하는 종류의 엔지니어링 신뢰입니다.
임페커블 + Apidog: 디자인 품질과 API 품질의 결합
임페커블은 UI 계층에서 AI 생성 프런트엔드의 품질 문제를 해결합니다. Apidog는 API 계층에서 이를 해결합니다.
AI 지원으로 실제 제품을 구축할 때 두 계층 모두 중요합니다. 세련된 것처럼 보이는 AI 생성 프런트엔드라도, 호출하는 API가 제대로 문서화되지 않거나, 테스트되지 않거나, 신뢰할 수 없다면 사용자에게 실망을 안겨줄 것입니다. Apidog는 임페커블이 UI에 제공하는 것과 동일한 수준의 정밀도를 API에 제공합니다.
Apidog를 사용하면 다음을 수행할 수 있습니다.
- 단 한 줄의 백엔드 코드를 작성하기 전에 API를 시각적으로 디자인합니다.
- API 스키마에서 모의 서버를 자동으로 생성하여 AI가 생성한 프런트엔드가 개발 중에 렌더링할 현실적인 데이터를 가질 수 있도록 합니다.
- 각 엔드포인트에 대해 자동화된 API 테스트를 실행하여 프로덕션에 도달하기 전에 회귀를 잡아냅니다.
- 팀과 대화형 API 문서를 공유하여 프런트엔드 및 백엔드 개발자의 정렬을 유지합니다.
이 조합은 자연스럽습니다. 임페커블을 사용하여 AI 생성 프런트엔드가 시각적으로 독특하고 프로덕션 준비가 되었는지 확인하고, Apidog를 사용하여 해당 프런트엔드를 구동하는 API가 안정적이고 잘 문서화되었는지 확인합니다. 함께, 이들은 AI 보조 개발만으로는 해결하기 어려운 품질 격차를 해소합니다.
Apidog를 무료로 사용해 보세요. 다음 AI 생성 프런트엔드 프로젝트를 위한 모의 서버와 API 문서를 생성할 수 있습니다.
임페커블(Impeccable) 시작하기
가장 빠른 방법은 impeccable.style에서 바로 사용할 수 있는 번들을 다운로드하고, 도구를 선택한 다음 압축을 푸는 것입니다.
특히 Claude Code의 경우:
# 프로젝트 레벨 설치
cp -r dist/claude-code/.claude your-project/
# 또는 모든 프로젝트에 전역으로 설치
cp -r dist/claude-code/.claude/* ~/.claude/
그런 다음 /teach-impeccable을 한 번 실행하여 프로젝트의 디자인 컨텍스트를 저장하면 20가지 명령을 모두 사용할 준비가 됩니다.
FAQ
임페커블(Impeccable)은 Anthropic의 공식 프런트엔드 디자인 스킬과 무엇이 다른가요? 임페커블은 Anthropic의 스킬을 기반으로 7가지 도메인별 참조 파일, 20가지 조종 명령, 그리고 명시적인 안티패턴 라이브러리를 추가합니다. 공식 스킬이 시작점이라면, 임페커블은 그 위에 계층화된 포괄적인 디자인 시스템입니다.
임페커블은 Claude Code 외의 다른 도구에서도 작동하나요? 네. 임페커블은 Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro 및 Pi를 지원합니다. 빌드 시스템은 단일 소스 형식을 각 도구에 맞는 공급자별 방언으로 컴파일합니다.
/overdrive 명령은 무엇을 위한 것인가요? /overdrive는 WebGL 셰이더, 60fps 가상 테이블, 다이얼로그의 스프링 물리, 스크롤 기반 노출과 같이 기존의 한계를 넘어서는 기술적으로 야심 찬 효과를 위한 것입니다. 사용자에게 "어떻게 저렇게 만들었지?"라고 묻게 만드는 것을 원할 때 사용하세요.
임페커블은 단위 테스트를 어떻게 처리하나요? 이 프로젝트는 변환기 정확성 및 실제 소스 파일을 생성하고 출력을 검증하는 통합 테스트를 포함하여 전체 빌드 파이프라인을 다루는 Bun 기반 단위 테스트 스위트를 제공합니다. bun test를 실행하여 전체 단위 테스트 스위트를 실행할 수 있습니다.
임페커블이 API 기반 프런트엔드에 도움이 될 수 있나요? 임페커블은 UI 품질을 다룹니다. API 계층의 경우, 시각적 API 디자인, 자동화된 테스트 및 모의 서버 생성을 제공하는 Apidog와 함께 사용하면 됩니다. 이는 AI 생성 프런트엔드를 위한 신뢰할 수 있는 백엔드를 구축하는 데 필요한 모든 것을 제공합니다.
임페커블은 무료로 사용할 수 있나요? 네. 임페커블은 Apache 2.0 라이선스이며 오픈 소스입니다. 소스 코드는 GitHub에서, 컴파일된 번들은 impeccable.style에서 구할 수 있습니다.