‹ 스킬공유자료실#032 · 10월 7일 꿀팁

AI 티 지우는 디자인 스킬

임페커블 설치 한 줄 + 전체 명령어 24개

단계 4개따라 하기 약 10분
AI 공부방 오픈카카오톡 · 막히면 같이 공부해요
입장하기

한눈에 보기

1디자인 스킬 깔기한 문장이면 클로드가 알아서›2처음 1회 설정내 제품을 알려 주는 단계›3화면 다듬기마음에 안 드는 화면을 말로 고치기›4전체 명령어 24개이런 것까지 시킬 수 있어요›5막히면자주 나오는 것›
임페커블(Impeccable)은 클로드 코드·커서(Cursor)·코덱스(Codex) 같은 AI 코딩 도구에 디자인 감각을 넣어 주는 무료 스킬(Skill, AI에게 주는 작업 설명서)이에요. 깃허브 별 7만 개가 넘고(Apache-2.0, 상업 사용 가능), 코딩 도구 17개에서 쓸 수 있어요.

AI가 만든 화면이 다 비슷해 보이는 이유, 이른바 'AI 티' 5가지 — Inter 글꼴 남발, 보라→파랑 그라데이션, 카드 안에 카드, 색 배경 위 회색 글씨, 제목마다 둥근 사각 아이콘. 임페커블은 이런 걸 찾아서 고쳐요.

읽는 순서 — ① 설치 부탁하기 → ② 처음 1회 설정 → ③ 화면 다듬기 → ④ 전체 명령어 24개 → ⑤ 막히면.
준비물
  1. AI 코딩 도구 — 이 글은 클로드 코드 기준이에요. 아직 없다면 아래 "직접 명령어로" 한 줄로 설치하세요.
  2. 다듬고 싶은 화면이 있는 프로젝트 폴더 — 클로드 코드를 그 폴더에서 켜 주세요.
  3. 설치에 필요한 프로그램(Node.js)은 1단계에서 클로드가 확인하고 없으면 깔아 줘요.
직접 명령어로 하고 싶다면

클로드 코드 설치 — PowerShell(윈도우 기본 명령어 창)에 붙여 넣기.

irm https://claude.ai/install.ps1 | iex

Node.js 확인 — 버전 숫자가 나오면 돼요. 없으면 nodejs.org 에서 LTS를 설치하세요.

node -v
1

디자인 스킬 깔기한 문장이면 클로드가 알아서

다듬고 싶은 프로젝트 폴더에서 클로드 코드를 열고 아래 문장을 그대로 붙여 넣으세요.

이 프로젝트에 화면 디자인을 다듬어 주는 임페커블 스킬을 설치해 주세요. 깃허브 주소는 pbakaus/impeccable 이에요. 클로드 코드용으로 설정하고, 필요한 건 알아서 다 깔아 주세요.
직접 명령어로 하고 싶다면

PowerShell에서 내 프로젝트 폴더로 이동한 뒤 붙여 넣으세요. 쓰는 도구를 물으면 Claude Code를 고르세요.

npx impeccable install

클로드 코드만 쓴다면 클로드 코드 안에서 /plugin marketplace add pbakaus/impeccable 를 친 뒤 /plugin 목록에서 설치해도 돼요. 나중에 새 버전으로 바꿀 땐 npx impeccable update

이렇게 되면 성공 — 클로드가 "설치 끝났어요"라고 답해요. 클로드 코드를 한 번 껐다 켜 주세요.
2

처음 1회 설정내 제품을 알려 주는 단계

클로드 코드를 다시 켜고 이렇게 말하세요. 내 제품이 누구를 위한 건지 등 몇 가지를 물어보면 답하면 돼요.

임페커블 처음 설정을 시작해 주세요.
직접 명령어로 하고 싶다면
/impeccable init
이렇게 되면 성공 — 클로드가 제품 정보 메모(PRODUCT.md)를 만들었다고 알려 줘요. 이후 다듬기는 이 정보를 보고 움직여요.
3

화면 다듬기마음에 안 드는 화면을 말로 고치기

마음에 안 드는 화면이 있으면 이렇게 말해 보세요. 고칠 곳을 붙여서 말해도 돼요.

임페커블로 이 화면을 마지막으로 다듬어 주세요.
임페커블로 이 디자인을 평가해 주세요.
임페커블로 봐 주세요. 너무 심심하니까 더 과감하게 바꿔 주세요.
임페커블로 봐 주세요. 너무 요란하니까 차분하게 바꿔 주세요.
직접 명령어로 하고 싶다면

위 네 문장은 순서대로 아래 명령과 같아요. 모든 명령은 /impeccable 뒤에 붙여요.

/impeccable polish
/impeccable critique
/impeccable bolder
/impeccable quieter

뒤에 대상을 붙일 수 있어요(예: /impeccable polish settings). 문장으로 말해도 돼요(예: /impeccable redo this hero section).

자주 쓰는 명령은 /impeccable pin audit 처럼 고정하면 /audit 하나로 짧게 쓸 수 있어요.

4

전체 명령어 24개이런 것까지 시킬 수 있어요

아래 "하는 일"을 말로 시켜도 되고, 명령어로 쓸 땐 /impeccable 뒤에 왼쪽 이름을 붙여요. 표가 길어서 안에서 스크롤돼요. 설명은 공식 README 원문을 옮긴 거예요.

명령하는 일
init처음 1회 설정 — 제품 정보를 모아 PRODUCT.md 작성, 다음 할 일 추천
craft구상부터 제작까지 한 번에, 화면 보며 반복 수정
document지금 코드로 디자인 설명서(DESIGN.md) 만들기
extract다시 쓸 부품·색·크기 값을 디자인 시스템으로 뽑아내기
shape코드 짜기 전에 화면 구성 계획 세우기
critique디자인 평가 — 정보 순서, 알아보기 쉬운지, 느낌
audit기술 점검 — 접근성, 속도, 화면 크기 대응
polish마지막 다듬기 — 디자인 규칙 맞추고 공개 준비
bolder심심한 디자인을 더 과감하게
quieter너무 요란한 디자인을 차분하게
distill핵심만 남기고 덜어내기
harden오류 처리, 다국어, 글자 넘침, 예외 상황 챙기기
onboard첫 사용 화면, 빈 화면, 처음 써 보게 만드는 흐름
animate목적 있는 움직임 넣기
colorize전략적으로 색 넣기
typeset글꼴 선택, 글자 위계, 크기 바로잡기
layout배치, 간격, 시각적 리듬 바로잡기
delight쓰는 재미가 있는 순간 넣기
overdrive기술적으로 화려한 특수 효과 넣기
clarify헷갈리는 화면 문구 고치기
adapt다른 기기(휴대폰 등)에 맞추기
optimize속도 개선
live브라우저에서 요소별 다른 버전을 보며 고르기
generate브라우저에서 지정한 요소의 여러 버전을 자동으로 만들기
직접 명령어로 하고 싶다면

AI 없이 'AI 티' 검사만 하고 싶다면 아래처럼 해요. API 키(유료 AI 사용 열쇠)가 필요 없어요.

npx impeccable detect src/
npx impeccable detect https://example.com
5

막히면자주 나오는 것

"npx를 찾을 수 없다"고 나올 때 — 필요한 프로그램(Node.js)이 없는 거예요. 클로드에게 이렇게 말하고, 다 되면 창을 새로 연 뒤 다시 하세요.

임페커블에 필요한 프로그램을 알아서 깔아 주세요.

임페커블 명령이 안 보일 때 — 설치는 프로젝트 폴더 안에서 해야 해요. 그 폴더에서 클로드 코드를 다시 켜 보세요.

결과가 기대와 다를 때 — 2단계(처음 1회 설정)를 먼저 했는지 확인하세요. 제품 정보가 있어야 방향을 잘 잡아요.

커서·제미나이 CLI에서 쓰고 싶을 때 — 수동 설치는 추가 설정이 필요할 수 있어요. 처음엔 클로드 코드로 해 보는 걸 권해요.

확인한 것
  • 별 77,443·Apache-2.0·제작 Paul Bakaus — GitHub pbakaus/impeccable API (2026-10-06)
  • 설치·init·명령어 24개와 설명·pin·detect·클로드 코드 플러그인 설치·지원 도구 17개·'AI 티' 5가지 — 공식 README (2026-10-06, 명령 설명은 2026-10-07 README 원문 재확인)
  • 직접 설치해 돌려 보지는 않았어요. 공식 README 기준이에요.
AI 공부방 오픈카카오톡 · 막히면 같이 공부해요
입장하기
‹ 다른 자료 보러 가기

트렌드코어 스킬공유자료실 · 무료