Impeccable — AI 코딩 도구에 디자인 지침과 검사 기능을 더하는 도구

AI 요약

Impeccable은 AI 코딩 에이전트가 비슷한 SaaS 템플릿을 반복해서 만드는 문제를 줄이려는 디자인 도구입니다. Claude용 디자인 스킬인 Anthropic의 frontend-design에서 출발했으며, 특정 폰트나 보라색 그라데이션, 카드 안에 카드를 넣는 구성처럼 흔한 결과를 피하도록 지침과 검사 기능을 제공합니다.

프로젝트 맥락과 디자인 지침

설치한 뒤 /impeccable init을 실행하면 프로젝트를 살피고, 제품의 목적과 사용자, 운영 환경, 제약, 문체, 근거 등 빠진 정보를 질문합니다. 답변은 프로젝트 루트의 PRODUCT.md에 기록합니다. 제품에 관한 지속적인 정보와 화면별 시각 방향은 구분합니다. 기존 디자인 시스템은 DESIGN.md나 별도 설정에 담으며, 방문자 모드와 시각 방향은 각 화면 작업에서 정합니다.

24개 명령과 작업 흐름

명령은 /impeccable 하나를 통해 사용합니다. /impeccable craft는 디자인 구상부터 구현, 시각적 반복 작업까지 이어지는 흐름을 제공합니다. /impeccable shape는 코드를 쓰기 전 UX/UI를 계획하고, /impeccable critique는 시각적 위계와 명확성, 정서적 인상을 검토합니다. /impeccable audit는 접근성, 성능, 반응형 동작을 살피며 /impeccable polish는 출시 전 마무리를 돕습니다. /impeccable harden은 오류 처리와 국제화, 텍스트 넘침, 예외 상황을 점검합니다. 자주 쓰는 명령은 /impeccable pin audit처럼 별도 단축 명령으로 등록할 수 있습니다.

자동 검사와 CLI

검사 엔진에는 AI 생성 디자인의 흔한 패턴과 일반적인 디자인 품질 문제를 찾는 결정론적 규칙 61개가 들어 있습니다. 과도하게 자주 쓰이는 폰트와 보라색 그라데이션, 바운스 easing뿐 아니라 좁은 여백, 작은 터치 영역, 건너뛴 제목 단계도 탐지합니다. 결정론적 검사는 LLM이나 API 키 없이 CLI와 브라우저 확장 프로그램에서 실행됩니다. 별도로 LLM을 활용하는 비평 검사도 제공합니다.

npx impeccable detect src/로 디렉터리를 검사하거나, npx impeccable detect https://example.com으로 브라우저에 표시된 페이지를 확인할 수 있습니다. --json 옵션은 CI에서 처리할 결과를 표준 출력으로 내보냅니다. 검사 완료 후 주요 발견 사항이 없으면 종료 코드 0, 발견 사항이 있으면 2를 반환하며, 대상을 검사하지 못하면 1을 반환합니다. 깨끗한 검사 결과가 시각적 완성도나 접근성을 보장하지는 않으므로 실제 화면을 살펴야 합니다.

설치와 훅 동작

기본 설치는 프로젝트 루트에서 npx impeccable install을 실행하는 방식입니다. Claude Code, Cursor, Codex CLI, GitHub Copilot, Grok Build 등을 지원하며 프로젝트 단위 또는 사용자 전역으로 설치할 수 있습니다. 스킬은 자체 실행 파일과 엔진 바이너리를 사용하므로 훅이나 스킬 실행에 Node.js가 필요하지 않습니다. Node.js는 npx 설치 경로에서만 사용합니다.

지원 도구에서는 UI 파일 편집 뒤 검사하는 훅도 설치할 수 있습니다. 도구마다 동작 방식은 다릅니다. 예를 들어 Cursor는 잘못된 변경이 반영되기 전에 막고, Claude Code와 Codex는 편집 뒤 결과를 표시합니다. Codex는 설치 후 /hooks에서 프로젝트 훅을 승인해야 하며, Grok Build도 프로젝트 신뢰 설정이 필요합니다. 훅은 사용자의 권한으로 엔진을 실행하므로 자동화 작업에 쓰기 전 설치된 훅과 검증 스크립트를 확인해야 합니다.

라이브 모드는 로컬 개발 서버나 정적 HTML에서 화면 변형을 시험하고 수정 사항을 적용합니다. 배포된 사이트에 로컬 HTTP 도구를 주입하는 방식은 지원하지 않습니다. 배포 페이지 검사는 detect 명령이나 브라우저 확장 프로그램을 사용합니다.

원문: GitHub / 번역·요약: Trawling