클로드 코드 디자인 스킬 Hallmark: AI 티 안 나는 웹페이지 설치법과 sloplint 검사 결과

Hallmark 디자인 스킬이 하는 일

클로드 코드나 코덱스에게 랜딩 페이지를 맡겨 보면 결과가 묘하게 닮아 있습니다. 가운데 큰 제목, 보라에서 파랑으로 넘어가는 그라데이션, 제목 위에 붙은 작은 영문 라벨, 똑같은 카드 세 장, 근거 없는 '10배 빠름' 같은 숫자까지. 바이브코딩으로 만든 사이트가 한눈에 티가 나는 이유가 대체로 이런 습관입니다.

Hallmark는 이 습관을 규칙으로 막는 디자인 스킬입니다. 스킬은 에이전트가 작업할 때 읽는 지침과 보조 스크립트 묶음이라서, 설치해 두면 클로드 코드, 코덱스, 커서, OpenCode가 새 페이지를 만들 때 Hallmark의 순서를 따릅니다. 만든 곳은 Together AI이고 라이선스는 MIT라 누구나 무료로 쓰고 고칠 수 있습니다.

11월 4일 기준 깃허브 별은 4만 7천 개를 넘었고, 이번 주 깃허브 트렌딩 주간 순위 맨 위에 올라 있습니다. 10월 22일에는 처음부터 다시 만든 v2가 나왔는데, 만든 사람은 발표 글에서 그때까지 별 3만 개, 설치 6만 회였다고 적었습니다.

v2의 뼈대는 세 가지입니다. 절대 넘으면 안 되는 바닥 규칙(Floor), 모델이 습관처럼 빠지는 기본값을 잡는 Reflex 규칙, 그리고 막지는 않고 다듬을 거리만 알려 주는 Finish 점검입니다. 바닥 규칙에는 글자 대비, 키보드 포커스 표시, 움직임 줄이기 설정, 지어낸 숫자나 후기 금지, 휴대폰 화면 깨짐 같은 항목이 들어 있습니다.

확대해서 보기 ↗

근거 [1] [2] [3]

같은 요청으로 만든 두 페이지 비교

공식 사이트에서 가장 먼저 볼 만한 건 'One prompt, two pages' 비교입니다. 왼쪽은 Opus 5.5에 요청만 주고 만든 페이지, 오른쪽은 같은 요청을 Hallmark 테마로 만든 페이지입니다. 가운데 손잡이를 끌면 두 페이지를 겹쳐 볼 수 있습니다.

예시는 세 가지입니다. 농장 기록 앱은 26건에서 0건, 은행 거래 대사 서비스는 11건에서 0건, 웹훅 API 소개 페이지는 18건에서 0건으로 나옵니다. 숫자는 Hallmark에 들어 있는 검사기 sloplint가 센 것이라, 결국 Hallmark 자기 기준으로 잰 결과라는 점은 감안하고 보는 게 맞습니다.

그래도 화면을 나란히 놓고 보면 차이는 숫자보다 분명합니다. 왼쪽은 흔히 보는 SaaS 템플릿 느낌이고, 오른쪽은 농장 지도 위에 이동 기록이 찍힌 화면처럼 그 서비스가 실제로 무엇을 하는지가 첫 화면에 나옵니다. Hallmark 문서가 말하는 '페이지는 방문자가 하러 온 일을 중심으로 짓는다'는 원칙이 이런 모습입니다.

확대해서 보기 ↗

근거 [2]

Hallmark 설치 방법: 클로드 코드, 코덱스, 커서

설치는 공식 안내대로 한 줄입니다. 아래 명령에서 -g를 붙이면 모든 프로젝트에서 쓰도록 사용자 폴더에 깔리고, 빼면 지금 있는 프로젝트에만 들어갑니다. Node 18 이상이 필요합니다. 특정 도구 하나에만 넣고 싶으면 --agent claude-code처럼 도구 이름을 붙이면 됩니다.

클로드 코드 플러그인으로 넣는 길도 있습니다. 클로드 코드 안에서 /plugin marketplace add nutlope/hallmark를 입력하고 /plugin install hallmark@hallmark로 설치하면 됩니다. 이 경우 부르는 이름이 /hallmark:hallmark로 바뀝니다.

저장소를 직접 받아서 넣을 수도 있습니다. 받은 폴더에서 node skills/hallmark/scripts/install.mjs를 실행하면 테마 50개와 참고 문서를 먼저 점검한 뒤 복사합니다. 리눅스에서 빈 사용자 폴더로 실행해 보면 '~/.claude, ~/.codex 같은 폴더가 없다'며 멈추고, --claude를 붙이면 ~/.claude/skills/hallmark에 약 6.9MB가 들어갑니다. 에이전트 도구를 아직 한 번도 실행하지 않은 컴퓨터라면 도구 이름을 직접 붙여야 한다는 뜻입니다.

설치 뒤에는 '/hallmark 동네 빵집 주말 예약 페이지 만들어 줘'처럼 부르거나, 그냥 새 페이지를 만들어 달라고 하면 됩니다. 저절로 켜지지 않으면 'hallmark를 써서 만들어 줘'라고 이름을 말하라고 안내합니다. 코덱스에서는 $hallmark로 부릅니다.

README의 도구별 설치 위치와 호출 방법. 윈도우는 사용자 폴더(%USERPROFILE%) 아래 같은 이름.

# 모든 프로젝트에서 쓰기 (클로드 코드, 코덱스 등)
npx skills add nutlope/hallmark -g

# 클로드 코드에만 넣기
npx skills add nutlope/hallmark -g --agent claude-code

# 브라우저 렌더 검사까지 쓰려면 (크롬 필요)
npm i -g puppeteer-core

근거 [1] [2]

sloplint로 AI 티 나는 페이지 검사하기

Hallmark에서 따로 떼어 써도 쓸모 있는 게 sloplint입니다. 이미 만든 HTML과 CSS 파일을 넣으면 AI가 만든 티가 나는 패턴을 줄 번호와 함께 찍어 줍니다. 리액트, 뷰, 스벨트 파일 안의 Tailwind 클래스도 읽고, node_modules나 dist 같은 폴더는 건너뜁니다.

저장소에는 일부러 나쁜 습관을 잔뜩 넣은 예제 페이지(slopped.html)가 들어 있습니다. 여기에 node sloplint.mjs를 돌리면 1초 남짓 만에 FAIL 24건, REFLEX 15건, WARN 4건이 나옵니다. h1의 보라에서 파랑 그라데이션 글자, 카드 안에 또 카드, Unleash와 Seamless 같은 홍보 단어, 아이콘 자리에 들어간 반짝이 이모지, 제목 위 '01 / FEATURES' 라벨이 모두 잡힙니다. '10x faster'처럼 출처 없는 숫자는 사용자가 준 숫자인지 다시 보라는 경고로 나옵니다.

실제 운영 중인 페이지에도 돌려 봤습니다. 이 블로그 홈 HTML 하나만 넣으면 FAIL 3건이 나옵니다. 키보드 포커스 표시가 없다는 것, 가로 넘침 설정, 그리고 사이트 이름과 분류를 가운뎃점으로 이어 붙인 메타 문구입니다. CSS 파일까지 같이 넣으면 FAIL 265건으로 늘어나는데, 그중 211건은 색 값을 변수(토큰)로 빼지 않고 직접 적었다는 항목이고, 여백이 4픽셀 단위가 아니라는 REFLEX가 318건입니다. 첫 화면 배경의 보라에서 파랑 그라데이션도 한 건 잡혔습니다.

그래서 숫자 자체를 디자인 점수로 읽으면 안 됩니다. Hallmark 기준은 꽤 엄격해서, 사람이 손으로 만든 사이트도 색 변수나 여백 단위 같은 코드 정리 항목에서 많이 걸립니다. 쓸 만한 건 상단 몇 줄입니다. 그라데이션, 이모지 아이콘, 지어낸 숫자, 포커스 표시처럼 방문자 눈에 바로 보이거나 접근성에 걸리는 항목부터 고치면 됩니다.

브라우저 렌더 검사(--render)를 붙이면 여덟 가지 화면 너비에서 페이지를 실제로 그려 보고 넘침과 겹침까지 봅니다. 이 기능은 puppeteer-core와 크롬이 있어야 하고, 없으면 위와 같은 정적 검사만 돌아갑니다.

확대해서 보기 ↗

# 저장소를 받은 뒤 아무 HTML 파일이나 폴더 검사
git clone https://github.com/Nutlope/hallmark.git
node hallmark/skills/hallmark/scripts/sloplint.mjs ./index.html

# CSS까지 같이 보기
node hallmark/skills/hallmark/scripts/sloplint.mjs ./index.html ./assets/style.css

근거 [1] [4]

테마 50개를 고르는 deal 방식

Hallmark v2의 테마는 레이아웃 틀이 아니라 재질에 가깝습니다. 종이 색, 글꼴 조합, 강조색 하나, 사진 쓰는 방식이 테마 파일 하나(8KB 이하)에 담겨 있고, 같은 테마라도 요청이 다르면 페이지 구조가 달라집니다. 공식 사이트 분류로는 에디토리얼 20개, 모던 미니멀 12개, 분위기형 9개, 놀이형 9개입니다.

테마는 카드 패를 돌리듯 세 개를 뽑아 줍니다. 저장소의 theme.mjs deal에 '주말 빵을 미리 주문받는 동네 빵집' 요청을 넣어 보니 Vellum, Almanac, Newsprint 세 개가 나왔습니다. Vellum은 양피지 색 바탕에 고딕 활자 제목, 남색 포인트 하나를 쓰는 테마고 'bakery'에 맞는다는 표시가 붙었습니다. 나머지 둘은 장르에 맞는다는 이유로 뽑혔습니다.

뽑힌 기록은 프로젝트의 .hallmark 폴더에 남고, 다음에 다시 뽑을 때 겹치지 않게 피합니다. 연달아 페이지를 만들어도 결과가 한 가지 모양으로 수렴하지 않게 하려는 장치입니다. 테마가 싫으면 'custom'이라고 말해 테마 없이 요청 내용만으로 디자인하게 할 수도 있습니다.

확대해서 보기 ↗

근거 [1] [2] [4]

Hallmark 비용과 주의할 점

스킬 자체는 무료입니다. 공식 사이트 안내대로 API 키도 필요 없고, 페이지에 들어가는 사진은 위키미디어 공용의 공개 라이선스 사진 755장 목록에서 골라 페이지에 출처를 붙입니다. Unsplash나 Pexels 같은 사진 사이트는 AI 도구가 사진을 고르는 것을 약관으로 막고 있어서 쓰지 않는다고 밝혔습니다.

다만 비용이 아예 없는 건 아닙니다. 페이지를 실제로 만드는 건 내가 쓰는 클로드 코드나 코덱스라서, 그 도구의 구독 사용량이나 API 요금은 평소처럼 나갑니다. Hallmark는 히어로를 먼저 따로 만들어 검사하고, 끝에 별도 하위 에이전트가 처음 보는 눈으로 다시 보는 순서라 간단한 페이지 하나에도 요청이 여러 번 오갑니다. 또 TOGETHER_API_KEY 환경변수를 넣어 두면 시안 이미지 생성(FLUX.1.1 pro) 단계가 켜지는데, 이건 Together AI 쪽 사용 요금이 따로 듭니다. 키를 넣지 않으면 이 단계는 아예 건너뜁니다.

기존 사이트는 이름을 불러야만 손댑니다. /hallmark redesign 경로를 주면 글과 링크, 폼 연결은 그대로 두고 생김새만 다시 만들고, /hallmark audit 경로는 고치지 않고 보고서만 냅니다. 리디자인 전에는 링크와 입력칸, 제목을 기록해 두고 끝난 뒤 하나라도 빠지면 실패로 처리합니다.

비슷한 도구로는 같은 주에 별 1만 1천 개를 받은 Impeccable(pbakaus/impeccable), Anthropic의 frontend-design 플러그인, taste-skill이 있습니다. Hallmark README도 이 셋을 참고했다고 밝힙니다. 스킬은 에이전트에게 파일을 읽고 명령을 실행하게 하는 지침이라, 어떤 스킬이든 설치 전에 저장소의 SKILL.md와 scripts 폴더를 한 번 열어 무엇을 실행하는지 보는 습관이 안전합니다.

근거 [1] [2] [4] [5]