AI 티 안 나는 사이트 만드는 도구 3개 + 설치 없이 쓰는 문장

1. 임페커블 (Impeccable) — 옆에 앉은 디자이너

클로드한테 끼우는 디자인 스킬이에요. AI 티를 잡아내는 규칙을 62개 갖고 있고, 디자인 명령이 24개 들어 있어요.

스킬이 뭐예요? 클로드한테 특기 하나를 더 가르치는 파일이에요. 필요할 때만 꺼내 써요.

사진: 임페커블 공식 저장소 첫 화면

설치 (프로젝트 폴더에서 터미널로):

npx impeccable install

그다음 클로드 코드에서 한 번만:

/impeccable init

init은 "이 서비스는 누가, 왜 쓰는지" 같은 정보를 물어보고 PRODUCT.md로 정리해 둬요. 그래야 이후 명령들이 내 서비스에 맞게 고쳐요.

자주 쓰는 명령 — 모양은 /impeccable <명령> <대상>이에요.

예를 들면 이렇게 써요.

/impeccable critique landing

/impeccable polish settings

이미 올라가 있는 사이트를 검사하고 싶으면 터미널에서:

npx impeccable detect https://내사이트주소

팁: 자주 쓰는 명령은 /impeccable pin audit처럼 고정하면 /audit 한 단어로 부를 수 있어요.

2. 디자인 MD (awesome-design-md) — 따라 그릴 견본

DESIGN.md는 "이 사이트는 이런 색, 이런 글씨, 이런 간격, 이런 버튼을 써요"를 글로 적은 디자인 규칙 파일이에요. 구글 Stitch가 내놓은 개념이고, 그냥 마크다운 파일이라 AI가 제일 잘 읽어요. 이 저장소는 실제 서비스들(Vercel, Linear, Notion, Supabase, Cursor 등)의 DESIGN.md를 84개 모아 뒀어요. 설치할 건 없어요.

사진: 저장소의 DESIGN.md 목록 일부

쓰는 법:

1. 깃허브 목록에서 마음에 드는 서비스 하나를 골라요
2. 그 DESIGN.md 파일을 받아 내 프로젝트 맨 위 폴더에 넣어요
3. 클로드한테 이렇게 말해요

프로젝트에 넣어 둔 DESIGN.md의 색, 글씨체, 간격, 버튼 규칙을 따라서 이 페이지를 다시 디자인해 줘. 규칙에 없는 건 그 느낌에 맞춰서 정하고, 바꾼 부분을 목록으로 알려 줘.

평균 말고 그 규칙대로 만들어져요. 남의 브랜드를 그대로 베끼기보다 느낌만 빌려서 색과 글씨는 내 걸로 바꿔 쓰는 걸 추천해요.

DESIGN.md의 간격·버튼·레이아웃 규칙은 그대로 따르고, 색은 [내 브랜드 색]으로, 로고와 이름은 내 걸로 바꿔 줘.

3. 홀마크 (Hallmark) — 넘기기 전 검수자

다 만들고 넘기기 전에 실제 브라우저로 8가지 화면 폭(폰·태블릿·컴퓨터)에서 검사해서, AI 티가 남아 있으면 걸러내요. 마지막엔 새 눈으로 보는 검토자가 한 번 더 봐요.

사진: 홀마크 공식 저장소 첫 화면

잡아내는 AI 티 예시: 모든 제목 위에 붙은 작은 머리글, 자간 넓힌 대문자 라벨, 제목에 한 단어만 색칠, 빈 틀만 가득한 페이지, 화면에 안 맞는 첫 화면, 모든 페이지 끝의 이메일 구독 칸, 아무것도 안 보내면서 "감사합니다"만 뜨는 폼.

설치 (클로드 코드 입력칸에 한 줄씩):

/plugin marketplace add nutlope/hallmark

/plugin install hallmark@hallmark

부를 땐 /hallmark:hallmark. 다른 AI 코딩 도구에서는 터미널에서 (Node 18 이상):

npx skills add nutlope/hallmark -g

브라우저 검사까지 하려면 크롬과 이것도 필요해요 (없으면 코드만 보는 검사만 돼요):

npm i -g puppeteer-core

이미 만든 페이지에 쓰기:

• /hallmark audit <경로> — 고치지 않고 보고만
• /hallmark redesign <경로> — 내용과 연결(링크·폼·버튼 동작)은 지키고 디자인만 새로. "레이아웃은 유지해"라고 하면 스타일만, "polish"라고 하면 티만 걷어 내요

명령 모양은 README 예시 기준이에요. 클로드 코드 플러그인으로 깔았다면 /hallmark:hallmark 뒤에 하고 싶은 일을 말로 붙여도 돼요.

덤: 처음부터 만들 땐 테마 48개 중에서 내 부탁에 맞는 3개를 골라 줘요. 테마 없이 내 서비스만의 느낌을 원하면 "custom"이라고 말하세요.

이미 만든 사이트, 이 순서로 고치세요

1. 진단: /impeccable critique 또는 /hallmark audit로 뭐가 문제인지 먼저 보기
2. 방향: 마음에 드는 DESIGN.md를 하나 넣고 "이 느낌으로"
3. 다듬기: /impeccable typeset, layout, polish
4. 검수: /hallmark audit로 8가지 화면 폭 최종 확인

설치 없이 쓰는 문장

아무것도 안 깔고, 디자인 부탁할 때 이걸 같이 붙여넣으세요. AI가 흔히 내놓는 "평균 디자인"을 피하라는 기준을 미리 주는 거예요.

이 사이트를 디자인할 때 "AI가 만든 티"가 나지 않게 해 줘. 아래는 피해 줘.

- 보라색에서 파란색으로 번지는 그라데이션 배경
- 카드 안에 또 카드를 넣는 구조
- 모든 글씨를 Inter 한 가지로 쓰는 것
- 색깔 배경 위에 흐린 회색 글씨
- 모든 제목 위에 작은 머리글을 붙이는 것, 제목에서 한 단어만 색칠하는 것
- 모든 섹션이 "큰 제목 + 설명 + 카드 3개"로 똑같이 반복되는 구성
- 의미 없는 반짝이 아이콘, 장식용 이모지

대신 이렇게 해 줘.

- 먼저 이 사이트의 분위기를 세 단어로 정하고, 그에 맞는 색 2~3개와 글씨체 조합을 제안해 줘
- 제목용과 본문용 글씨체를 다르게 골라 줘 (한국어가 잘 보이는 것으로)
- 섹션마다 배치를 다르게 해서 리듬을 만들어 줘
- 버튼, 여백, 모서리 둥글기 규칙을 하나로 정해서 전체에 똑같이 적용해 줘
- 폰 화면에서 먼저 보기 좋게 만들어 줘

시작하기 전에 분위기 세 단어와 색·글씨체 제안부터 보여 주고, 내가 고르면 그때 만들어 줘.

꼭 기억할 것

도구가 AI 티는 걷어 줘도, 어떤 느낌으로 갈지는 여전히 내가 골라야 해요. 마음에 드는 사이트를 미리 몇 개 모아 두면 고르기가 훨씬 쉬워요.

출처

• pbakaus/impeccable
• VoltAgent/awesome-design-md
• Nutlope/hallmark