Impeccable은 ArtCraft가 아니고 ArtCraft 제품이나 제품군의 일부도 아니며, 이 페이지는 독립 가이드이니 공식 정보는 impeccable.style과 github.com/pbakaus/impeccable에서 확인하세요.
Impeccable: 코딩 에이전트를 위한 디자인 어휘
Impeccable은 코딩 에이전트가 인터페이스를 검토하고 다듬고 마무리할 때 쓸 공통 어휘를 제공하는 오픈소스 디자인 스킬이자 CLI입니다. Paul Bakaus가 만들었고 Anthropic의 frontend-design 스킬에서 출발했으며 Apache-2.0 라이선스로 배포됩니다. 이 페이지는 공식 문서가 아닌 독립 가이드입니다.
- 24개 명령: critique, polish, audit, typeset, distill 등
- LLM도 API 키도 필요 없는 62개 결정론적 규칙 기반 탐지기
- Claude Code, Cursor, Codex CLI, Copilot 등 총 19개 에이전트 지원
최근 업데이트: · English
Impeccable이란
Impeccable은 코딩 에이전트에 디자인 어휘를 넣어 주는 스킬과, 따로 실행되는 CLI입니다. 캔버스를 여는 대신 디자인을 에이전트가 실행할 수 있는 명령으로 쪼갭니다. 비평하고, 덜어내고, 조판하고, 다듬고, 단단하게 만드는 식입니다. Paul Bakaus가 Anthropic의 frontend-design 스킬을 출발점으로 만들었고 Apache-2.0으로 공개했습니다.
겨냥하는 것은 에이전트의 기본 취향입니다. 어디에나 Inter, 보라에서 파랑으로 가는 그라데이션, 카드 안의 카드, 색 배경 위 회색 글씨, 제목마다 붙는 둥근 아이콘 타일 같은 것들입니다. 62개의 결정론적 규칙이 편집 중에 이런 신호를 잡아내며, LLM이나 API 키를 쓰지 않습니다.
이미 있는 인터페이스에서 가장 강합니다. 페이지나 컴포넌트를 지정해 반복하는 편이 사이트 전체를 처음부터 만드는 것보다 안정적입니다. 새 페이지도 만들 수 있지만 공식 문서도 그 방식이 더 어렵다고 인정합니다. 참고로 Impeccable은 독립 오픈소스 프로젝트이며 ArtCraft 제품도, 그 제품군의 일부도 아닙니다.
설치와 초기 설정
프로젝트 루트에서 아래 명령을 실행합니다. npx에는 Node 18.19 이상이 필요합니다. 설치 프로그램이 사용 중인 코딩 도구를 감지하고, 프로젝트 단위인지 전역인지 물으며, 지원되는 도구에는 디자인 훅을 제안합니다. 훅은 받아 두는 편이 좋습니다.
끝나면 도구를 다시 불러온 뒤 /impeccable init을 실행합니다(Codex에서는 $impeccable init). 스크립트에서는 --providers=claude,codex,cursor와 --scope=project|global을 넘길 수 있습니다. 기존 설치는 npx impeccable update로 갱신합니다.
npx impeccable install- Node 18.19 이상을 확인하고 프로젝트 루트로 이동한다.
- npx impeccable install을 실행하고 프로젝트 범위 또는 전역 범위를 고른 뒤, 지원되면 디자인 훅을 켠다.
- 코딩 도구를 다시 불러오고 /impeccable init(Codex는 $impeccable init)을 실행해 PRODUCT.md를 만든다.
- 시각 체계를 남기려면 /impeccable document로 DESIGN.md를 만들고, 이후 npx impeccable update로 최신 상태를 유지한다.
핵심 명령
명령은 모두 24개입니다. ‘명령 + 대상’ 형태로 쓰며, 예를 들어 /impeccable critique the pricing cards입니다. Codex에서는 슬래시 대신 $를 붙입니다. /impeccable만 입력하면 목록이 나옵니다. 아래는 가장 자주 쓰는 일곱 가지입니다.
| 명령 | 하는 일 | 쓰는 시점 |
|---|---|---|
/impeccable init | 코드를 읽고 추론할 수 없는 것만 물은 뒤 PRODUCT.md를 작성한다. | 프로젝트를 시작할 때 한 번, 이후 명령의 맥락을 잡기 위해. |
/impeccable critique | 사용성 휴리스틱에 따라 점수를 매기는 UX 리뷰를 하고 고칠 순서를 정한다. | 개편 전에 현황을 평가하거나 흐름이 어디서 막히는지 찾을 때. |
/impeccable polish | 출시 전 마지막 손질을 한다. | 기능이 확정되고 배포가 임박했을 때. |
/impeccable audit | 접근성, 성능, 테마, 반응형, 구현 무결성을 점검한 기술 보고서를 만들고 문제를 P0~P3로 분류한다. | 릴리스 전 품질 점검이나 쌓인 구현 부채를 정리할 때. |
/impeccable typeset | 글꼴, 위계, 크기, 간격을 바로잡는다. | 타이포그래피가 헐겁거나 위계가 흐릴 때. |
/impeccable distill | 페이지에 필요 없는 요소를 덜어낸다. | 내용이 과해 초점이 흐려질 때. |
/impeccable hooks status|on|off | 디자인 훅을 확인·활성화·비활성화한다. 훅은 에이전트가 UI 파일을 편집할 때 검사한다. | 자동 검사가 돌고 있는지 확인하거나 잠시 끄고 싶을 때. |
권장 작업 흐름
맥락이 먼저, 화면은 그다음입니다. init은 추론할 수 없는 것만 묻습니다. 누구를 위한 제품인지, 무엇을 해내야 하는지, 어떤 제약이 있는지입니다. 답은 PRODUCT.md에 들어가고 이후 모든 명령이 이를 읽습니다. 이미 시각 체계가 있다면 document를 실행해 브랜드 규칙을 DESIGN.md에 남겨 두세요. 작업 도중 에이전트가 스타일을 바꾸는 일을 줄여 줍니다.
대상은 좁힐수록 결과가 좋습니다. “페이지 전체를 다시 만들어”보다 “critique로 가격 카드를 봐 줘”가 낫습니다. 자주 쓰는 명령은 /impeccable pin audit으로 /audit 바로가기로 만들 수 있고, 배포 전에는 audit 다음 polish 순서로 마무리합니다.
- 프로젝트마다 /impeccable init을 한 번 실행하고 만들어진 PRODUCT.md를 검토한다.
- 기존 디자인 시스템이 있으면 /impeccable document를 실행해 글꼴, 색, 컴포넌트 규칙을 DESIGN.md에 정리한다.
- 섹션 단위로 반복한다. /impeccable critique the pricing cards 뒤에 bolder, quieter, distill, typeset으로 방향을 조정한다.
- 공개 전에 /impeccable audit과 /impeccable polish를 차례로 실행하고, 즐겨 쓰는 명령은 pin으로 고정한다.
지원하는 코딩 에이전트
공식 지원 범위는 넓습니다. Claude Code, Cursor, Codex CLI, GitHub Copilot, Devin, Replit Agent, Gemini CLI, Grok Build, OpenCode, Google Antigravity, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe, Pi, Hermes Agent, DeepSeek Harness, Veto입니다. 도구마다 설치 방식이 다르므로 전체 목록은 공식 문서를 확인하세요.
Claude Code, Copilot, Grok에는 플러그인이 있고, 디자인 훅은 Claude Code, Cursor, Codex, GitHub Copilot, Grok Build, Hermes Agent에서 쓸 수 있습니다. Codex에서는 /hooks에서 프로젝트 훅을 승인해야 하고, Grok Build는 /hooks-trust, Hermes는 플러그인 활성화가 한 단계 더 필요합니다.
Node를 설치하고 싶지 않다면 스킬 폴더를 직접 복사해도 됩니다. 탐지기만 쓴다면 npx impeccable detect로 에이전트 없이 실행할 수 있습니다. 라이브 모드는 Vite, Next, SvelteKit, Astro, Nuxt, 순수 HTML을 지원하지만, 수정 대상은 로컬 작업 사본뿐입니다.
Impeccable과 ArtCraft MCP의 차이
둘 다 에이전트로 결과물을 만든다는 점은 같지만 층이 다릅니다. Impeccable은 인터페이스 소스 코드를 다루고, ArtCraft MCP는 storytold가 제공하는 앱별 공식 MCP/CLI로 PhotoCraft 같은 로컬 Crafting Apps를 조작합니다. 커뮤니티에서 같은 이름을 쓰는 artcraft-mcp 구독 API와도 다른 물건입니다.
| 구분 | Impeccable | ArtCraft MCP |
|---|---|---|
| 다루는 대상 | 저장소의 프런트엔드 소스: 컴포넌트, JSX/TSX, CSS, 페이지 구조. | 로컬 Crafting Apps(예: PhotoCraft)와 그 이미지·영상 워크플로. |
| 산출물 | 디자인 조언, 코드 수정, critique/audit 보고서, PRODUCT.md와 DESIGN.md. | 이미지나 영상, 그리고 해당 앱 안에서 실행되는 자동화 작업. |
| 선택 기준 | 프런트엔드 UI를 만들고 검토하고 다듬을 때. | 이미지와 영상을 대량으로 만들거나 처리하고 앱 작업을 자동화할 때. |
| 함께 쓸 수 있나 | 가능하다. UI는 Impeccable, 소재 제작은 ArtCraft MCP에 맡긴다. | 가능하지만 미디어 자산에 한정된다. UI 디자인 리뷰를 하지 않고 Impeccable을 대체하지도 않는다. |
경계와 안전
Impeccable은 프런트엔드 디자인 스킬과 CLI이지 디자인 앱도, 이미지 생성기도 아닙니다. 라이브 모드는 로컬 작업 사본만 수정합니다. 배포된 사이트에 주입하거나, 동작시키려고 운영 환경의 CSP를 느슨하게 만들지 마세요.
훅은 모델 승인과 별개로 실행됩니다. Claude Code에서는 모델 명령을 거부해도 설치된 명령 훅이 돌 수 있고, 첫 편집에서 엔진을 내려받을 수도 있습니다. 무인 실행 전에 훅을 검토하고, 필요하면 --settings '{"disableAllHooks": true}'로 잠시 끄세요.
텔레메트리는 어떤 비주얼 방향이 제시되고 무엇이 선택됐는지만 익명으로 기록합니다. 프로젝트 이름, 파일, 코드, PRODUCT.md는 전송하지 않습니다. npx impeccable telemetry off, DO_NOT_TRACK=1, 또는 .impeccable/config.json의 "telemetry": false로 끌 수 있습니다. 탐지기 종료 코드는 2가 발견 사항 있음, 1이 대상 스캔 불가를 뜻합니다.
관련 가이드
자주 묻는 질문
Impeccable은 무엇이며 ArtCraft 제품인가요?
Impeccable은 Paul Bakaus가 만든 코딩 에이전트용 디자인 스킬 겸 CLI로, 24개 명령과 62개 규칙 탐지기를 갖추고 Apache-2.0으로 배포됩니다. ArtCraft 제품이 아니며 ArtCraft 제품군에도 속하지 않습니다. 이 페이지는 독립 가이드이고, 공식 자료는 impeccable.style과 github.com/pbakaus/impeccable에 있습니다.
설치는 어떻게 하나요?
프로젝트 루트에서 npx impeccable install을 실행하고 코딩 도구를 다시 불러오세요. 그다음 /impeccable init(Codex는 $impeccable init)을 실행하면 PRODUCT.md가 만들어집니다. npx에는 Node 18.19 이상이 필요하고, 기존 설치는 npx impeccable update로 갱신하며, 자세한 절차는 impeccable.style/docs에 있습니다.
critique와 audit은 어떻게 다른가요?
critique는 사용성 휴리스틱에 따라 점수를 매기는 UX 리뷰로, 무엇을 먼저 고쳐야 하는지 알려 줍니다. audit은 접근성, 성능, 테마, 반응형, 구현 무결성을 점검하는 기술 보고서로, 문제를 P0부터 P3까지 분류합니다. 하나는 경험을 판단하고 다른 하나는 구현을 점검하며, 보통 연달아 사용합니다.
API 키가 필요한가요?
탐지기에는 필요 없습니다. 62개 규칙이 모두 결정론적이라 LLM도 API 키도 호출하지 않습니다. 스킬 자체도 에이전트 안에서 동작하므로 별도의 모델 키가 들지 않습니다. 텔레메트리는 npx impeccable telemetry off나 DO_NOT_TRACK=1로 끌 수 있습니다.
어떤 코딩 에이전트와 호환되나요?
Claude Code, Cursor, Codex CLI, GitHub Copilot, Devin, Replit Agent, Gemini CLI, Grok Build, OpenCode, Google Antigravity, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe, Pi, Hermes Agent, DeepSeek Harness, Veto입니다. 설치 방식과 훅 지원은 도구마다 다르며, 최신 목록은 impeccable.style/docs에서 볼 수 있습니다.
Impeccable과 ArtCraft MCP 중 무엇을 써야 하나요?
무엇을 바꾸려는지에 따라 다릅니다. Impeccable은 인터페이스 소스를 다뤄 디자인 조언과 코드 수정, 리뷰를 내놓습니다. ArtCraft MCP는 PhotoCraft 같은 로컬 앱을 조작해 이미지와 영상을 만들고 그 작업을 자동화합니다. 둘은 함께 쓸 수 있지만, ArtCraft MCP는 디자인 리뷰 도구가 아니며 Impeccable을 대신하지 못합니다.
독립성 고지
Impeccable은 Paul Bakaus가 만든 독립 오픈소스 프로젝트입니다. ArtCraft와 아무런 제휴 관계가 없고, ArtCraft 제품이나 제품군, 공식 구성 요소도 아닙니다. 이 페이지는 한국어 독자를 위해 제3자가 작성한 가이드이며, 명령과 요구 사항, 최신 소식은 공식 사이트 impeccable.style과 저장소 github.com/pbakaus/impeccable을 기준으로 삼아야 합니다. ArtCraft MCP는 Crafting Apps를 위한 별도의 공식 통합으로, 해결하는 문제가 다릅니다.
Sources
Every fact on this page comes from the pages below, checked on 3 November 2026.