AI사용팁
[허들링 클럽] impeccable 스킬 사용 가이드
시원2026. 11. 1.
🐧 AI 슬롭, 걷어내기 — impeccable 사용 가이드
릴스 보고 오셨죠? 부장님이 “10분 만에 AI로 뽑았다”던 그 보라색 대시보드, 퍼디가 고친 방법 그대로 알려드릴게요.
🤔 impeccable이 뭔가요?
코딩 에이전트(Claude Code 등)에게 “디자인 보는 눈”을 붙여주는 오픈소스 스킬이에요. AI가 만든 UI에서 자주 보이는 뻔한 패턴, 이른바 “AI 슬롭” 을 찾아내고 다듬어줘요.
🚨 이런 화면, 본 적 있죠? (AI 슬롭 체크리스트)
보라 → 파랑 그라데이션이 여기저기
카드 안에 또 카드
제목마다 붙어 있는 둥근 아이콘 / 이모지
모든 글자가 Inter 폰트
색 배경 위에 흐린 회색 글자
답답한 여백, 건너뛴 제목 단계
👉 2개 이상 체크됐다면, 아래 3단계를 따라 해보세요.
⚡ 3단계로 시작하기
1️⃣ 설치
고치고 싶은 프로젝트 폴더에서 터미널을 열고 실행해요.
bash
npx impeccable install💡 npx가 없다고 나오면 Node.js를 먼저 설치하세요 → https://nodejs.org2️⃣ 초기 설정 (꼭 하세요!)
Claude Code를 다시 열고 입력해요.
plain text
/impeccable init제품이 뭔지, 누가 쓰는지, 원하는 톤이 뭔지 물어보고 PRODUCT.md 파일을 만들어줘요.
⚠️ 이걸 건너뛰면 impeccable이 내 제품을 모르는 채로 고쳐서 결과가 무난해져요. 하면 내 제품에 맞게 고쳐줘요.
3️⃣ 진단하고 → 고치기
plain text
/impeccable critique 대시보드 화면어디가 왜 문제인지 점수와 함께 알려줘요.
plain text
/impeccable polish 대시보드 화면진단 결과를 바탕으로 실제 코드를 다듬어줘요.
💡 “앱 전체”보다 “로그인 화면”, “대시보드 상단 카드”처럼 범위를 좁힐수록 결과가 좋아요.
🧰 자주 쓰는 명령어
| 명령어 | 언제 쓰나요? |
|---|---|
| /impeccable critique … | 점수 매긴 UX 리뷰 — “뭐가 문제야?” |
| /impeccable audit … | P0~P3로 정리된 기술 이슈 리포트 |
| /impeccable polish … | 마지막 다듬기 — 가장 많이 쓰게 될 명령어 |
| /impeccable quieter … | 과한 그라데이션·효과를 차분하게 |
| /impeccable bolder … | 밋밋한 화면에 힘 주기 |
| /impeccable typeset … | 글꼴·글자 위계 정리 |
| /impeccable layout … | 레이아웃·여백 정리 |
| npx impeccable detect | 터미널에서 슬롭 감지기 실행 (규칙 62개, API 키 불필요) |
전체 명령어는 깃허브 README에서 확인할 수 있어요.
🛟 실패 없이 쓰는 팁
polish는 파일을 바로 수정해요.bash
git init && git add . && git commit -m "before"되돌리고 싶을 땐 git checkout .
/impeccable이 안 보이면 Claude Code를 완전히 껐다가 다시 열어보세요.❓ 자주 묻는 질문
Q. 무료인가요? A. 네, 오픈소스(Apache 2.0)예요. 단, Claude Code 같은 코딩 에이전트 사용료는 별도예요.
Q. 디자이너가 아니어도 쓸 수 있나요? A. 네. 오히려 디자이너가 아닌 분들이 “뭐가 어색한지” 감 잡기에 좋아요. critique 결과를 읽기만 해도 공부가 돼요.
Q. 피그마 파일도 고쳐주나요? A. 코드(HTML/CSS 등)를 다루는 스킬이에요. 피그마 디자인은 코드로 옮긴 뒤 사용하세요.
🐧 허들링 클럽
이 가이드는 허들링 클럽 릴스 〈부장님의 AI 디자인〉 편과 함께 만들었어요. 마카부장이 또 “내가 초안 줘서 편했지?” 할 때까지… 다음 편에서 만나요! 👋
도움이 됐다면 릴스에 ❤️ 와 저장, 그리고 디자인 고민 많은 동료에게 공유해주세요.