Impeccable

23개 커맨드로 AI가 만든 프론트엔드의 'AI 티'를 잡아내는 크로스 프로바이더 디자인 스킬

npx impeccable install

AI 코딩 에이전트(Claude Code, Cursor, Codex, Gemini CLI 등)가 만드는 프론트엔드에서 반복되는 '티' — Inter 폰트, 보라-파랑 그라디언트, 카드 속의 카드, 색 배경 위 회색 텍스트 — 를 잡아내고 고치는 디자인 스티어링 스킬입니다. 23개 슬래시 커맨드와 46개의 LLM 없는 결정론적 안티패턴 룰을 함께 제공합니다.

판단

이럴 때 씁니다

  • AI 코딩 에이전트가 만든 프론트엔드가 전형적인 'AI 티'(Inter 폰트, 보라-파랑 그라디언트, 카드 속 카드)로 보일 때
  • Claude Code·Cursor·Codex 등 여러 하니스를 오가는 팀이 공유할 디자인 어휘/기준선이 필요할 때
  • 배포 전 접근성·성능·반응형을 LLM 호출 없이 결정론적 룰로 빠르게 스캔하고 싶을 때(CI 연동 포함)
  • 기존 코드베이스에 흩어진 디자인 토큰·컴포넌트를 추출해 DESIGN.md 기반 시스템으로 정리하고 싶을 때

이럴 땐 쓰지 마세요

  • 백엔드 전용 또는 UI가 없는 작업 — 스킬 자체 설명(SKILL.src.md)이 'Not for backend-only or non-UI tasks'라고 명시
  • Node 22.12 미만 환경이거나 Cursor Nightly/Gemini CLI preview 같은 비표준 채널 전환을 팀 정책상 피해야 하는 경우
  • 이미 확립된 Figma 소스·디자인 시스템이 있어 코드 감사보다 비주얼 프로토타이핑 도구가 필요한 경우(open-pencil류가 더 적합)
  • 23개 커맨드 + 라이브 모드까지 학습할 여유가 없는 1회성 소규모 스크립트/프로토타입 작업

차별점

  • 23개 스티어링 커맨드(craft, init, shape, critique, audit, polish, bolder, quieter, distill, harden, onboard, animate, colorize, typeset, layout, delight, overdrive, clarify, adapt, optimize, live, document, extract) — README와 skill/scripts/command-metadata.json에서 직접 확인, 디자인 브리프부터 프로덕션 하드닝까지 생애주기를 커버
  • 46개 결정론적 detector 룰을 LLM/API 키 없이 CLI(`npx impeccable detect`)와 브라우저 확장에서 실행 — cli/engine/rules 디렉터리에 실제 구현 존재, 룰 기반이라 재현 가능한 채점
  • Claude Code, Cursor, GitHub Copilot, Gemini CLI, Codex CLI, OpenCode, Pi, Kiro, Trae(중국판 포함), Rovo Dev, Qoder까지 11개 하니스용 설치 산출물(.claude/.cursor/.codex/.gemini/.agents/.opencode/.pi/.kiro/.trae/.trae-cn/.rovodev/.qoder)이 저장소에 실제로 존재 — 진짜 크로스 프로바이더
  • `/impeccable live`는 실행 중인 dev 서버에 붙어 브라우저에서 요소를 선택하면 AI가 생성한 HTML+CSS 변형을 HMR로 즉시 교체하는 라이브 반복 모드 — skill/scripts/live-*.mjs 20여개 스크립트로 구성된 별도 서브시스템
  • Claude Code/Copilot/Codex/Cursor에 프로바이더 네이티브 pre/post-edit 훅을 설치해 UI 파일 직접 수정 시 detector 결과를 에이전트 대화에 자동 반영 — v3.9.1(2026-07-01)에서 Codex 훅 매니페스트 파싱 실패를 실제로 고친 이력 확인

워크플로

  1. 01`npx impeccable install`로 사용 중인 하니스(Claude Code/Cursor/Codex 등)를 자동 감지해 스킬을 설치
  2. 02`/impeccable init`으로 브랜드/제품 성격을 인터뷰 방식으로 확인하고 PRODUCT.md, (선택) DESIGN.md를 생성 — 이후 모든 커맨드가 이 파일을 읽음
  3. 03새 기능은 `/impeccable shape` 또는 `craft`로 브리프를 확정한 뒤 빌드, 기존 코드는 `document`/`extract`로 디자인 시스템을 역추출
  4. 04`/impeccable critique`·`audit`로 UX/기술 품질을 점수화해 리뷰
  5. 05`bolder`/`quieter`/`distill`/`layout`/`colorize`/`typeset` 등 목적별 커맨드로 미세 조정 후 `polish`로 출시 전 마감, 필요하면 `/impeccable live`로 브라우저에서 실시간 변형 실험

주요 명령

명령설명
/impeccable init프로젝트 최초 1회 설정 — 대상/브랜드/원칙을 인터뷰로 확인하고 PRODUCT.md·DESIGN.md를 작성, 이후 모든 커맨드가 이 파일을 읽음
/impeccable audit [area]접근성·성능·반응형·테마·안티패턴을 기술적으로 점검해 P0~P3 심각도 리포트 생성
/impeccable critique [area]시각적 위계, 정보구조, 감정적 공명, 인지 부하를 정량 스코어링과 페르소나 테스트로 평가
/impeccable craft [feature]브리프 확정 → 다중 라운드 discovery → 시각 프로브 → 빌드까지 이어지는 전체 플로우
/impeccable polish [area]출시 직전 정렬·간격·일관성·디테일을 다듬는 최종 패스
/impeccable live실행 중인 dev 서버에 붙어 브라우저에서 요소를 선택하고 AI 생성 변형을 HMR로 실시간 교체
npx impeccable detectLLM/API 키 없이 46개 결정론적 룰만으로 CLI에서 안티패턴을 스캔 (CI 연동 가능)

설정

npx impeccable install
/impeccable init
/impeccable audit landing
/impeccable pin audit   # /audit 단축커맨드 생성

함정

설치 전에 확인하세요

  • Node >=22.12.0 필수(package.json engines) — 구버전 Node에서는 CLI가 동작하지 않음
  • `.impeccable/` 디렉터리는 대부분 gitignore 대상이지만 config.json, live/config.json, design.json, critique/*.md는 팀 공유 산출물이라 계속 커밋해야 함 — 패턴을 잘못 적용하면 공유 디자인 스펙이 통째로 날아가거나 임시 스크린샷이 레포에 쌓임
  • Cursor에서 쓰려면 Nightly 채널 전환 + Agent Skills 베타 활성화가 선행돼야 하고, Gemini CLI는 `@google/gemini-cli@preview` 설치 후 `/settings`에서 Skills를 수동으로 켜야 함
  • v3.9.1(2026-07-01) 이전 버전은 Codex용 훅 매니페스트에 잘못된 top-level description 필드가 있어 post-edit 디자인 체크가 아예 등록되지 않는 실제 회귀가 있었음

직접 써본 메모

저장소를 직접 클론해서 보면 impeccable은 '스킬 하나'라는 소개 문구와 달리 실제로는 CLI 설치기, 브라우저 확장, 11개 하니스별 배포 산출물(.claude, .cursor, .codex, .gemini, .agents, .opencode, .pi, .kiro, .trae, .trae-cn, .rovodev, .qoder), Astro로 만든 문서 사이트까지 묶인 상당히 큰 프로젝트다. skill/reference/ 아래에는 23개 커맨드 각각의 레퍼런스 파일에 더해 interaction-design.md, brand.md, product.md, ios.md, android.md, codex.md, hooks.md 같은 플랫폼/주제별 보조 문서가 따로 존재한다.

핵심 차별점은 '46개 결정론적 detector 룰은 LLM을 부르지 않는다'는 주장이 실제로 cli/engine/rules 디렉터리의 코드로 뒷받침된다는 점이다. 즉 audit/critique 같은 판단이 필요한 커맨드는 LLM이 붙지만, npx impeccable detect 자체는 API 키 없이 CI에서 돌릴 수 있는 정적 검사기다. 변경 이력(changelog)을 보면 v3.9.0에서 'Codex가 빈 화면마다 반사적으로 넣는 장식용 그리드 배경'을 새 안티패턴으로 못박은 것처럼, 실제 관찰된 AI 슬롭 패턴을 하나씩 규칙으로 굳혀가는 방식으로 유지보수되고 있다.

다만 설치 경험은 하니스마다 균일하지 않다 — Cursor는 Nightly 채널 전환이, Gemini CLI는 preview 패키지 설치가 선행돼야 하고, v3.9.1 changelog에는 Codex 훅이 매니페스트 스키마 문제로 아예 등록되지 않았던 회귀가 그대로 기록돼 있다. 크로스 프로바이더를 표방하는 도구일수록 이런 프로바이더별 훅 파싱 차이가 실제 장애 지점이 된다는 걸 보여주는 사례다.

비교

open-pencil이 비주얼 프로토타이핑·피그마 연동 쪽에 무게를 둔다면, impeccable은 이미 작성된 코드 위에서 46개 결정론적 룰과 23개 커맨드로 개입하는 코드-레벨 디자인 감사/교정 도구라는 점이 다르다.

최근 변경

skill-v4.0.2에서 재현 가능한 외부 방향 선택, 188개 challenger world, 작업 유형 자동화, 브라우저 결정 페이지와 빌드 전 디자인 보드·의도 계약을 추가했다.

공식 변경 내역