impeccable

Impeccable
코딩 에이전트를 위한 디자인 어휘. polish와 bolder로 방향을 잡고, critique와 audit으로 검토하며, AI slop이 출시되기 전에 잡아냅니다.

프로젝트 루트에서:

npx impeccable install
코딩 도구를 다시 로드한 뒤, 에이전트에서 /impeccable init을 실행하세요 (Codex에서는 $impeccable init).

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 없이
Impeccable과 함께

같은 모델(Fable 5.1), 같은 브리프: 리구리아 해안의 14개 객실 패밀리 게스트하우스. Impeccable 없이는 무난한 기본값을 만듭니다: 크림색 페이지, 얇은 세리프, 이탤릭 액센트, 알약 버튼. Impeccable과 함께라면 페이지는 하나의 그림을 중심으로 구성됩니다: 물에서 바라본 밤의 집.

전체 프로젝트는 Neo Mirai 사례 연구 를 참고하세요: 목업에서 출시된 페이지까지 완성한 컨퍼런스 사이트입니다.

왜
모든 것에 Inter. 보라에서 파랑으로 가는 그라디언트. 카드 안에 중첩된 카드, 색 배경 위의 회색 텍스트, 모든 제목 위의 둥근 사각형 아이콘 타일. 다른 안내 없이 에이전트에게 페이지를 요청하면 이런 것들이 모델과 프로젝트를 가리지 않고 반복해서 나타납니다.

원하는 것에 대한 단어. "Make it pop"은 에이전트에게 추측을 맡깁니다. /impeccable bolder the pricing cards는 그 한 가지 동작을 위해 작성된 플레이북을 불러와 하나의 대상에 적용합니다.
리뷰어. critique는 사용성 휴리스틱에 비추어 디자인을 점수화하고 무엇을 먼저 고칠지 순위를 매깁니다. audit은 접근성, 성능, 테마, 반응형 동작을 확인하고 발견 사항을 P0(차단)부터 P3(다듬기)까지 순위를 매깁니다.
slop 탐지기. 62개의 결정론적 규칙이 위의 징후들을 표시하고, 빡빡한 패딩이나 건너뛴 제목 같은 품질 문제도 잡아냅니다. LLM도, API 키도 필요 없습니다.

Impeccable은 이미 존재하는 인터페이스에서 가장 강력합니다: 페이지나 컴포넌트를 지정하고 반복하세요. 새 페이지도 만듭니다. 더 어려운 모드에서 최대한 활용하는 방법은 Build something new를 참고하세요. 시작하려면 컴포넌트 하나를 고르세요:

/impeccable critique the pricing cards

작동 방식
프로젝트마다 /impeccable init을 한 번 실행하세요. 코드를 읽고, 추론할 수 없는 것만 묻고(제품이 누구를 위한 것인지, 무엇을 해야 하는지, 제약 조건), PRODUCT.md 를 작성합니다. 이후의 모든 명령이 이를 읽습니다. /impeccable document를 실행하면 기존 비주얼 시스템을 DESIGN.md 에 담아 변경 사항이 브랜드에 맞게 유지됩니다. 컨텍스트 파일에 대한 자세한 내용 .

그런 다음 명령과 대상을 지정하세요:

/impeccable critique the onboarding flow
/impeccable quieter the landing page
/impeccable polish settings
/impeccable harden checkout

또는 원하는 것을 그냥 설명하세요: /impeccable redo this hero section . 좁은 대상이 더 나은 결과를 냅니다. 섹션 하나를 면밀히 검토하는 것이 전체 페이지를 대충 훑는 것보다 낫습니다. 자주 쓰는 명령은 /impeccable pin audit으로 고정해 /audit을 자체 단축키로 만들 수 있습니다.

24개 명령

명령

방향 잡기
bolder는 안전한 디자인을 증폭 · quieter는 요란한 것을 가라앉힘 · distill은 페이지에 필요 없는 것을 제거 · colorize는 회색 인터페이스에 색을 부여 · typeset은 폰트, 위계, 크기를 수정 · layout은 간격과 리듬을 수정 · animate는 전환과 상호작용 피드백을 추가 · delight는 개성을 더함 · overdrive는 셰이더, 스프링 물리, 스크롤 기반 효과를 노림

검토
critique는 점수화된 UX 리뷰 · audit은 기술 품질 보고서

마무리
polish는 출시 전 최종 패스 · harden은 오류, i18n, 오버플로, 엣지 케이스를 다룸 · clarify는 불명확한 문구를 다시 씀 · adapt는 화면 크기와 기기를 처리 · optimize는 로딩과 렌더링 성능을 수정 · onboard는 첫 실행 흐름과 빈 상태를 디자인

실시간 반복
live는 브라우저에서 요소를 선택하고 변형을 순환 · generate는 수동 선택 없이 지정된 요소의 변형을 생성

계획 및 설정
shape는 코드 이전에 UX를 계획 · init은 PRODUCT.md 작성 · document는 DESIGN.md 작성 · extract는 반복되는 패턴을 디자인 시스템으로 추출

24번째인 craft 는 단순 빌드 요청에 대한 더 이상 사용되지 않는 별칭입니다. 에이전트에서 /impeccable만 입력하면 목록을 볼 수 있습니다. 각 명령에는 자체 페이지가 있습니다: impeccable.style/docs .

Codex에서는 슬래시 명령 대신 /skills를 열거나 $impeccable을 입력하세요.

Live 모드
/impeccable live는 실행 중인 개발 서버를 오버레이와 함께 엽니다. 요소를 선택하고 방향을 고르면 Impeccable이 변형을 제자리에서 핫스왑합니다. 하나를 수락하면 소스에 다시 기록됩니다. Vite, Next, SvelteKit, Astro, Nuxt, 일반 HTML과 함께 작동합니다. 브라우저에서 반복하기 .

Live 모드는 로컬 체크아웃만 편집합니다. 배포된 사이트에 주입하거나 작동시키기 위해 프로덕션 CSP를 약화시키지 마세요. 카피 편집을 적용하면 package.json 의 선택적 impeccable:manual-edit-validate 스크립트가 당신의 권한으로 실행되므로, 낯선 저장소에서 live 모드를 사용하기 전에 검토하세요.

탐지기를 실행하는 세 가지 방법
에이전트에서. 디자인 훅이 에이전트가 편집하는 모든 UI 파일을 스캔하고 에이전트가 작업을 완료했다고 선언하기 전에 발견 사항을 돌려줍니다. 대부분의 slop이 여기서 잡힙니다: 훅이 없으면 탐지기는 누군가 실행하는 것을 기억할 때만 작동합니다. Claude Code, Cursor, Codex, GitHub Copilot, Grok Build, Hermes Agent에서 사용할 수 있으며 설치 프로그램이 설정합니다. 예스를 선택하세요. 자동 디자인 검사 .

CI 또는 터미널에서. CLI는 에이전트가 필요 없습니다:

npx impeccable detect src/ # 디렉터리 스캔
npx impeccable detect https://example.com # 렌더링된 페이지 스캔 (설치된 Chrome 또는 Edge 사용)
npx impeccable detect --json . # 기계 판독 가능 출력
npx impeccable detect --github src/ # GitHub Actions 어노테이션
npx impeccable detect --list-rules # id와 설명이 포함된 모든 규칙
JSX, TSX 같은 소스 파일은 패턴 규칙만 적용됩니다. 낮은 대비나 작은 텍스트처럼 렌더링된 페이지가 필요한 규칙은 URL을 스캔할 때 실행되므로, CLI를 개발 서버로도 향하게 하세요: npx impeccable detect http://localhost:5173 .

종료 코드 2는 발견 사항을, 1은 대상을 스캔할 수 없음을 의미합니다. 브랜드 폰트를 모든 곳에서 허용하려면 npx impeccable ignores add-value overused-font Inter --reason "Brand font" 를 실행하세요. 한 파일에서 규칙을 끄려면 주석을 추가하세요: <!-- impeccable-disable overused-font: exported brand doc --> . 탐지기 스캔 실행 · 구성 및 무시 .

브라우저에서. Chrome 확장 프로그램은 동일한 발견 사항을 모든 라이브 페이지(당신의 것이든 다른 사람의 것이든)에 오버레이합니다. 시각적 오버레이로 검토하기 .

설치
npx impeccable install
설치 프로그램은 코딩 도구를 감지하고, 이 프로젝트에 설치할지 전역으로 설치할지 묻고, 도구가 지원하는 경우 디자인 훅을 제안합니다. 훅을 수락하세요. 이후 도구를 다시 로드하세요. npx impeccable update는 기존 설치를 새로 고칩니다. 스크립트의 경우 --providers=claude,codex,cursor 와 --scope=project|global 을 전달하세요.

세 가지 도구는 훅이 실행되기 전에 한 단계가 더 필요합니다. Codex에서는 /hooks를 열고 프로젝트 훅을 승인하세요(이를 변경하는 업데이트 후에도 다시). Grok Build에서는 /hooks-trust를 실행하거나 --trust로 실행하세요. Hermes Agent에서 훅은 플러그인입니다: hermes plugins enable impeccable-design-hook 을 한 번 실행하세요. 하네스에서 훅을 허용하세요 .

Node는 npx 에만 필요합니다. 스킬 자체는 옆에 함께 제공되거나 ~/.impeccable/bin/ 에 한 번 다운로드되는 자체 포함 엔진 바이너리를 실행합니다.

Claude Code, Copilot, Grok 플러그인
Claude Code: /plugin marketplace add pbakaus/impeccable , 그런 다음 /plugin을 열고 Impeccable을 설치하세요.

VS Code의 GitHub Copilot: Visual Studio Marketplace에서 Impeccable을 설치하거나 code --install-extension renaissance-geek.impeccable 을 실행하세요. VS Code 1.109.3+, Copilot Chat, 신뢰할 수 있는 워크스페이스가 필요합니다. 훅 없이 스킬을 설치합니다. 세부 정보 .

Grok Build: grok plugin install pbakaus/impeccable#plugin --trust 는 스킬, 에이전트, 훅을 설치합니다.

Git 서브모듈 (팀 전체를 위한 고정 버전)
git submodule add https://github.com/pbakaus/impeccable vendor/impeccable
npx impeccable link --source=vendor/impeccable --providers=claude,cursor
.gitmodules , 서브모듈, 생성된 링크를 커밋하세요. 팀원은 git submodule update --init --recursive 를 실행합니다. 업그레이드하려면 git submodule update --remote vendor/impeccable 을 실행하고, 링크 명령을 다시 실행하고, 커밋하세요. 링크는 스킬을 설치하며 훅은 설치하지 않습니다. 기존 스킬 폴더는 --force 를 전달하지 않는 한 그대로 유지됩니다.

수동 복사, Node 불필요
impeccable.style 에서 도구용 ZIP을 다운로드하거나 이 저장소를 클론하세요: 각 도구의 빌드는 저장소 루트에 커밋되어 있습니다. 아래 폴더의 skills/impeccable을 프로젝트의 같은 위치 또는 전역 폴더에 복사하세요.

도구
저장소 폴더
전역 스킬 폴더

Claude Code
.claude/
~/.claude/skills/

Cursor
.cursor/

Codex CLI, Replit Agent
.agents/
~/.agents/skills/

Devin
.devin/
${XDG_CONFIG_HOME:-$HOME/.config}/devin/skills/

GitHub Copilot
.github/

Gemini CLI
.gemini/

Google Antigravity
.agent/
~/.gemini/config/skills/

OpenCode
.opencode/

Grok Build
.grok/
~/.grok/skills/

Hermes Agent
.hermes/
${HERMES_HOME:-$HOME/.hermes}/skills/

DeepSeek Harness
.dsh/
${DSH_HOME:-$HOME/.dsh}/skills/

Pi
.pi/

Qoder
.qoder/
~/.qoder/skills/

Rovo Dev
.rovodev/
~/.rovodev/skills/

Mistral Vibe
.vibe/
~/.vibe/skills/

Trae
.trae/
~/.trae/skills/

Trae China
.trae-cn/
~/.trae-cn/skills/

예: mkdir -p your-project/.claude/skills && cp -r .claude/skills/impeccable your-project/.claude/skills/ .

참고:

수동 복사는 디자인 훅과 서브에이전트를 건너뜁니다. 이를 얻으려면 npx impeccable install을 실행하세요. 각 도구의 훅을 올바른 스킬 경로를 가리키도록 작성합니다.
OpenCode는 /impeccable을 제공하기 위해 .opencode/commands/impeccable.md를 프로젝트의 .opencode/commands/에 복사해야 합니다.
Hermes는 프로젝트 로컬 스킬을 한 번 신뢰하도록 요청합니다: 프로젝트 루트에서 hermes skills trust를 실행하세요. 전역 설치는 신뢰 단계가 필요 없습니다.
Cursor와 Gemini CLI는 설정에서 Agent Skills를 활성화해야 할 수 있습니다. Cursor 및 Gemini CLI 스킬 문서를 참고하세요.
복사 후 Trae를 재시작하세요.
impeccable install과 update는 DSH_HOME이 홈 디렉터리 안에 있을 때만 DeepSeek Harness 전역 복사본을 관리합니다.

프로젝트 파일과 git
Impeccable은 작업 파일을 .impeccable/ 아래에 작성합니다. 일부는 공유 프로젝트 산출물로 저장소에 속합니다: config.json , live/config.json , design.json , surfaces/*.md , critique/*.md . PRODUCT.md와 DESIGN.md도 저장소에 보관하세요. 나머지는 스크린샷, 캐시, 런타임 상태입니다.

.gitignore 항목 복사
# impeccable-ignore-start
# Ephemeral output, runtime state, and per-dev overrides.
# The **/ prefix covers .impeccable at the repo root or in a nested workspace.
# Shared artifacts stay tracked: config.json, live/config.json,
# design.json, surfaces/*.md, critique/*.md.
** / .impeccable / config.local.json
** / .impeccable / hook.cache.json
** / .impeccable / hook.pending.json
** / .impeccable / * .png
** / .impeccable / review /
** / .impeccable / questions /
** / .impeccable / live / server.json
** / .impeccable / live / sessions /
** / .impeccable / live / previews /
** / .impeccable / live / annotations /
** / .impeccable / live / cache /
** / .impeccable / live / manual-edit-apply-transaction.json
** / .impeccable / live / manual-edit-events.jsonl
** / .impeccable / live / manual-edit-evidence /
** / .impeccable / live / pending-manual-edits.json
** / .impeccable / live / deferred-svelte-component-accepts.json
** / .impeccable / live / * .png
# impeccable-ignore-end

결정 라운드 상태를 담는 폴더( .impeccable/questions/ , .impeccable/mocks/worlds/ )도 스스로를 무시합니다. .gitignore는 git이 이미 추적 중인 파일을 추적 해제할 수 없습니다. 이전에 커밋했다면 git rm --cached <path> 를 실행하세요.

알아두면 좋은 점
빌드 경로. 새 랜딩 페이지와 쇼케이스 화면의 경우, Impeccable은 먼저 완전한 충실도의 컴프를 생성하고 그것에 맞춰 빌드하거나(bolder, 느림), 코드에서 바로 빌드할 수 있습니다(더 간결하고 빠름). 앱 화면과 문서는 항상 코드로 빌드됩니다. init은 한 번 묻고 답을 .impeccable/config.json 의 buildPath로 저장합니다. 결정 페이지에서 한 세션 동안 재정의할 수 있습니다. 이 선택은 하네스가…일 때만 나타납니다.