AI가 만든 뻔한 디자인 잡아주는 프런트엔드 스킬 '임페커블' 깃허브서 주목받는다

임페커블(Impeccable)은 '1개 스킬, 23개 커맨드, 정제된 안티패턴'으로 빈틈없는 프런트엔드 디자인을 돕는 AI 디자인 스킬이다. impeccable.style에서 바로 쓸 수 있는 번들을 내려받을 수 있다.

앤스로픽의 frontend-design은 클로드용으로 처음 널리 쓰인 디자인 스킬이었고, 임페커블은 바로 거기서 출발했다.

문제의식은 분명하다. 여러 모델이 비슷한 SaaS 템플릿으로 학습된 탓에, 별다른 가이드 없이 맡기면 프로젝트마다 똑같은 흔적이 반복된다는 것이다. 모든 곳에 Inter 폰트, 보라에서 파랑으로 이어지는 그라데이션, 카드 안에 또 카드, 색 배경 위 회색 글자, 제목마다 얹힌 둥근 사각 아이콘 타일 같은 것들이다.

임페커블은 타이포그래피, 색과 대비, 공간, 모션, 인터랙션, 반응형, UX 라이팅을 다루는 7개 도메인 참조 파일을 모든 커맨드에서 불러온다. 여기에 브랜드와 제품을 구분하는 레지스터가 기본값을 상황에 맞게 조정한다.

핵심은 AI와 공유하는 디자인 어휘인 23개 커맨드다. polish, audit, critique, distill, animate, bolder, quieter 등이 있으며 모두 /impeccable을 통해 호출한다. 자주 쓰는 커맨드는 /impeccable pin 명령으로 단독 단축 명령으로 만들 수 있다.

검사 기능으로는 27개의 결정론적 안티패턴 규칙과 12개 규칙으로 이뤄진 LLM 비평 패스를 갖췄다. CLI와 브라우저 확장은 결정론적 규칙을 LLM이나 API 키 없이 실행한다. 스킬은 과용되는 폰트(Arial, Inter, 시스템 기본값), 색 배경 위 회색 글자, 순수 검정·회색 사용, 모든 요소를 카드로 감싸거나 카드를 중첩하는 것, 한물간 느낌의 바운스·탄성 이징을 피하라고 명시한다.

설치는 프로젝트 루트에서 npx impeccable skills install을 실행하면 된다. 사용 중인 하네스를 자동 감지해 알맞은 위치에 그에 맞게 컴파일된 빌드를 기록한다. 커서, 클로드 코드, 제미니 CLI, 코덱스 CLI를 비롯해 지원되는 모든 도구에서 작동하며, 클로드 코드 사용자는 /plugin marketplace add pbakaus/impeccable 명령으로 플러그인을 설치할 수도 있다.

AI 하네스 없이 안티패턴만 잡아내는 독립 CLI도 포함된다. npx impeccable detect로 디렉터리, HTML 파일, 또는 URL(퍼피티어 사용)을 검사한다. 이 디텍터는 측면 탭 테두리, 보라색 그라데이션, 바운스 이징, 어두운 글로우 같은 'AI 슬롭'과 함께 긴 줄 길이, 답답한 여백, 작은 터치 영역, 건너뛴 제목 등 일반 디자인 품질까지 24가지 문제를 잡아낸다.