🎨 AI가 만든 홈페이지 티 안 나게! 하루 만에 별 2천 개 받은 클로드 코드 디자인 스킬 'Hallmark' 정리

Hallmark 대표 이미지: "The design skill that ends AI slop." (출처: Hallmark 깃허브)

클로드 코드나 커서로 랜딩 페이지를 만들면 묘하게 다 비슷하게 생겼죠. 보라색 그라데이션, 제목 위 작은 대문자 영어, 똑같은 카드 3개… 이른바 'AI 슬롭(AI slop)' 디자인이에요. 이걸 정면으로 막겠다는 디자인 스킬 Hallmark가 오늘 깃허브 트렌딩 상위에 올라왔어요. 하루에만 별이 2천 개 넘게 붙었고, 누적 별은 약 4만 1천 개예요.

🎨 Hallmark가 뭔가요

✨ v2에서 달라진 점

테마 예시 'Atelier': 향수 공방 페이지 (출처: Hallmark 깃허브)

🔍 'AI 티'를 어떻게 잡나

1. 사전 점검: 프로젝트의 글꼴·색·프레임워크를 읽고, 사진·스크린샷·실제 숫자를 한 번 물어봐요. 지어낸 내용은 쓰지 않아요.
2. 테마 제안: 프롬프트에 맞는 테마 3개를 골라 줘요.
3. 첫 화면 먼저: 맨 위 히어로 영역만 먼저 만들어 렌더링하고 검토해요.
4. sloplint 검사: 완성된 페이지를 8가지 화면 폭에서 실제 브라우저로 열어 AI 티 나는 패턴을 검사하고, 서브에이전트가 새 눈으로 다시 리뷰해요.

검사 기준은 3단계예요.

테마 예시 'Dusk': 은행 대사 서비스 페이지 (출처: Hallmark 깃허브)

🛠 설치

npx skills add nutlope/hallmark -g

-g 를 빼면 현재 프로젝트에만 설치돼요. Node 18 이상이 필요하고, 브라우저 검사까지 쓰려면 npm i -g puppeteer-core 와 크롬이 있어야 해요(없어도 기본 검사는 돼요).

클로드 코드 플러그인으로도 깔 수 있어요: /plugin marketplace add nutlope/hallmark → /plugin install hallmark@hallmark

💬 정리하면

• AI로 만든 페이지의 뻔한 디자인을 자동으로 걸러 주는 무료 스킬
• 테마 50개, 리디자인·검사, 실제 브라우저 8가지 폭 검사
• 클로드 코드·코덱스·커서에 명령 한 줄로 설치

여러분이 본 'AI 티 나는 디자인' 특징은 뭐가 있었나요? 댓글로 알려 주세요!

출처: Hallmark 깃허브 (Nutlope/hallmark), Together AI