Hallmark – AI스러운 웹 디자인 기본값을 피하게 하는 에이전트 디자인 스킬

왜 필요한가
Hallmark가 강제하는 설계 규율
네 가지 작업 모드
새 페이지를 만드는 흐름
일반적인 프롬프트와 무엇이 다른가
설치와 적용
도입 전에 확인할 점
라이선스
관련 문서
참고 자료

Hallmark는 Claude Code, Cursor, Codex 같은 AI 코딩 에이전트가 웹 UI를 만들 때 반복되는 카드·보라색 그라디언트·중앙 hero 같은 익숙한 결과를 피하도록 설계한 오픈소스 디자인 스킬이다. Together AI가 만들었으며, 2026-08-06 기준 GitHub 스타 약 2.2만 개를 기록했다. 프레임워크나 컴포넌트 라이브러리가 아니라, 에이전트가 UI를 설계·검토할 때 읽고 따르는 SKILL.md와 참조 규칙 묶음이다.

출처: PyTorchKR, Hallmark 소개

왜 필요한가

LLM은 학습 데이터에서 자주 본 웹 패턴으로 수렴하기 쉽다. 요청이 달라도 결과가 hero, 기능 카드 3개, CTA, 푸터라는 같은 리듬을 반복하고 색만 달라지는 일이 생긴다. Hallmark는 이를 모델의 분포 내 기본값(on-distribution default) 문제로 보고, 색상만 바꾸는 대신 페이지의 큰 구조부터 다르게 선택하게 한다.

핵심은 예쁜 CSS를 추가하는 데 있지 않다. 먼저 콘텐츠 성격에 맞는 매크로구조(macrostructure)를 정하고, 테마·내비게이션·푸터·이미지 처리까지 한 묶음으로 고른다. 같은 프로젝트에서 연속으로 작업할 때는 이전 결과의 구조와 테마를 기록해, 다음 결과가 같은 지문(fingerprint)을 반복하지 않도록 한다.

Hallmark가 강제하는 설계 규율

공식 README는 20개 테마와 57개 슬롭 테스트 게이트를 내세운다. 세부 규칙은 계속 보완될 수 있지만, 실무에서 눈여겨볼 원칙은 다음과 같다.

규율	실제로 막는 문제	적용 예
구조 다양성	테마만 바꾼 동일한 랜딩 페이지	brief별로 다른 매크로구조를 먼저 선택한다
사전 자체 비평	결과를 내기 직전의 얕은 품질 검토	철학·위계·완성도·구체성·절제·다양성을 점수화하고 낮으면 다시 다듬는다
사실 기반 카피	근거 없는 전환율, 고객 수, 후기 생성	제공받지 않은 수치·로고·추천사는 넣지 않고 자리표시자나 다른 구조를 쓴다
디자인 토큰 고정	화면 중간에 임의 색상·폰트가 섞이는 문제	선택한 팔레트와 글꼴을 명명된 토큰으로만 참조한다
반응형 검증	데스크톱에서만 그럴듯한 결과	320, 375, 414, 768px에서 가로 스크롤·줄바꿈·그리드를 확인한다
UI 크롬 재현 금지	가짜 브라우저 창, 휴대폰 프레임, 코드창 장식	실제 스크린샷을 쓰거나 콘텐츠 자체를 보여 준다

이 규칙은 디자인 감각을 자동으로 만들어 주지는 않는다. 다만 에이전트가 잘못된 확신으로 흔히 만드는 패턴을 명시적으로 검사해, 리뷰어가 확인할 기준을 남긴다.

네 가지 작업 모드

호출	하는 일	적합한 상황
기본 모드	새 UI를 설계한다. 구조·테마를 고른 뒤 검사 규칙을 적용한다	신규 랜딩 페이지, 대시보드, 제품 소개 페이지
`hallmark audit <target>`	기존 코드를 안티패턴 기준으로 채점하고 우선순위가 있는 개선 목록을 낸다. 코드는 수정하지 않는다	디자인 리뷰 전, 리뉴얼 범위 정하기
`hallmark redesign <target>`	카피, 정보 구조(IA), 브랜드는 유지하고 시각 구조와 컴포넌트 표현을 바꾼다	내용은 맞지만 화면이 평범하거나 브랜드와 어긋날 때
`hallmark study <screenshot \| URL>`	참고 화면에서 매크로구조, 글꼴 조합, 색상 앵커 같은 디자인 DNA를 추출한다	좋은 레퍼런스를 분석해 내 제품에 맞게 재해석할 때

study는 픽셀 단위 복제나 유료 템플릿 복제를 목표로 하지 않는다. URL 또는 스크린샷에서 재사용 가능한 설계 원리만 뽑고, 필요하면 다른 AI 도구에 넘길 design.md 형태로 정리한다. 브랜드 도용이나 저작권 문제가 걱정되는 팀에는 이 경계가 특히 유용하다.

새 페이지를 만드는 흐름

Hallmark의 기본 모드는 대략 다음 순서로 작동한다.

기존 프로젝트의 글꼴, 색상 토큰, 여백 단위, 모션 라이브러리, 프레임워크를 읽는다. 이미 있는 디자인 시스템을 무시하고 새 스타일을 덮어쓰지 않기 위한 단계다.
대상 독자와 용도, 분위기를 파악한 뒤 매크로구조를 고른다. 구조 선택이 테마 선택보다 앞선다.
20개 명명 테마 중 하나를 적용한다. 창의적 의도가 명확해 기존 테마로 담기 어려우면 Custom 분기로 팔레트·타입·레이아웃을 새로 설계한다.
선택한 디자인 토큰으로 UI를 구현하고, 영웅 영역(hero)·내비게이션·푸터까지 페이지의 리듬에 맞춘다.
슬롭 테스트와 자체 비평을 거친다. 모바일 너비, 대비, 클릭 요소의 줄바꿈, 이미지 그리드 같은 구현상 문제도 이 단계에서 확인한다.

이 방식은 디자인 시스템을 대신하지 않는다. 기존에 design.md, 토큰 파일, 브랜드 가이드가 있다면 Hallmark는 그것을 우선 읽고 그 범위 안에서 구조적 변주를 만드는 쪽에 가깝다.

일반적인 프롬프트와 무엇이 다른가

접근	주된 지시	흔한 결과
“깔끔하고 현대적인 랜딩 페이지를 만들어 줘”	추상적인 미적 요구	모델의 익숙한 카드·그라디언트·CTA 조합으로 수렴하기 쉽다
CSS 라이브러리·컴포넌트 킷	재사용 가능한 UI 조각	일관성은 높지만 정보 구조와 페이지 리듬까지 바꾸지는 않는다
Hallmark	구조 선택, 토큰, 금지 패턴, 검토 절차를 함께 제공	brief마다 다른 페이지 형태를 유도하고 결과를 점검할 체크리스트를 남긴다

따라서 Hallmark는 완성된 UI 키트가 필요한 경우보다, AI 에이전트가 디자인 결정을 내리는 방식을 통제하고 싶은 경우에 맞다. 디자인 팀이 있는 조직이라면 디자이너를 대체하기보다, 초기 구현과 디자인 리뷰 사이의 공통 기준으로 쓰기 좋다.

설치와 적용

Skills CLI를 쓴다면 다음 한 줄로 설치한다.

npx skills add nutlope/hallmark

같은 명령을 다시 실행하면 업데이트할 수 있다. 수동으로 설치할 때는 저장소의 skills/hallmark/SKILL.md와 references/를 각 도구가 읽는 위치에 복사한다.

Claude Code: ~/.claude/skills/hallmark/
Cursor:      .cursor/rules/hallmark.mdc
Codex:       ~/.codex/skills/hallmark/ 또는 .codex/skills/hallmark/

Cursor에는 프론트매터를 제외한 SKILL.md 본문을 규칙 파일로 둔다. 프로젝트 전체에 같은 기준을 적용하려면 개인 설정 대신 프로젝트의 .codex/skills/처럼 저장소 안에 두고 팀과 함께 버전 관리하는 편이 낫다.

도입 전에 확인할 점

Hallmark는 지침 집합이므로 결과 품질은 실행하는 모델과 제공한 brief의 구체성에 영향을 받는다. 브랜드, 대상 사용자, 실제 카피와 자산을 함께 주어야 더 좋은 결과가 나온다.
audit은 개선 목록만 만든다. 자동 수정까지 기대한다면 redesign 또는 일반 구현 작업을 별도로 요청해야 한다.
기존 제품을 재설계할 때는 라우트, 컴포넌트 소유권, 정보 구조를 보존하도록 설계되어 있다. 여러 파일을 없애는 전면 재구축은 별도 합의가 필요하다.
외부 디자인을 study할 때는 분석 결과를 영감과 설계 언어 수준으로만 사용해야 한다. 원본의 화면·자산·유료 템플릿을 그대로 복제하면 안 된다.

라이선스

MIT 라이선스로 공개되어 개인과 상업 프로젝트에서 사용할 수 있다. 단, Hallmark가 읽는 참고 이미지·브랜드 자산의 사용 권한은 별도로 확인해야 한다.

참고 자료

Hallmark: AI 티가 나지 않는 웹 디자인을 만드는 코딩 에이전트 스킬 — PyTorchKR (2026-07-24)
Nutlope/hallmark — GitHub 공식 저장소
Hallmark 라이브 데모 — Hallmark 공식 사이트

Like?