Impeccable
AI 코딩 에이전트를 위한 디자인 가이드라인입니다. 1가지 스킬, 24개 명령어, 라이브 브라우저 반복 작업, 그리고 AI가 생성한 프론트엔드 디자인을 위한 62개의 결정론적 검출 규칙을 제공합니다.
빠른 시작: 프로젝트 루트에서 npx impeccable install을 실행한 다음, 사용 중인 AI 코딩 도구 내부에서 /impeccable init을 실행하세요. 전체 문서는 impeccable.style를 참고하세요.
Impeccable을 사용하는 이유?
Anthropic의 frontend-design은 Claude를 위한 최초로 널리 사용된 디자인 스킬이었습니다. Impeccable은 여기서 시작되었습니다.
모든 모델이 동일한 SaaS 템플릿으로 학습됩니다. 가이드라인을 건너뛰면 모든 프로젝트에서 같은 몇 가지 특징(Inter의 만능 사용, 보라색-파란색 그라디언트, 카드 안에 중첩된 카드, 색상 배경 위의 회색 텍스트, 모든 제목 위에 있는 둥근 사각형 아이콘 타일)만 얻게 됩니다.
Impeccable이 추가하는 기능:
- 하나의 설정 흐름(One setup flow).
/impeccable init은 지속적인 제품 진실(durable product truth)을 PRODUCT.md에 기록하여, 나중에 실행되는 명령어들이 청중, 목적, 운영 컨텍스트, 제약 조건, 목소리(voice), 그리고 증거를 파악할 때 이 사실들을 표면적인 시각적 방향과 혼동하지 않게 합니다.
- 24개 명령어. AI와 공유하는 디자인 어휘입니다:
polish, audit, critique, distill, animate, bolder, quieter 등.
- 62개의 결정론적 검출 규칙과 LLM 전용 비평 점검 기능. CLI와 브라우저 확장 프로그램은 LLM이나 API 키 없이 이 결정론적 규칙들을 실행합니다.
포함된 내용
스킬: impeccable
이 스킬은 하나의 명령어로 설치됩니다:
/impeccable <command> <target>
새 프로젝트를 시작할 때마다 다음을 실행하세요:
init은 프로젝트를 검사하고, 지속적인 제품 진실에서 부족한 부분만 질문하며, PRODUCT.md 파일을 작성합니다. 방문자 모드(Visitor mode)와 시각적 방향(visual direction)은 각 표면마다 나중에 선택되며, 기존 시스템 또는 새로 구축된 시각 시스템은 DESIGN.md에 별도로 기록됩니다.
24개 명령어
모든 명령어는 /impeccable을 통해 접근할 수 있습니다:
| 명령어 | 기능 설명 |
|---|
/impeccable craft | 시각적 반복(visual iteration)을 포함한 전체 모양 정의 후 구축 흐름 (Full shape-then-build flow) |
| ... | |
사용하려면 /impeccable pin <명령어>를 사용하여 독립형 단축키를 만들 수 있습니다. (예: pin audit는 /audit를 생성합니다.) | |
사용 예시 (Usage Examples)
/impeccable audit blog # 블로그 허브 및 게시물 페이지 감사(Audit)
/impeccable critique landing # 사용자 경험(UX) 디자인 검토(critique)
/impeccable polish settings # 배포 전 최종 점검(polish)
...
또는 /impeccable을 설명과 함께 직접 사용할 수도 있습니다:
/impeccable redo this hero section
피해야 할 패턴 (Anti-Patterns)
이 스킬은 피해야 할 사항에 대한 명시적인 지침을 포함합니다:
- 너무 많이 사용된 글꼴(Arial, Inter, 시스템 기본값)을 사용하지 마세요.
- 색상 배경 위에 회색 텍스트를 사용하지 마세요.
- 순수한 검정/회색은 사용하지 마세요 (항상 색조를 입히세요/틴트 처리하세요).
- 모든 것을 카드 안에 넣거나 카드 안에 카드를 중첩하는 것을 하지 마세요.
- 바운스/탄성 이징(bounce/elastic easing)을 사용하지 마세요 (구식 느낌이 납니다).
실제 작동 모습 보기 (See It In Action)
Neo Mirai 사례 연구를 방문하여 Impeccable 명령어로 변형된 실제 프로젝트의 비포/애프터(before/after) 사례 연구를 확인하세요.
설치 (Installation)
이 스킬은 자체 런타임(runtime)을 필요로 하지 않습니다. 모든 스킬 복사본에는 Impeccable 엔진을 실행하는 작은 런처(scripts/impeccable, Windows의 경우 impeccable.cmd)가 포함되어 있으며, 이 엔진은 런처 옆에 위치하거나 첫 실행 시 ~/.impeccable/bin/에 한 번 다운로드되는 자체 포함 바이너리입니다. Node는 오직 npx impeccable 설치 프로그램을 사용할 때만 관여하며, 이는 동일한 바이너리를 감싸는 래퍼(shim) 역할을 합니다. 아래의 수동 및 Git 옵션은 Node 없이 작동합니다.
옵션 1: CLI 설치 프로그램 (권장)
프로젝트 루트에서 다음을 실행하세요:
이것은 감지된 하네스 폴더 또는 설치된 CLI(Command Line Interface)를 보여줍니다 (예: ~/.claude, ~/.codex, ~/.grok, ~/.hermes, ~/.veto, 또는 프로젝트 로컬의 .cursor). 감지된 세트를 유지하거나 프로바이더를 사용자 지정할 수 있게 해주며, 현재 프로젝트에 설치할지 아니면 전역적으로(globally) 설치할지를 묻습니다. 스크립트에서 이러한 선택을 건너뛰려면 --providers=claude,codex,cursor,grok,hermes,veto와 --scope=project|global를 사용하십시오. Claude Code, Cursor, Codex, GitHub Copilot, Grok Build의 경우, 현재 프로젝트에 프로바이더 네이티브 훅 매니페스트(hook manifest)도 설치합니다. Veto는 ~/.veto/skills/ 아래에서 패키징된 스킬을 받고 기본 Impeccable 편집 훅(edit hooks)은 실행하지 않습니다. Cursor, Claude Code, Gemini CLI, Codex CLI, Grok Build, Hermes Agent, Veto 및 기타 지원되는 모든 도구와 함께 작동합니다. 이후 하네스를 다시 로드하십시오.
기존 설치를 새로 고치려면 다음을 실행하십시오:
Codex 사용자는 설치 또는 업데이트 후 /hooks를 열고 프롬프트가 나타날 때 프로젝트 훅(project hook)을 승인해야 합니다. Codex는 훅 정의에 따라 신뢰도를 추적하므로, .codex/hooks.json을 변경하는 업데이트의 경우 다시 승인이 필요할 수 있습니다. Grok Build 사용자는 .grok/hooks/ 스크립트가 실행되기 전에 프로젝트 폴더 신뢰도( /hooks-trust 또는 --trust로 실행)가 필요합니다.
하네스별 신뢰 및 검증 단계에 대해서는 harness에서 훅 허용하기를 참조하십시오.
옵션 2: Git Submodule
Impeccable을 Git을 통해 패키징하고 업데이트하려는 팀의 경우, 이 리포지토리를 서브모듈(submodule)로 추가하고 컴파일된 프로바이더 빌드를 하네스 폴더에 연결하십시오:
git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor
git add .gitmodules .impeccable .claude .cursor
...
프로젝트에 필요한 프로바이더(providers)를 사용하세요. 예를 들어, claude, cursor, gemini, codex, github, grok, hermes, opencode, pi, qoder, trae, trae-cn, rovo-dev, vibe, 또는 veto 등이 있습니다. 이 명령어는 .impeccable/dist/universal/에서 개별 스킬 폴더를 연결하며, --force 플래그를 전달하지 않는 한 기존의 실제 스킬 디렉토리는 건드리지 않습니다.
나중에 업데이트하려면:
git submodule update --remote .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor
옵션 3: 플러그인 설치
VS Code의 GitHub Copilot:
[Visual Studio Marketplace]에서 [Impeccable]을 설치하거나 다음 명령어를 실행하세요:
code --install-extension renaissance-geek.impeccable
VS Code 1.109.3 이상, Copilot Chat 액세스 및 신뢰할 수 있는 로컬 작업 공간이 필요합니다. 채팅(Chat)을 에이전트 모드(Agent mode)로 열고 /impeccable polish를 시도하세요. 이 스킬 전용 확장 프로그램은 자동 후크(automatic hooks)를 설치하지 않으므로, 동일한 작업 공간/프로필에 Impeccable 스킬이 중복되는 것을 피하십시오. [VS Code 배포 세부 정보]를 참조하세요.
Claude Code:
/plugin marketplace add pbakaus/impeccable
Claude Code 전용입니다. 마켓플레이스를 추가한 후, /plugin을 열고 목록에서 Impeccable을 설치하세요.
Grok Build:
grok plugin install pbakaus/impeccable#plugin --trust
Grok Build 전용입니다. #plugin 접미사는 전체 모노레포(monorepo) 대신 슬림 플러그인 패키지(스킬, 에이전트 및 후크)를 설치합니다. 그런 다음 Grok 세션에서 /impeccable init을 실행하세요. npx impeccable install --providers=grok을 통한 프로젝트 범위 설치도 작동하며 .grok/skills/와 .grok/hooks/impeccable.json 파일을 작성합니다.
옵션 4: 웹사이트에서 다운로드
[impeccable.style]을 방문하여 사용하려는 도구의 ZIP 파일을 다운로드하고 프로젝트에 압축을 해제하세요.
옵션 5: 리포지토리에서 복사
Cursor:
cp -r dist/cursor/.cursor your-project/
참고: Cursor 스킬은 설정이 필요합니다:
- Cursor Settings에서 Nightly 채널로 전환 → Beta
- Cursor Settings에서 Agent Skills 활성화 → Rules
Cursor 스킬에 대해 자세히 알아보기
Claude Code:
cp -r dist/claude-code/.claude your-project/
...
OpenCode:
cp -r dist/opencode/.opencode your-project/
DeepSeek Harness:
cp -r dist/dsh/.dsh your-project/
...
CLI는 DSH_HOME을 사용자의 홈 디렉토리 내부에서만 해석할 때만 인식하며 (또는 홈 자체를 가리킬 경우), 그렇지 않은 경우에는 ~/.dsh를 사용합니다. 홈 외부에서의 수동 복사는 impeccable install/update에 의해 관리되지 않습니다.
Hermes Agent:
cp -r dist/hermes/.hermes/skills/* "${HERMES_HOME:-$HOME/.hermes}/skills/"
...
참고: Hermes는 프로젝트별 스킬을 리포지토리(repo) 단위의 신뢰 결정 뒤에 배치합니다 (이들은 절차 문서이므로, 임의로 클론된 모든 리포에서 자동 로드되는 것은 프롬프트 주입 벡터로 간주됩니다). 프로젝트 범위 설치 후에는 반드시 프로젝트 루트에서 hermes skills trust를 실행해야 합니다. 활성 $HERMES_HOME/skills/ (또는 설정되지 않은 경우 ~/.hermes/skills/)로의 전역 설치는 신뢰 단계 없이 로드됩니다. 이후 /impeccable <명령어>는 스킬의 Commands 테이블을 통해 라우팅되며, 디자인 훅은 Hermes에 설치되지 않습니다 (훅 표면이 없음).
Hermes 스킬에 대해 자세히 알아보기
Pi:
cp -r dist/pi/.pi your-project/
Gemini CLI:
cp -r dist/gemini/.gemini your-project/
참고: Gemini CLI 스킬은 설정이 필요합니다:
- 미리 보기 버전 설치:
npm i -g @google/gemini-cli@preview
/settings를 실행하고 “Skills” 활성화/skills list를 실행하여 설치 확인
Gemini CLI 스킬에 대해 자세히 알아보기
Codex CLI:
cp -r dist/agents/.agents your-project/
mkdir -p your-project/.codex
...
자산 생성기(asset-producer) 서브 에이전트는 스킬 자체의 agents/ 폴더 내부에 중첩되어 포함되며, Codex가 이를 자동으로 감지합니다. 별도의 .codex/agents/ 복사본은 필요하지 않습니다. 이 훅(hook)은 프로젝트 로컬 방식인데, 이는 Codex가 신뢰하는 프로젝트 설정 옆에 있는 .codex/hooks.json에서 훅을 발견하기 때문입니다.
GitHub Copilot:
cp -r dist/github/.github your-project/
Trae:
cp -r dist/trae/.trae-cn/skills/* ~/.trae-cn/skills/
...
참고: Trae는 구성 디렉터리가 다른 두 가지 버전을 가지고 있습니다.
- Trae China:
~/.trae-cn/skills/
- Trae International:
~/.trae/skills/
복사 후, 스킬을 활성화하려면 Trae IDE를 다시 시작하십시오.
Rovo Dev:
cp -r dist/rovo-dev/.rovodev your-project/
...
Qoder:
cp -r dist/qoder/.qoder your-project/
...
Mistral Vibe:
cp -r dist/vibe/.vibe your-project/
...
Grok Build:
cp -r dist/grok/.grok your-project/
...
디자인 훅도 설치되도록 npx impeccable install --providers=grok 또는 grok plugin install pbakaus/impeccable#plugin --trust를 사용하는 것이 좋습니다. 프로젝트 훅은 폴더당 한 번 /hooks-trust (또는 --trust)가 필요합니다.
Google Antigravity:
cp -r dist/antigravity/.agent your-project/
...
사용법
설치 후, 모든 명령어는 단일 /impeccable 스킬을 통해 실행됩니다:
/impeccable audit # 문제점 찾기 (Find issues)
/impeccable polish # 최종 정리 (Final cleanup)
/impeccable distill # 복잡성 제거 (Remove complexity)
...
/impeccable만 입력하면 전체 명령어 목록을 볼 수 있습니다.
대부분의 명령어는 특정 영역에 초점을 맞추기 위해 선택적 인수를 받습니다:
/impeccable audit the header
/impeccable polish the checkout form
자주 사용하는 명령어가 있다면, /impeccable pin audit를 사용하여 고정하고 독립적인 단축키로 /audit를 얻을 수 있습니다.
참고: Codex는 여기서 /prompts: 명령이 아닌 스킬(skills)을 사용합니다. /skills를 열거나 $impeccable을 입력하세요. 레포지토리 로컬 설치는 .agents/skills/에, 사용자 전체 설치는 ~/.agents/skills/에 있습니다. GitHub Copilot은 .github/skills/를 사용합니다. 새로 설치한 스킬이 나타나지 않으면 도구를 재시작하세요.
.impeccable을 git에서 제외하기
명령어를 실행함에 따라, Impeccable은 작업 파일들을 .impeccable/ 아래에 작성합니다: 비평 및 폴리싱 스크린샷, 라이브 모드 세션 및 미리보기 상태, 런타임 캐시, 그리고 개발자별 설정입니다. 이 중 대부분은 일시적(ephemeral)이며 커밋해서는 안 되지만, 일부 파일은 레포지토리에 포함되어야 하는 공유 프로젝트 아티팩트입니다. 다음 블록을 프로젝트의 .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.
...
이 블록은 # impeccable-ignore-start / # impeccable-ignore-end 마커로 감싸져 있어 나중에 인식하고 새로 고칠 수 있습니다. **/ 접두사는 활성 프로젝트의 .impeccable/ 디렉토리가 레포지토리 루트에 있든, apps/web/과 같은 중첩된 작업 공간 경로 아래에 있든 모든 패턴이 일치하도록 만듭니다.
다음 항목들은 추적해야 합니다 (공유 프로젝트 아티팩트이므로 .gitignore에 추가하지 마세요):