Hallmark는 Claude Code가 만드는 웹페이지에서 AI가 만든 티를 걸러 주는 디자인 스킬입니다 | DAKER 커뮤니티

신문 콜라주풍 그림에서 찢어진 신문지 위에 웹페이지 시안 세 장이 테이프로 붙어 있고, 매끈한 그라데이션 시안에는 빨간 X 표시가, 실제 사진과 굵은 글자 블록으로 만든 시안에는 빨간 동그라미가 그려져 있으며, 돋보기와 색 견본, 붓을 든 로봇 손 옆에 「웹페이지의 AI 티를 지우는 디자인 스킬 Hallmark」 제목이 얹힌 10초 모션 영상 미리보기이고, 오른쪽 위에 Together AI 공식 로고가 있습니다
설명용 생성 이미지입니다. 10초 모션 영상 원본은 글 아래 첨부 파일에 있습니다.

2026년 10월 27일 오전 11시 35분(한국 시간) GitHub Trending 일간 1위는 Nutlope/hallmark입니다. 한 줄로 말하면 Hallmark는 Claude Code, Codex, Cursor, OpenCode 같은 코딩 에이전트가 웹페이지를 만들 때 AI가 만든 티가 나는 습관을 규칙으로 막고, 결과물을 실제 브라우저에서 검사해 걸러 내는 디자인 스킬입니다. README에는 Together AI가 만들었다고 적혀 있습니다. 해커톤 데모 페이지나 대회 결과 소개 페이지를 에이전트로 만드는 DAKER 참가자라면 한 번 써 볼 만합니다.

Hallmark는 무엇인가

저장소 설명은 Claude Code, Cursor, Codex를 위한 안티 AI 슬롭(AI가 찍어 낸 듯한 결과물) 디자인 스킬입니다. 2026년 10월 27일 오전 11시 40분(KST) GitHub API 기준 Hallmark 저장소의 스타는 36,584개, 포크는 1,907개이고, 주요 언어는 CSS, 라이선스는 MIT입니다. 저장소는 2026년 4월 28일(KST)에 만들어졌고, package.json에 적힌 현재 버전은 2.0.0입니다.

README에 따르면 Hallmark는 48가지 테마 목록에서 프롬프트에 맞는 테마 세 개를 고르고, 방문자가 그 페이지에서 하려는 일을 중심으로 페이지를 짭니다. 그다음 실제 브라우저에서 결과를 검사해 기계가 만든 것처럼 보이는 흔적을 찾습니다. README가 예로 드는 흔적은 모든 제목 위에 붙는 작은 머리말, 자간을 넓힌 대문자 라벨, 헤드라인에서 한 단어만 색을 바꾸는 표현, 화면에 맞지 않는 첫 화면, 모든 페이지 끝에 붙는 이메일 구독란, 실제로 아무것도 보내지 않으면서 감사 인사만 띄우는 폼입니다. 마지막 판단은 새 맥락에서 시작한 검토 에이전트가 내립니다.

검사 기준은 세 단계입니다. Floor는 명도 대비, 키보드 포커스, 움직임 줄이기 설정, 지어낸 사실, 깨진 휴대전화 레이아웃처럼 절대 내보내면 안 되는 기준입니다. Reflex는 모델이 습관처럼 빠지는 기본값으로, 이유가 있으면 기록을 남기고 넘길 수 있습니다. Finish는 완성도를 높이는 세부 점검이며 배포를 막지는 않습니다.

정보 카드에 GitHub Trending 일간 1위, Nutlope/hallmark, 스타 36,584개, CSS, MIT 라이선스, Made by Together AI, v2.0.0, 테마 48개, npx skills add nutlope/hallmark -g 설치 명령과 /hallmark redesign 및 /hallmark audit 명령, Claude Code와 Codex와 Cursor와 OpenCode, Node 18 이상이 영어로 적힌 이미지입니다
2026년 10월 27일 오전 11시 40분(KST) GitHub 기준 Hallmark 저장소 정보와 설치·사용 명령입니다.
Hallmark의 핵심은 예쁘게 만들어 달라고 부탁하는 대신, AI 티가 나는 패턴을 검사 기준으로 정해 두고 실제 브라우저에서 통과해야만 내보내게 한다는 점입니다.

Hallmark는 왜 지금 뜨나

첫째, 코딩 에이전트가 만든 웹페이지가 서로 비슷해 보이는 문제를 정면으로 다룹니다. Hallmark는 그 비슷함을 구체적인 패턴 목록으로 바꿔, 막연한 취향 문제가 아니라 검사할 수 있는 문제로 다룹니다. 2026년 10월 27일 오전 11시 35분(KST) GitHub 트렌딩 페이지에 표시된 오늘 받은 스타는 2,244개였습니다.

둘째, v2에서 기능이 크게 늘었습니다. README의 New in v2 항목에 따르면 테마 48개가 각각 종이, 글꼴, 색, 표면, 고유 컴포넌트와 질감을 가진 재료로 정리됐고, 예약 페이지는 예약을, 쇼핑 페이지는 판매를 하도록 페이지의 목적에서 구조를 짭니다. URL이나 개발 서버를 가리키면 실제 제품 화면을 직접 캡처하고, 공개 라이선스 사진 755장 가운데 주제에 맞는 사진을 골라 출처를 페이지에 표기합니다.

셋째, 한 번 설치하면 여러 하네스에서 같이 씁니다. README의 설치 표에 따르면 Claude Code는 홈 폴더의 .claude/skills/hallmark에, Codex CLI는 .agents/skills/hallmark에 설치되고, Cursor와 OpenCode는 이 사본을 찾아 씁니다. 저장소의 마지막 커밋은 2026년 10월 23일(KST)에 올라왔습니다.

Hallmark는 어떻게 써 보나

README의 설치 명령은 한 줄입니다. Node 18 이상이 필요하고, -g를 붙이면 모든 프로젝트에, 빼면 현재 프로젝트에만 설치됩니다.

npx skills add nutlope/hallmark -g

브라우저 검사(sloplint --render)와 스크린샷 기능까지 쓰려면 puppeteer-core와 Chrome이 더 필요합니다. 없어도 정적 검사는 돌아갑니다.

npm i -g puppeteer-core

Claude Code에서는 /hallmark 뒤에 만들고 싶은 페이지를 적거나, 그냥 새 페이지를 만들어 달라고 설명하면 됩니다. Codex CLI에서는 $hallmark로 부릅니다. 이미 있는 페이지는 이름을 붙여 다시 디자인하거나 점검만 할 수 있습니다.

/hallmark redesign ./src/app
/hallmark audit ./index.html

README에 따르면 redesign은 내용과 연결 구조를 유지한 채 디자인 체계와 레이아웃을 바꾸고, 링크, 입력란, 이벤트 핸들러, 제목이 하나라도 빠지면 실패로 처리합니다. audit은 고치지 않고 보고만 합니다. 스스로 실행되지 않으면 hallmark를 써서 만들라고 이름을 직접 부르라고 안내합니다. Claude Code 플러그인으로 설치하는 방법도 README에 따로 있습니다.

Hallmark는 어디에 쓰면 좋나

첫째, 해커톤 데모 페이지를 만들 때입니다. 마감 직전에 에이전트로 서비스 소개 페이지를 급히 만들면 어디서 본 듯한 그라데이션 배경과 구독란이 붙기 쉽습니다. Hallmark의 Floor 기준은 명도 대비와 휴대전화 레이아웃까지 확인하므로, 심사위원이 휴대전화로 열어 봐도 깨지지 않는 페이지를 만드는 데 도움이 됩니다.

둘째, 이미 만든 결과 페이지를 점검할 때입니다. /hallmark audit은 페이지를 고치지 않고 문제만 알려 주므로, 팀원이 만든 대회 결과 대시보드나 포트폴리오 페이지를 리뷰하는 용도로 쓰기 좋습니다.

셋째, 디자인 규칙을 에이전트에게 가르치는 방법을 배울 때입니다. 테마 하나가 8KB 이하의 파일 하나이고, 빌드 한 번에 테마 파일 하나만 읽는다는 구조는 직접 스킬을 만드는 팀에게 좋은 참고가 됩니다. MIT 라이선스라 고쳐 쓰기도 자유롭습니다.

다만 Hallmark는 지어낸 사실을 막기 위해 시작할 때 사진, 화면, 실제 숫자 같은 재료를 한 번 요청하므로, 대회 결과 수치나 팀 사진을 미리 준비해 두면 더 매끄럽게 씁니다. 여러분은 코딩 에이전트가 만든 페이지에서 어떤 부분이 가장 AI 티가 난다고 느끼시나요? 직접 고쳐 본 방법이 있다면 댓글로 나눠 주세요.

출처