Hallmark: AI 티가 나지 않는 웹 디자인을 만드는 코딩 에이전트 스킬

9bow · 7월 24, 2026, 1:30오전

Hallmark 소개

LLM 코딩 에이전트에게 웹페이지 디자인을 맡기면 결과물이 서로 비슷해지는 경향이 있습니다. 같은 그라디언트, 같은 카드 레이아웃, 같은 여백과 폰트 조합이 반복되는데, 이는 모델이 학습 과정에서 익숙해진 "분포 안의(on-distribution)" 기본값으로 수렴하기 때문입니다. 브리프가 서로 달라도 완성된 페이지는 결국 같은 템플릿의 색만 바꾼 것처럼 보이는 경우가 많습니다.

Hallmark 는 이 문제를 정면으로 겨냥한 디자인 스킬입니다. Claude Code, Cursor, Codex 에서 동작하며, Together AI가 만들었습니다. 브리프에 맞는 매크로구조(macrostructure)를 먼저 고르고, 스무 개의 테마 중 하나를 입힌 뒤, 57개의 슬롭 테스트 게이트와 결과를 내보내기 전 자체 비평(self-critique)을 거쳐 모델이 반사적으로 내놓는 기본값을 거부합니다. 서로 다른 두 브리프로 만든 페이지가 같은 템플릿의 색만 바꾼 결과가 아니라 실제로 다른 사이트처럼 느껴지도록 하는 것이 목표입니다.

Hallmark 는 프레임워크나 별도 런타임이 아니라, 에이전트가 읽고 따르는 규칙 모음(스킬)입니다. 규칙 자체는 SKILL.md 와 references/ 에 들어 있고, 결과물은 매크로구조가 CSS 주석에 표시된 자체 완결형 HTML 과 CSS 파일입니다. 아래에서는 Hallmark 가 제공하는 네 가지 동사, 브리프마다 다른 결과를 만드는 방식, 그리고 설치 방법을 정리합니다.

Hallmark 의 네 가지 동사

Hallmark 는 작업 성격에 따라 네 개의 동사로 나뉩니다.

만들기(기본) : 아무 인자 없이 호출하면 새 UI 를 만듭니다. 매크로구조를 고르고 규칙 집합을 적용한 뒤, 결과를 돌려주기 전에 슬롭 테스트를 실행합니다.
hallmark audit <target> : 기존 코드를 안티패턴 기준으로 채점합니다. 지적 목록(punch list)만 내놓고 코드를 직접 수정하지는 않습니다.
hallmark redesign <target> : 기존 구조는 버리되 카피 · 정보 구조(IA) · 브랜드는 유지한 채, 다른 지문(fingerprint)으로 다시 만듭니다.
hallmark study <스크린샷 또는 URL> : 마음에 드는 디자인에서 매크로구조, 타입 페어링, 컬러 앵커 같은 DNA 를 추출합니다. 픽셀 단위 복제와 유료 템플릿은 거부하며, 다른 AI 도구로 넘길 수 있는 이식 가능한 design.md 를 선택적으로 내보낼 수 있습니다.

브리프마다 다른 결과

Hallmark 로 만든 페이지는 각각 자체 완결형 HTML 과 CSS 로 구성되고, 어떤 매크로구조를 썼는지가 CSS 주석에 표시됩니다. 아래 네 페이지는 모두 서로 다른 브리프에서 나온 것으로, 스킬이 브리프에 맞춰 테마 · 구조 · 마감을 다르게 골랐습니다.

카탈로그의 어떤 테마로도 담기 어려운 창의적 의도가 브리프에 담겨 있으면, Hallmark 는 Custom 모드로 전환해 팔레트 · 타입 · 레이아웃을 처음부터 맞춤 설계합니다. 이때도 동일한 57개의 슬롭 테스트 게이트를 거치며, 밑에 깔린 템플릿은 없습니다. Custom 은 조용히 동작하는 분기라, 평범한 브리프에는 나타나지 않습니다.

Hallmark 설치

한 줄로 설치할 수 있습니다.

npx skills add nutlope/hallmark

업데이트가 필요하면 같은 명령을 다시 실행합니다. 또는 SKILL.md 와 references/ 를 직접 복사해 넣을 수도 있습니다.

Claude Code : ~/.claude/skills/hallmark/
Cursor : .cursor/rules/hallmark.mdc (프론트매터 없이 SKILL.md 본문만)
Codex : ~/.codex/skills/hallmark/ (개인) 또는 .codex/skills/hallmark/ (프로젝트 범위)

규칙 집합은 저장소의 SKILL.md와 references/에 들어 있고, 실제 사용 예시는 docs/recipes.md에 정리되어 있습니다.

Hallmark 의 라이선스

Hallmark 는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

Hallmark 라이브 데모

Hallmark 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다.

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~