사용 가이드로 건너뛰기
impeccable작성자 Paul Bakaus

Impeccable 스킬.

디자인 리뷰를 위한 Claude Code 및 Codex 스킬: 인터페이스를 디자인, 비평, 감사, 다듬기, 애니메이션 및 개선하는 올인원 스킬입니다.

  • Design Review & Accessibility
  • UI 코드
pbakaus/impeccable · plugin/skills/impeccable/SKILL.mdSKILL.md
--- name: impeccable description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, … --- ## Setup ## How to design ## Modes ## Commands
2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 11,912자

01 기능

impeccable 스킬이 Claude Code와 Codex에서 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

Impeccable은 디자인, 비평, 감사, 다듬기, 애니메이션, 리파인먼트를 통해 프런트엔드 인터페이스를 변화시킵니다. 웹사이트, 랜딩 페이지, 대시보드, 제품 UI, 컴포넌트, 폼, 설정, 온보딩, 빈 상태를 다루며—UX 리뷰, 시각적 계층, 접근성, 성능, 반응형 동작, 테마, 타이포그래피, 여백, 레이아웃, 색상, 모션, 마이크로 인터랙션, 디자인 시스템을 처리합니다.

이 스킬은 프로덕션급 코드, 최고 수준의 창의성, 명확한 관점, 뛰어난 완성도를 통해 일반적이지 않은 수준의 완성도를 제공합니다. 작업은 네 가지 모드—Persuade, Operate, Read, Experience—와 스무 개 이상의 전문 명령어를 중심으로 구성됩니다. 각 세션은 런처 스크립트를 통해 제품 컨텍스트, 시각적 세계, 표면 브리프를 로드한 다음, 명령어별 플레이북과 완성도 품질 기준을 따릅니다.

산출물

  • init 명령어를 통해 지속적인 제품 컨텍스트를 담아내는 PRODUCT.md
  • document 명령어를 통해 기존 프로젝트 코드에서 생성되는 DESIGN.md
  • extract 명령어를 통해 디자인 시스템으로 가져온 재사용 가능한 토큰과 컴포넌트
  • 완전한 결과물, 최고 수준의 창의성, 뛰어난 완성도를 갖춘 프로덕션급 UI 코드
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    세션 컨텍스트를 한 번만 로드

    세션당 한 번, 스킬 디렉터리에서 context 인자와 함께 impeccable 스크립트를 실행합니다.

  2. 02
    요청의 플레이북 불러오기

    명시적이거나 암시적인 서브 명령이 있는 경우 Commands 표 참조를 불러오고, 새로운 서피스나 대체 시각적 세계인 경우 new-work.md를 불러옵니다.

  3. 03
    편집 전에 craft-floor.md 읽기

    분석과 방향이 정해진 후, 작은 수정을 포함한 모든 UI 편집 직전에 craft-floor.md를 읽습니다.

  4. 04
    서피스 유형에 따라 모드 선택

    방문자가 결정하고 행동하는 랜딩 페이지와 마케팅에는 Persuade를 선택합니다. 방문자가 작업을 완료하는 앱 UI와 대시보드에는 Operate를 선택합니다.

  5. 05
    제한된 패스로 검증

    완전히 빌드한 후, 웹에서는 데스크톱과 모바일을 함께, 네이티브에서는 출시된 디바이스 클래스를 함께 다루는 일괄 라운드로 한 번 검사합니다.

02 적합성 확인

impeccable Skill을 사용해야 하는 경우

이러한 종류의 디자인 리뷰 작업일 때 Claude Code 또는 Codex에서 impeccable 스킬을 사용하십시오. 아래 적합성과 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • 사용자가 프런트엔드 인터페이스를 디자인, 재디자인, 형성, 비평, 감사, 다듬기, 명료화, 정제, 강화, 최적화, 조정, 애니메이션화, 색상화, 추출 또는 그 외의 방식으로 개선하려는 경우
  • 더 대담하거나 더 매력적으로 바뀌어야 하는 무난한 디자인
  • 더 조용해져야 하는 시끄러운 디자인
  • UI 요소에 대한 실시간 브라우저 반복 작업
  • 기술적으로 뛰어나게 느껴져야 하는 야심 찬 비주얼 효과

한계 인지하기

  • 백엔드 전용 작업

제공할 사항

  • 대상 파일 또는 라우트context 스크립트를 실행할 때 --target 플래그와 경로 인자를 사용해 명명된 소스 파일이나 라우트를 전달합니다.
  • PRODUCT.md런처가 불러오는 지속적인 제품 컨텍스트 파일입니다. 런처가 실패하면 누락된 컨텍스트를 임의로 만들지 말고 기존 파일을 직접 읽습니다.
  • 시각적 회귀 골든 또는 스크린샷 픽스처앱을 실행할 수 없는 경우 커밋된 시각적 회귀 골든이나 스크린샷 픽스처로 시작합니다.

03 스킬 내부

impeccable 스킬이 Claude Code와 Codex에 부여하는 규칙

에이전트에게 SKILL.md가 설정하는 6가지 구체적인 지침, 기본값 및 제한 사항입니다 — 결과를 바꾸는 파일의 핵심 부분입니다.

  1. 브리프가 우선합니다

    고정된 미학, 시대, 소재, 폰트, 팔레트는 과포화 패턴 경고와 충돌하더라도 존중합니다. 명확한 브리프를 자신의 취향 쪽으로 방향을 바꾸는 것은 실패입니다.

  2. 리파인먼트는 보존하고, 리디자인은 대체합니다

    리파인먼트는 기존의 아이덴티티, 동작, 문구, 그리고 범위 밖의 모든 것을 유지합니다.

  3. 시각적 권위는 근거이지 파일명이 아닙니다

    DESIGN.md가 없다는 것만으로는 프로젝트가 그린필드라고 할 수 없습니다. 신규 작업 플레이북은 시각적 증거를 기반으로 기존 결과물을 보존할지, 확장할지, 교체할지를 결정합니다.

  4. 루프가 아닌 제한된 패스 안에서 검증

    제한선은 스크린샷, 결함 스캔, 마이크로 수정, 재빌드를 포함한 전체 사이클을 포괄합니다.

  5. 드리프트를 부수 효과로 복구하지 않음

    CONTEXT_STALE 지시는 사용자가 명시적으로 요청하지 않는 한 보고만 하고 실행하지 않습니다. 유일한 예외는 auto로 표시된 결과로, 이는 해당 파일에 다음 쓰기가 발생할 때 어차피 수행됩니다.

  6. 런처 실패가 작업을 막지 않음

    스크립트가 거부되거나 실패하면 별도의 메시지를 보낸 후, 누락된 컨텍스트를 임의로 만들어내지 않고 기존 PRODUCT.md와 DESIGN.md를 직접 읽습니다.

04 활용하기

Claude Code 또는 Codex에 impeccable 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 impeccable 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/pbakaus/impeccable --skill impeccable

plugin/skills/impeccable/SKILL.md에 대한 일반적인 skills CLI 형식입니다. 리포지토리는 자체 경로를 문서화할 수 있습니다.

스킬에 첫 번째 디자인 리뷰 작업 부여

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt
Audit [src/components/SettingsPanel.tsx] for accessibility and responsive behavior, then polish the form layout and typeset the section headings to improve visual hierarchy. The panel should feel confident but scannable for users managing account preferences.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 최대 한 번 더 확인하고, 그 이후에는 다듬기를 멈춥니다
  • 제한된 검증 사이클의 일부로 결함 스캔을 실행합니다
  • 현재 토큰, CSS, 컴포넌트, 또는 애셋을 기준으로 대상과 최신성을 검증합니다
  • 테마 시스템 작업 시 테마 및 변형 캡처를 비교합니다

OpenDesign에서는 impeccable이 기본 포함되어 있습니다: Plugins → Skills에서 상단 바에서 선택하십시오.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Repository
github.com/pbakaus/impeccable 브랜치 main
스킬 파일
plugin/skills/impeccable/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 cb56ed6
License
Apache-2.0 LICENSE 기준; SKILL.md에는 "Apache 2.0"으로 표시됨.
리포지토리 스타
67,876 전체 pbakaus/impeccable 저장소에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. impeccable에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.

SKILL.md 내부

  1. 설정세션마다 컨텍스트 스크립트를 한 번 실행하고, 플레이북을 로드하고, 편집 전에 craft floor를 읽습니다
  2. 디자인하는 방법브리프가 우선하며, 리파인먼트는 아이덴티티를 보존하고 리디자인은 이를 교체합니다. 시각적 권위는 파일명이 아니라 증거입니다
  3. 모드랜딩 페이지는 Persuade, 대시보드는 Operate, 문서는 Read, 포트폴리오는 Experience
  4. 명령스무 개 이상의 명령이 Build, Evaluate, Refine, Enhance, Fix, Iterate 범주로 구성되어 있으며 참조 파일이 함께 제공됩니다
스킬 자체 설명
"사용자가 프론트엔드 인터페이스를 디자인, 재디자인, 형성, 비평, 감사, 다듬기, 명확화, 정제, 강화, 최적화, 적응, 애니메이션, 색상화, 추출 또는 개선하고자 할 때 사용합니다. 웹사이트, 랜딩 페이지, 대시보드, 제품 UI, 앱 셸, 컴포넌트, 폼, 설정, 온보딩 및 빈 상태를 다룹니다. UX 리뷰, 시각적 계층 구조, 정보 아키텍처, 인지 부하, 접근성, 성능, 반응형 동작, 테마, 안티패턴, 타이포그래피, 폰트, 간격, 레이아웃, 정렬, 색상, 모션, 마이크로 인터랙션, UX 카피, 오류 상태, 엣지 케이스, i18n, 재사용 가능한 디자인 시스템 또는 토큰을 처리합니다. 또한 더 대담하거나 즐거워져야 하는 평범한 디자인, 더 조용해져야 하는 시끄러운 디자인, UI 요소에 대한 실시간 브라우저 반복 작업, 또는 기술적으로 특별해야 하는 야심 찬 시각 효과에도 사용합니다. 백엔드 전용 또는 비UI 작업에는 사용하지 않습니다."

SKILL.md의 프론트매터 설명입니다. 전체 파일은 약 11,912자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

impeccable 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

내 요청에는 어떤 명령을 사용해야 합니까?

인자가 없으면 routing.md를 읽고 상황에 맞는 메뉴를 제시하며, 명령을 자동으로 실행하지 않습니다. 명시적이거나 명확히 암시된 요청의 경우 명령 표 참조를 로드합니다.

워크플로 또는 명령 선택에 관한 질문의 경우 routing.md의 Workflow questions 섹션을 읽으십시오. 그 외의 경우에는 일반적인 디자인 작업으로 취급합니다.

Impeccable

실제 디자인 검토 작업에서 impeccable 실행

impeccable 스킬은 OpenDesign에 포함되어 있습니다. 앱을 다운로드하고 Plugins → Skills에서 스킬을 선택한 다음 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

터미널
npx skills add https://github.com/pbakaus/impeccable --skill impeccable

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원