"AI가 만든 티" 안 나는 디자인을 목표로 하는 스킬, Hallmark

출처: Nutlope (Together AI) / GitHub 저장소
원문: https://github.com/Nutlope/hallmark

작성자: 팔복소프트-김팔복

한눈에 보기

• Hallmark는 Claude Code, Cursor, Codex에서 쓸 수 있는 디자인 스킬로, LLM이 습관적으로 만들어내는 뻔한 "AI 슬롭(slop)" 스타일의 UI를 피하는 것이 목표입니다.
• 타이포그래피, 색상, 레이아웃, 모션, 마이크로인터랙션에 대한 규칙을 하나의 룰셋으로 묶고, 결과물을 내보내기 전에 65개 항목의 "슬롭 테스트"와 자체 검토를 거칩니다.
• 기본 빌드 외에 audit(기존 코드 진단), redesign(구조 재설계), study(참고 디자인 분석)라는 4개의 동사(verb)로 동작합니다.
• 차별점은 study 모드입니다. 스크린샷이나 URL에서 디자인의 "DNA"(구조, 타입 페어링, 색상 앵커 등)를 추출해 진단 리포트를 만들고, 이를 다른 AI 도구가 읽을 수 있는 design.md 파일로 내보낼 수 있습니다.
• 유료 템플릿이나 경쟁사 페이지의 추출은 거부하는 등, 무단 복제를 막기 위한 제한 장치가 함께 들어 있습니다.

주요 내용

어떤 프로젝트인가

AI 코딩 도구로 랜딩 페이지를 만들어 보면 누구나 비슷한 경험을 합니다. 보라색 그라데이션, 가운데 정렬된 히어로, "Built for the modern team" 같은 카피까지, 어느 도구를 써도 결과물이 서로 닮아 있다는 점입니다. Hallmark는 이런 "학습 분포상의 기본값"을 의도적으로 거부하도록 설계된 스킬입니다. Together AI에서 만들었고 MIT 라이선스로 공개되어 있습니다.

동작 방식은 이렇습니다. 요청(brief)을 받으면 먼저 4개 장르(editorial, modern-minimal, atmospheric, playful) 중 하나로 라우팅하고, 21개의 이름 붙은 페이지 구조(macrostructure) 중 하나를 고른 뒤, 22개 테마 중 하나를 입힙니다. 그리고 코드를 내보내기 전에 65개 게이트로 구성된 슬롭 테스트를 돌립니다. 하나라도 걸리면 빌드 실패로 처리합니다.

65개 게이트 슬롭 테스트

슬롭 테스트의 항목을 보면 이 프로젝트가 무엇을 문제로 보는지 알 수 있습니다. 페이지당 폰트 패밀리 3개 제한, 포커스 링은 border가 아닌 outline으로 처리(레이아웃 시프트 방지), APCA/WCAG 대비 기준, "AI 냄새 나는" 내비게이션·푸터·히어로 구조 감지, 근거 없이 지어낸 지표 수치 금지, 이모지를 기능 아이콘으로 쓰는 패턴 금지 같은 것들입니다. 실무에서 자주 지적되는 프런트엔드 디테일이 상당 부분 규칙화되어 있는 셈입니다.

같은 프로젝트에서 반복 실행할 때를 위한 장치도 있습니다. .hallmark/log.json에 각 실행의 구조와 테마를 기록해 두고, 다음 실행 시 최근 기록을 읽어 같은 모양이 반복되지 않도록 합니다. 연속된 두 테마는 배경 톤, 디스플레이 서체 스타일, 액센트 색조 중 최소 한 축에서 달라야 한다는 규칙도 있습니다.

4개의 동사

명령이 수십 개로 쪼개져 있는 대신, 4가지 사용 방식으로 정리되어 있습니다.

기본 모드는 새 UI를 만드는 것이고, audit는 기존 코드를 안티패턴 기준으로 점수화해 수정 목록만 뽑아줍니다(코드는 건드리지 않음). redesign은 카피와 정보 구조, 브랜드는 유지하면서 페이지 구조를 완전히 다시 짭니다.

가장 특징적인 것은 study입니다. 사용자가 마음에 들어하는 디자인의 스크린샷이나 URL을 주면, 픽셀을 베끼는 대신 그 디자인의 구조적 특징을 분석해 리포트를 만듭니다. URL 모드는 HTML/CSS를 직접 읽어 실제 폰트명과 색상 토큰까지 명시하고, 이미지 모드는 폰트를 특정하지 않고 역할(role)만 설명합니다. 분석 결과를 바탕으로 자신의 콘텐츠를 재구성하거나, Cursor·v0·Bolt 같은 다른 AI 도구에 넘길 수 있는 휴대용 design.md 파일로 잠글(lock) 수도 있습니다.

무단 복제를 막는 거부 규칙

study가 사실상 "디자인 베끼기 도구"가 되지 않도록 여러 제한이 걸려 있습니다. 유료 템플릿 마켓 목록이나 경쟁사 페이지는 자동으로 거부하고, 픽셀 단위 복제는 하지 않습니다. 특히 design.md로 내보내는 단계는 진단 자체보다 더 엄격해서, 제3자 URL 기반 내보내기는 "본인 사이트이거나 본인 브랜드의 공개 레퍼런스"라는 사용자 확인을 요구합니다.

설치와 사용

설치는 한 줄입니다.

npx skills add nutlope/hallmark

또는 SKILL.md와 references/ 폴더를 Claude Code의 ~/.claude/skills/hallmark/나 Cursor의 .cursor/rules/hallmark.mdc로 복사해도 됩니다. 데모 사이트(usehallmark.com)에서는 T 키로 22개 테마를 순환하며 볼 수 있는데, 테마를 바꾸면 색만 바뀌는 게 아니라 히어로·내비게이션·푸터 구조 자체가 재구성됩니다.

비슷한 도구들과의 차이

README에서는 Anthropic의 frontend-design 스킬, Open Design, Dembrandt와 비교하고 있습니다. 요약하면 frontend-design은 금지 목록과 브리프 중심, Open Design은 72개 브랜드 프리셋 메뉴, Dembrandt는 라이브 URL에서 토큰을 추출하는 스크래퍼에 가깝습니다. Hallmark는 참고 디자인을 분석해 DNA를 뽑되 복제와 제3자 추출에는 거부 규칙을 두는 접근이 차별점이라는 주장입니다. 다만 이 비교표는 프로젝트 저자의 관점이라는 점은 감안할 필요가 있습니다.

정리

AI 코딩 도구의 결과물이 서로 닮아가는 문제를 프롬프트 팁이 아니라 검증 가능한 룰셋과 게이트로 풀어보려는 시도입니다. 65개 슬롭 테스트 항목 자체가 "AI스러운 UI란 무엇인가"에 대한 구체적인 체크리스트라서, 스킬을 설치하지 않더라도 규칙 파일을 읽어보는 것만으로 참고 가치가 있습니다. 참고 디자인 분석(study)과 복제 거부 규칙을 함께 설계한 점도 눈여겨볼 부분입니다.

• Claude Code
• Cursor
• AI 코딩 도구
• 프런트엔드 디자인
• 오픈소스