AI가 만든화면, 왜 다비슷할까

중급자용깃허브 주간 인기 TOP10© AIKOREACLUB

pbakaus/impeccable

AI가 만든 화면, 왜 다 비슷할까

코딩 AI가 만든 웹 화면에서 'AI 티'를 찾아내고, "더 과감하게" 같은 막연한 말 대신 정해진 디자인 명령으로 고치게 해 주는 도구예요

★ 100,986 · 이번 주 +11,754에이전트 스킬 + 터미널 도구 · Apache-2.0확인 2026-11-03

클로드나 커서에게 "우리 가게 홈페이지 만들어 줘"라고 하면 꽤 그럴듯한 화면이 금방 나와요. 그런데 몇 번 해 보면 이상하게 다 비슷해요. 보라색 그라데이션, 둥근 아이콘, 상자 안의 상자.사람들은 이걸 'AI 티'라고 불러요. 임페커블은 그 AI 티를 찾아내고, 고칠 때 쓸 정확한 단어를 코딩 AI에게 쥐여 주는 도구예요. 지금 깃허브에서 이번 주에 가장 많이 별을 받은 AI 저장소예요.

AI 티, 이런 거예요

README가 꼽은 'AI 티' 다섯 가지예요. 아무 지시 없이 화면을 맡기면 모델이나 프로젝트가 달라도 이런 결과가 되풀이된다고 해요.

Build faster

Everything you need to ship.

Get started

글꼴 한 가지제목·본문·버튼이 다 같은 글꼴, 같은 굵기

Your AI copilot

Supercharge your workflow

Try free

보라→파랑 그라데이션고민 없이 고른 배경색

카드 안에 또 카드상자를 겹겹이 쌓은 배치

Pro plan

Unlimited projects and priority support for growing teams.

색 바탕에 회색 글자읽기 힘든 낮은 대비

Fast

Secure

Smart

제목마다 아이콘 타일뜻 없이 반복되는 둥근 네모

이해를 돕기 위해 저희가 그린 예시 그림이에요. 실제 AI 결과를 캡처한 게 아니에요.

한눈에

무엇인가요

임페커블은 세 가지를 코딩 AI에 붙여 줘요.첫째, 원하는 걸 정확히 말할 단어예요. "좀 더 눈에 띄게"라고 하면 AI가 짐작해야 하지만, /impeccable bolder the pricing cards 라고 하면 '더 과감하게' 한 동작만을 위해 쓴 지침을 꺼내 가격 카드 한 곳에만 적용해요.둘째, 검토자예요. critique는 사용성 기준으로 점수를 매겨 무엇부터 고칠지 순서를 정하고, audit는 접근성·속도·화면 크기 대응을 P0(출시를 막는 문제)부터 P3(다듬기)까지 나눠 보고해요.셋째, AI 티 감지기예요. 정해진 규칙 62개로 위의 다섯 가지와 좁은 여백, 건너뛴 제목 단계 같은 문제를 잡아요. 이 감지기는 AI 모델이나 API 키 없이 돌아가요.

함께 쓰는 도구 · 클로드 코드 · 커서 · 코덱스 · 깃허브 코파일럿 · 제미나이 CLI · 오픈코드

이런 분께

클로드 코드나 커서로 웹 화면을 만드는데 결과가 늘 비슷해 보이는 분
"좀 더 세련되게" 같은 막연한 요청 대신 정확한 디자인 지시어가 필요한 분
배포 전에 접근성, 화면 크기 대응, 속도 문제를 한 번에 점검하고 싶은 분

어떻게 작동하나요

프로젝트마다 처음 한 번 /impeccable init 을 돌리면, 코드를 읽고 코드만으로 알 수 없는 것(누구를 위한 제품인지, 무엇을 해야 하는지, 제약)만 물은 뒤 PRODUCT.md 를 써 둬요. 이후 모든 명령이 이 파일을 읽어요.이미 정한 디자인이 있으면 /impeccable document 로 DESIGN.md 를 만들어 두세요. 고칠 때도 우리 브랜드에서 벗어나지 않아요.README가 알려 주는 요령은 하나예요. 이미 있는 화면을, 한 부분씩 좁게 고칠 때 가장 강해요.

바로 쓸 수 있나요

도구 연결 필요

필요한 것클로드 코드, 커서, 코덱스 같은 코딩 에이전트. npx로 설치할 때만 Node가 필요하고, 압축 파일을 내려받아 폴더에 복사하면 Node 없이도 넣을 수 있어요

비용저장소는 무료(Apache-2.0). 쓰는 코딩 에이전트 요금은 따로예요

시작하기

설치
프로젝트 최상위 폴더에서 실행해요. 쓰고 있는 코딩 도구(클로드 코드, 커서, 코덱스 등)를 찾아내고, 이 프로젝트에만 넣을지 전체에 넣을지 물어요. 자동 검사 훅을 넣을지도 묻는데, README는 넣으라고 권해요.
```
npx impeccable install
```
클로드 코드만 쓴다면 이 방법도 돼요
플러그인 장터에서 추가한 뒤 /plugin 을 열어 Impeccable 을 설치해요.
```
/plugin marketplace add pbakaus/impeccable
```
코딩 도구 다시 열기
설치가 끝나면 클로드 코드나 커서를 껐다 켜요.
프로젝트 소개 파일 만들기
에이전트 대화창에서 실행해요. 코덱스에서는 $impeccable init 이에요.
```
/impeccable init
```
한 부분부터 검토
페이지 전체 말고 한 부분을 골라요. 결과로 점수와 고칠 순서가 나와요.
```
/impeccable critique the pricing cards
```

처음 해 볼 한마디

/impeccable critique the pricing cards

명령 뒤 고칠 곳은 우리말로 써도 되는지 README에 따로 적혀 있지 않아요. 처음엔 README 예시처럼 쓰는 편이 안전해요.

처음 쓰는 순서

init프로젝트 소개를 한 번 써 두기
critique한 부분을 골라 점수와 고칠 순서 받기
bolder · quieter · typeset 등나온 순서대로 명령 하나씩 적용
audit접근성·속도·화면 크기 점검
polish출시 전 마지막 손질

README에 나온 명령들을 처음 쓰는 순서로 묶은 예예요.

명령 하나로 이렇게 바뀌어요

SPRING COLLECTION

Fresh Flowers Delivered오늘 고른 꽃, 내일 아침 문 앞에

Elevate your space with beautiful arrangements.동네 꽃집이 직접 묶어 내일 오전에 가져다드려요.

Get Started꽃다발 고르기더 보기

Fresh

Fast

Local

아직 주문이 없어요마음에 드는 꽃다발을 골라 첫 주문을 해 보세요꽃다발 고르기

1대비가 낮아요2뜻 없는 아이콘3버튼 문구가 모호해요사용성 점수 예시

P0 · 글자 대비 부족P1 · 버튼 이름 없음P2 · 휴대폰에서 넘침

/impeccable 명령 고르기AI 티가 잔뜩 난 처음 화면

명령 뜻을 보여 주려고 저희가 그린 예시예요. 실제 결과는 프로젝트와 PRODUCT.md 내용에 따라 달라져요.

명령어 전체 23개, 언제 쓰나

방향 바꾸기

bolder: 무난하고 심심한 디자인을 과감하게
quieter: 너무 시끄러운 디자인을 차분하게
distill: 페이지에 필요 없는 것 덜어 내기
colorize: 회색뿐인 화면에 색 넣기
typeset: 글꼴·제목 위계·글자 크기 바로잡기
layout: 여백과 간격의 리듬 바로잡기
animate: 전환 효과와 누를 때의 반응 넣기
delight: 개성 더하기
overdrive: 셰이더, 튕기는 움직임, 스크롤 효과까지 끝까지

검토

critique: 점수를 매기는 사용성 검토, 고칠 순서까지
audit: 접근성·속도·테마·화면 크기 기술 점검, P0~P3 등급

마무리

polish: 출시 전 마지막 손질
harden: 오류, 다국어, 글자 넘침, 예외 상황
clarify: 헷갈리는 문구 다시 쓰기
adapt: 화면 크기와 기기 대응
optimize: 불러오기와 그리기 속도
onboard: 처음 쓰는 사람 안내 화면과 빈 화면

브라우저에서 바로

live: 실행 중인 화면에서 요소를 골라 여러 안을 바꿔 보고, 고른 안을 소스에 반영
generate: 이름을 대면 그 요소의 여러 안을 만들어 줌

계획·준비

shape: 코드 짜기 전에 화면 흐름 설계
init: PRODUCT.md 만들기
document: 지금 디자인을 DESIGN.md 로 정리
extract: 반복되는 모양을 디자인 시스템으로 묶기

명령 뒤에 고칠 곳을 붙여요. 예: /impeccable quieter the landing page, /impeccable harden checkout. 명령 이름 없이 하고 싶은 걸 말로 해도 돼요(/impeccable redo this hero section). 자주 쓰는 명령은 /impeccable pin audit 처럼 고정하면 /audit 한 단어로 불러요. 코덱스에서는 / 대신 $impeccable 을 써요. README는 24개라고 하는데, 24번째 craft는 없어지는 중인 옛 이름이라 표에서 뺐어요.

코딩 AI 없이도 쓸 수 있어요

크롬 확장 프로그램

같은 검사 결과를 아무 웹페이지 위에 겹쳐 보여 줘요. 내 사이트든 남의 사이트든 돼요.

열기 ↗

터미널에서 주소 검사

Node가 있으면 에이전트 없이 사이트 주소나 폴더를 검사해요. 주소를 검사할 때는 설치된 크롬이나 엣지를 써요. 글자 대비·작은 글씨 같은 규칙은 주소로 검사할 때만 돌아요.

npx impeccable detect https://example.com

비슷한 도구

임페커블은 이미 있는 화면을 고치고 검사하는 데 강하고, 아래 둘은 새 페이지를 처음부터 짓는 쪽이에요(각 README 기준).

AI 티 안 나는 웹페이지 만들기테마 50개 중 세 개를 먼저 고르게 하고 새 페이지를 짓는 쪽에 무게Nutlope/hallmark

코딩 AI에 디자인 감각 넣기사이트 247곳 분석으로 미술 방향을 정하고 공개 사진을 찾아 씀Leonxlnx/taste-skill

주의할 점

live 모드에서 문구 수정을 적용할 때 1분 안에 대화 중인 에이전트가 없으면, codex 나 claude 명령을 승인·권한 확인·격리를 끈 상태로 직접 실행해요. 시작할 때 환경 변수 IMPECCABLE_LIVE_COPY_AGENT=chat 으로 두면 대화창 안에서만 적용하고, off 면 적용 기능을 꺼요.
live 모드는 내 컴퓨터의 작업 폴더에서만 써야 해요. 배포된 사이트에 넣거나 보안 설정(CSP)을 풀어 쓰지 말라고 README가 경고해요.
클로드 코드에 설치된 훅은 모델의 명령을 거부해도 따로 실행되고, 첫 편집 때 검사 엔진을 내려받을 수 있어요. 자리를 비우고 돌리기 전에 설치된 훅을 확인하세요.
새 디자인을 시작할 때 impeccable.style 에서 디자인 방향 목록을 받아 와요. 원격 측정을 꺼도(npx impeccable telemetry off) 이 요청은 나가고, 꺼지는 건 어떤 방향을 골랐는지 남기는 익명 기록이에요. 프로젝트 이름·파일·코드·PRODUCT.md 는 보내지 않는다고 밝혀요.

낯선 말

에이전트 스킬 · 코딩 AI가 특정 일을 할 때 꺼내 읽는 지침 묶음이에요
훅 · 에이전트가 파일을 고칠 때 같은 순간에 자동으로 끼어 실행되는 명령이에요
AI 슬롭 · AI가 아무 고민 없이 만들어 낸 티가 나는 뻔한 결과물을 낮춰 부르는 말이에요
접근성 · 시력이 약하거나 키보드만 쓰는 사람도 화면을 쓸 수 있는지 여부예요
CI · 코드를 올릴 때마다 검사를 자동으로 돌리는 과정이에요

AI 답은 참고 자료예요. 법·세금·돈·건강처럼 삶에 큰 영향을 주는 일에서는 AI 답이 정답이 될 수 없어요. 최종 판단은 전문가나 공식 기관에서 확인하세요.