2026년 7월, Nutlope/hallmark이라는 오픈소스 프로젝트가 GitHub Trending에서 미친 듯이 성장했습니다. 하루 만에 3,181개의 스타를 얻으며 10,000+ stars를 빠르게 돌파했죠. 이건 새로운 AI 모델도, 프로그래밍 프레임워크도 아닙니다. 바로 반 AI-slop 디자인 Skill입니다.
AI가 생성한 웹페이지가 죄다 똑같은 템플릿에서 찍어낸 것 같아서 질렸다면, Hallmark가 당신을 위한 해답입니다.
Hallmark란?
Hallmark은 Claude Code, Cursor, Codex 같은 AI 프로그래밍 도구를 위해 만들어진 오픈소스 "반 AI 느낌" 디자인 Skill입니다. Together AI 팀이 개발했으며, MIT 라이선스로 오픈소스화되었습니다.
왜 AI가 생성한 디자인은 늘 '똑같아' 보일까?
모든 대형 언어 모델은 같은 인터넷 데이터로 학습합니다. 그래서 기본값이 비슷한 '분포 중심'(on-distribution defaults)으로 수렴하게 되죠. 그 결과:
- 모든 랜딩 페이지는 hero + 3열 features + CTA 구성
- 컬러는 늘 그라데이션 + 흰색 카드
- 폰트는 늘 Inter / sans-serif
- 레이아웃도 거의一模一样
이 현상을 "AI slop" 이라고 부릅니다. AI가 생성한 콘텐츠가 마치 같은 틀에서 찍어낸 것처럼 보이는 현상이죠.
Hallmark은 어떻게 이 문제를 해결할까?
Hallmark의 핵심 메커니즘은 정말 똑똑합니다:
| 메커니즘 | 설명 |
|---|---|
| 21가지 매크로 구조 | 매번 21가지 레이아웃 중 무작위 선택, 구조 다양성 확보 |
| 20개 이상의 테마 | Distil, Cold Snap, Bubble, Garden, Riso 등 완전히 다른 스타일 커버 |
| 57개 slop 검출 게이트 | 생성 후 57가지 AI 흔한 디자인 안티패턴 자동 검출 |
| 출력 전 자체 검사 | 출력 전 자체 심사, 요구 조건을 충족하지 못하면 출력 거부 |
결과적으로: Hallmark로 생성한 두 페이지는 같은 템플릿의 색상만 바꾼 버전이 아니라, 완전히 다른 두 웹사이트처럼 보입니다.
Hallmark 설치하기
방법 1: npx 사용 (추천)
가장 간단한 방법은 npx skills add 명령을 사용하는 것입니다:
npx skills add nutlope/hallmark
이 명령은 Hallmark의 Skill 파일을 자동으로 AI 도구 설정 디렉토리에 다운로드합니다. 업데이트가 필요할 때 다시 실행하면 됩니다.
방법 2: 수동 설치
직접 관리하고 싶다면, SKILL.md와 references/ 폴더를 다운로드해서 다음 디렉토리에 넣으면 됩니다:
Claude Code:
mkdir -p ~/.claude/skills/hallmark/
# SKILL.md와 references/ 폴더를 안에 넣기
Cursor:
# 프로젝트 루트 디렉토리에 생성
mkdir -p .cursor/rules/
# SKILL.md 내용(frontmatter 제외)을 .cursor/rules/hallmark.mdc에 넣기
Codex:
# 개인 레벨 (전역)
mkdir -p ~/.codex/skills/hallmark/
# 프로젝트 레벨 (현재 프로젝트만)
mkdir -p .codex/skills/hallmark/
Hallmark의 네 가지 핵심 명령
Hallmark은 신규 구축부터 리팩토링까지 전체 워크플로우를 커버하는 네 가지 강력한 명령을 제공합니다:
1. hallmark (기본 명령)
가장 많이 쓰는 명령으로, 제로에서 새 UI를 구축할 때 사용합니다.
hallmark
이 명령은: - 요청한需求에 맞는 매크로 구조를 선택 - 규칙 집합 적용 - 57개 slop 테스트 실행 - 출력 전 자체 심사 수행
✅ 효과: 각 새 페이지마다 고유한 "디자인 지문"을 가져, 결코 같지 않음
2. hallmark audit <target>
기존 코드를 평가할 때 사용하며, 코드 내 AI-slop 안티패턴을 검출합니다.
hallmark audit src/components/LandingPage.jsx
이 명령은: - 대상 파일이나 디렉토리의 코드 분석 - 점수 부여 및 발견된 모든 AI 디자인 안티패턴 나열 - 수정 제안 목록 생성 - 코드를 수정하지 않음, 순수 진단
✅ 효과: 어디를 리팩토링해야 할지 빠르게 파악, 맹목적 재작성 방지
3. hallmark redesign <target>
기존 페이지를 리팩토링할 때 사용하며, 핵심 내용은 유지하면서 외관을 완전히 바꿉니다.
hallmark redesign src/pages/Home.jsx
이 명령은: - 기존 구조를 버림 - 카피, 정보 아키텍처, 브랜드 요소는 유지 - 완전히 새로운 디자인 지문으로 전체 페이지 재구축 - 새 디자인이 Hallmark의 반 slop 표준을 충족하도록 보장
✅ 효과: 한 번의 리팩토링으로 완전한 변화, 비즈니스 로직은 그대로 유지
4. hallmark study <screenshot | URL>
우수 디자인을 학습하여 디자인 DNA를 추출합니다.
hallmark study https://example.com/design-inspiration
이 명령은:
- 스크린샷 또는 웹페이지 URL 분석
- 매크로 구조, 폰트 페어링, 컬러 앵커 등 핵심 디자인 요소 추출
- 픽셀 단위 복제 및 유료 템플릿 거부
- 선택적으로 다른 AI 도구와 협업할 수 있는 휴대용 design.md 파일 생성
✅ 효과: 마스터급 디자인을 재사용 가능한 디자인 시스템으로 변환
실전 데모: 제로부터 랜딩 페이지 구축하기
Hallmark으로 모던 SaaS 제품의 랜딩 페이지를 만들어 봅시다:
- Claude Code 실행, Hallmark Skill이 활성화되어 있는지 확인
- 프롬프트 입력:
text Use hallmark to build a landing page for a SaaS product called "Hyperlane", which is a Dev Infrastructure monitoring platform targeting engineers, emphasizing real-time capability and reliability. - 출력 관찰: - Hallmark이 자동으로 "Hyperlane" 테마 선택 (공식 예제 중 하나) - 독특한 그리드 레이아웃과 컬러 스킴 사용 - 엔지니어 대상 전용 카피와 시각 요소 포함 - 생성된 HTML/CSS 파일에 사용된 매크로 구조를 표시하는 주석 포함
이것이 바로 Hallmark의 마법입니다. 더 이상 범용 템플릿이 아닙니다. 특정 제품에 맞춤화된 디자인이죠.
Hallmark의 디자인 철학
Hallmark 뒤에는 깊은 디자인 철학이 있습니다:
- 템플릿화 거부: "기본 테마"라는 개념 없음, 매번 완전한 새로 창작
- 다양성 수용: 21가지 매크로 구조로 구조 반복 방지
- 품질 우선: 57개 검출 게이트가 인간 디자이너보다 더 엄격
- 추적 가능성: 생성된 모든 HTML 파일에 디자인 지문을 표시하는 CSS 주석 포함
- 조합 가능성: 생성된
design.md를 다른 AI 도구로 가져와 디자인 파이프라인 형성 가능
정리
Hallmark은 단순한 CSS 프레임워크가 아닙니다. 디자인 사고를 가진 AI 에이전트입니다. AI 도구가 인간 디자이너처럼 생각하도록 가르칩니다: 문맥 이해, 브랜드 존중, 독창성 추구, 평범함 회피.
AI 디자인 도구가 범람하는 오늘날, Hallmark은 완전히 다른 접근 방식을 제시합니다. AI가 더 많은 것을 더 빠르게 생성하게 하는 것이 아니라, 더 적지만 더 나은 것을 생성하게 하는 것이죠.
🚀 지금 시작하기: 1. Hallmark 공식 사이트에서 모든 예제 확인 2. GitHub에서 Nutlope/hallmark에 Star 주기 3.
npx skills add nutlope/hallmark실행하여 반 AI-slop 디자인 여정 시작
이 글은 Hallmark v2.1.0을 기준으로 작성되었으며, 최신 버전은 GitHub 저장소에서 확인하세요.