클로드 코드에 임페커블 스킬을 깔아 일렉트론 데스크톱 앱 디자인 점검하는 법

임페커블(Impeccable)은 클로드 코드(Claude Code)나 코덱스 같은 코딩 에이전트에 붙여 쓰는 디자인 스킬이다. 10월 19일 나온 4.7.0부터는 일렉트론(Electron)·NW.js·CEF·WebView2로 만든 데스크톱 앱 창도 audit·critique 명령으로 점검한다. 열린 창을 지금 모습 그대로 읽고, 끝나면 건드리기 전 상태로 돌려 놓는다.

1. 프로젝트 폴더에서 설치한 뒤 클로드 코드를 다시 연다. 처음 한 번은 /impeccable init을 돌려 PRODUCT.md를 만든다.

npx impeccable install

1. 앱을 디버깅 포트를 열고 띄운다. 일렉트론·NW.js·CEF는 실행 인자로 --remote-debugging-port=9222를 붙이고, WebView2는 같은 값을 환경변수 WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS에 넣는다. 포트는 127.0.0.1에만 열어 둔다. 테스트용 프로필과 데이터로 띄우는 편이 안전하다.

npx electron . --remote-debugging-port=9222

1. 점검할 화면(경로, 열린 패널, 테마, 데이터)을 맞춰 놓고 창을 화면에 띄워 둔다. 최소화하거나 숨기면 색 대비 검사가 빠진다.

2. 클로드 코드에서 부른다.

/impeccable audit <점검할 화면>
/impeccable critique <점검할 화면>

스킬이 안에서 impeccable detect --cdp 9222로 창을 읽는데, 직접 돌려도 된다. 창이 여러 개면 목록만 보여 주고 끝나니 --target에 주소나 제목 일부를 넣어 하나를 고른다.

.claude/skills/impeccable/scripts/impeccable detect --cdp 9222 --target <주소나 제목 일부> --json

critique는 서브에이전트 둘이 창 하나를 번갈아 쓴다(웹페이지에서는 동시에 돈다). 맥OS·리눅스의 타우리(Tauri) 앱은 CDP가 없어 소스 검사만 한다. 라이선스는 아파치 2.0이다.