TL;DR

Impeccable은 AI 코딩 에이전트 워크플로에 직접 통합되는 디자인 스킬로, 프로젝트 컨텍스트를 생성하고 에이전트 명령으로 디자인 리뷰·수정 작업을 수행한다. 설치 시 PRODUCT.md와 DESIGN.md를 만들어 모든 명령이 동일한 디자인 컨텍스트를 공유하게 하고, 23개의 상호작용 명령으로 기획·검토·수정·최적화 과정을 커버한다. 디자인 안티패턴을 잡는 44개의 결정론적 검사 규칙을 포함해 LLM 호출이나 API 키 없이도 로컬·CI 환경에서 문제를 탐지할 수 있다. 또한 에이전트별 훅 매니페스트를 설치해 편집 이벤트에서 자동 검사 또는 차단을 트리거하고, 브라우저 라이브 모드로 요소별 시각적 반복을 지원한다. 결과적으로 에이전트가 생성하는 프론트엔드의 스타일 편차와 안티패턴을 사전 차단해 일관성을 높이지만, 기능 대부분이 특정 에이전트 호환성(예: Cursor Nightly 설정, Codex의 훅 승인)에 의존하므로 해당 툴 환경 설정이 사전 충족되어야 한다.

주요 기능

• 프로젝트 초기화해 PRODUCT.md와 DESIGN.md로 디자인 컨텍스트 생성
• 파일·디렉터리·URL을 스캔해 결정론적 규칙으로 디자인 안티패턴 탐지
• 에이전트 명령(`/impeccable <command>`)으로 디자인 리뷰·수정 명령 실행
• 브라우저 라이브 모드로 요소별 시각적 반복 수행
• 호스트 툴용 훅 매니페스트를 설치해 편집 시 자동 검사 연동

어떻게 동작하는가

레포는 `/impeccable` 스킬을 에이전트(Claude Code, Cursor, Codex 등)에 설치해 명령어 기반 워크플로를 제공한다. 결정론적 검사기는 파일 또는 Puppeteer 기반 페이지 스냅샷을 룰셋으로 스캔해 LLM 호출 없이도 문제를 리포트하고, 툴별 훅 매니페스트가 편집 이벤트에서 자동으로 검사 스크립트를 실행한다.

해결 문제

AI 코딩 에이전트가 생성하거나 제안하는 프론트엔드에서 반복적으로 발생하는 디자인 안티패턴을 자동으로 탐지·교정 가능한 워크플로로 표준화한다. 또한 에이전트 통합 환경에서 일관된 디자인 컨텍스트를 유지해 반복적 스타일 편차를 줄인다.

지금 주목받는 이유

다수의 에이전트·툴(Cursor, Claude Code, GitHub Copilot 등)과 바로 통합되는 스킬 형태·훅 지원으로 개발자 워크플로에 즉시 연결되는 점 때문에 주목받고 있다.

차별점

• 원-셋업 워크플로로 PRODUCT.md/DESIGN.md를 만들어 이후 명령들이 동일한 디자인 컨텍스트를 공유함
• 23개의 상호작용 명령과 브라우저 라이브 모드를 통해 시각적 반복을 에이전트 내에서 직접 수행함
• 44개의 결정론적 규칙으로 LLM이나 API 키 없이도 로컬·CI 환경에서 디자인 문제를 검출할 수 있음

사용 사례

• 에이전트가 생성한 프론트엔드 변경을 커밋 전 훅으로 자동 검사해 디자인 안티패턴을 사전 차단
• 신규 프로젝트 초기화 시 DESIGN.md/PRODUCT.md로 브랜드·타입스케일·컬러 가이드를 생성해 일관된 컴포넌트 생성 유도
• CI 파이프라인에서 `npx impeccable detect --json`으로 디자인 린트 보고서를 수집해 자동 리포트
• 디자이너-엔지니어 협업 시 브라우저 라이브 모드로 시각적 변형을 빠르게 비교·확정

시작하기

프로젝트 루트에서 설치 후 에이전트 내에서 초기화를 실행한다: `npx impeccable install` 그리고 에이전트 셸에서 `/impeccable init`을 실행해 PRODUCT.md와 DESIGN.md를 생성한다.

요구사항

• Node.js 환경에서 npx 사용 가능
• 에이전트 통합을 위해 Cursor(선택적으로 Nightly + Agent Skills 활성화), Claude Code, Codex, Gemini CLI 등 호환 툴 접근 권한
• URL 검사를 위해 Puppeteer(내부적으로 사용되는 경우)가 필요할 수 있음

벤치마크