Hallmark 사용법 2026: AI 티 나는 UI를 줄이는 디자인 스킬

Hallmark 사용법은 프롬프트에 “예쁘게 만들어 달라”는 말을 덧붙이는 요령과는 다릅니다. Claude Code, Cursor, Codex가 습관처럼 내놓는 비슷한 히어로 영역, 3열 기능 카드, 그라디언트 CTA를 규칙으로 걸러내는 방식입니다.

Together AI가 공개한 이 오픈소스 디자인 스킬은 새 UI 제작 외에도 기존 화면을 살피는 audit, 구조를 다시 짜는 redesign, 참고 디자인의 특징을 읽는 study를 지원합니다. 설치법부터 실제 prompt, 기존 프로젝트에 적용할 때 주의할 점까지 정리했습니다.

2026-08-12 15:14 UTC 기준으로 공식 GitHub API와 README, package.json, SKILL.md, slop test 문서를 확인했습니다.

Hallmark 핵심 요약

• Claude Code, Cursor, Codex에 넣어 쓰는 AI 디자인 스킬입니다.
• 새 UI를 만드는 기본 기능에 audit, redesign, study가 더해져 있습니다.
• 현재 문서에는 theme 21개와 macrostructure 21개가 담겨 있습니다.
• npx skills add nutlope/hallmark 한 줄로 설치를 시작합니다.
• 현재 SKILL.md 기준으로 58개 slop-test gate와 6축 사전 자기평가를 거칩니다.
• UI를 대신 그려 주는 renderer가 아니라 coding agent가 따라야 할 설계 규칙입니다.

어떤 문제를 해결하나

AI가 만든 랜딩 페이지를 보다 보면 내용만 다르고 뼈대는 같은 경우가 많습니다. 가운데 큰 문구를 놓고 그 아래에 설명과 CTA를 붙인 뒤, 같은 크기의 card 세 개를 이어 붙이는 식입니다. 보라색과 파란색 gradient, 과한 glass effect, 별 의미 없는 badge까지 겹치면 서비스보다 “AI가 만든 화면”이라는 인상이 먼저 남습니다.

Hallmark는 색만 바꾸지 않습니다. brief를 읽고 페이지 형태부터 고른 다음 내비게이션과 footer, 글꼴, 간격, motion 규칙을 정합니다. brief가 다르면 화면의 뼈대도 달라야 한다고 보는 도구입니다.

물론 설치만으로 좋은 디자인이 나오지는 않습니다. agent가 규칙을 제대로 따르는지, 실제 화면에서 접근성과 반응형 layout이 맞는지 사람이 다시 봐야 합니다. 브랜드의 개성도 자동으로 생기지 않습니다.

작동 원리

작업은 기존 codebase를 훑는 데서 시작합니다. 사용 중인 framework와 font, 색상 token, 간격 기준, motion library를 확인하고 audience와 use case, tone에 맞는 macrostructure와 theme를 고릅니다. 내비게이션과 footer까지 정한 뒤 구현에 들어가며, 마지막에는 자기평가와 slop test로 결과를 다시 거릅니다.

사용 방식은 네 가지로 나뉩니다.

study는 화면을 그대로 베끼는 기능이 아닙니다. 공개 reference에서 구조적 특징을 읽되 유료 template이나 복제 요청은 거절합니다. URL을 건네면 HTML과 CSS에서 font와 color를 확인할 수 있습니다. 다만 실제 화면의 리듬까지 읽어 내지는 못하며, 이 한계는 공식 문서에도 적혀 있습니다.

theme 21개와 macrostructure 21개

theme가 색과 글꼴 같은 표면의 분위기를 맡는다면, macrostructure는 페이지 전체의 뼈대를 정합니다. 현재 catalog에는 Terminal, Midnight, Newsprint, Garden, Riso, Cobalt, Lumen, Grid를 포함한 theme 21개가 들어 있습니다. macrostructure에는 Bento Grid, Long Document, Marquee Hero, Workbench, Conversational FAQ, Manifesto 등이 있습니다.

연달아 만든 화면이 비슷해지는 것도 막습니다. CSS 상단의 stamp와 .hallmark/log.json을 읽어 최근 쓴 macrostructure를 피하고, 다음 theme에서는 명도와 display font의 성격, accent hue 중 하나 이상을 바꿉니다.

58개 slop-test gate

slop-test.md에는 현재 58개 검사항목이 있습니다. gradient text와 똑같은 3열 카드, transition-all, 가짜 browser chrome, 출처 없는 성과 수치, 낮은 contrast, 모바일 화면이 옆으로 넘치는 문제를 여기서 잡습니다. 320, 375, 414, 768px viewport와 prefers-reduced-motion 대응 여부도 확인합니다.

숫자는 문서마다 조금 다릅니다. README는 아직 “57개 gate”라고 쓰지만 최신 SKILL.md와 slop-test.md는 58개입니다. 설치된 skill 내부 문서를 기준으로 보는 편이 맞습니다.

설치 방법

권장 설치

프로젝트 terminal에서 공식 README의 명령을 실행합니다.

npx skills add nutlope/hallmark

설치할 때 사용할 coding agent와 적용 범위를 고릅니다. 나중에 같은 명령을 다시 실행하면 최신 버전으로 갱신됩니다.

skills는 agent skill 설치 도구입니다. npm에 등록된 동명의 hallmark package는 Markdown style guide라서 Nutlope의 design skill과는 전혀 다릅니다. npm install hallmark로 설치하면 안 됩니다.

수동 설치 위치

자동 설치를 쓰지 않는다면 공식 저장소의 skills/hallmark/SKILL.md와 references/를 각 도구가 읽는 위치에 복사합니다.

Cursor를 쓴다면 SKILL.md에서 frontmatter를 뺀 본문을 hallmark.mdc에 넣습니다. 세부 규칙을 제대로 읽게 하려면 references의 상대 경로도 그대로 유지해야 합니다.

Hallmark 사용법

아래 예시는 shell command가 아니라 Claude Code, Cursor, Codex의 대화창에 넣는 prompt입니다. 누구를 위한 화면인지, 사용자가 무엇을 해야 하는지, 어떤 분위기를 원하는지 적어 주면 결과를 비교하기 쉬워집니다.

새 landing page 만들기

Hallmark를 사용해서 오픈소스 로그 분석 CLI의 landing page를 만들어줘.
대상은 SRE와 platform engineer이고, 목표는 설치와 문서 확인이야.
기술적이되 과장되지 않은 tone으로 작성해줘.

audience와 use case를 적지 않으면 Hallmark가 한 번 되묻거나 주변 문맥에서 추론합니다. “알아서 해줘”라고 하면 질문을 생략합니다. 브랜드의 방향이 분명하다면 audience, use case, tone을 직접 써 주는 편이 낫습니다.

기존 화면 audit하기

hallmark audit src/app/page.tsx

audit은 파일을 건드리지 않고 문제만 정리합니다. 실제 화면을 바꾸기 전에 어디부터 손볼지 진단받고 싶을 때 쓰면 됩니다.

구조를 다시 설계하기

hallmark redesign src/app/page.tsx
기존 copy, route, component ownership은 유지하고 visual layer만 다시 설계해줘.

redesign은 기존 route와 component 구조를 유지하는 것이 기본입니다. route tree를 걷어내거나 framework까지 바꾸는 작업은 별도 범위로 요청해야 합니다.

참고 화면의 DNA 읽기

hallmark study https://example.com/reference

study를 실행하면 먼저 진단 report가 나옵니다. 내용을 확인한 뒤 “이 DNA로 만들어줘”라고 요청하면 참고 사이트의 문구를 베끼지 않고 사용자가 준 내용으로 새 화면을 만듭니다. 분석 결과를 다른 프로젝트에서도 쓰고 싶다면 lock the DNA라고 요청해 design.md로 남길 수 있습니다.

기존 프로젝트에 적용하는 순서

1. 작업용 branch를 만들고 현재 화면을 screenshot으로 남깁니다.
2. hallmark audit을 먼저 실행해 손볼 곳부터 확인합니다.
3. 바꿀 component와 그대로 둘 route, copy, token의 범위를 적습니다.
4. redesign 결과는 desktop과 320, 375, 414, 768px 화면에서 각각 확인합니다.
5. keyboard focus와 contrast, reduced motion, 가로 스크롤도 따로 살펴봅니다.
6. diff가 너무 크다면 페이지 전체를 한 번에 바꾸지 말고 section별로 나눕니다.

기존 global stylesheet는 덮어쓰지 말고 내용을 덧붙이도록 규칙이 잡혀 있습니다. 그래도 실제로 어떤 파일이 바뀌었는지는 diff로 직접 확인하세요. 디자인 규칙이 코드 변경의 안전성까지 책임지지는 않습니다.

도입 전 체크리스트

• Claude Code, Cursor, Codex 중 실제로 쓸 agent가 skill을 제대로 읽는지 봅니다.
• 새 UI를 만들지, component만 고칠지 범위부터 정합니다.
• audience와 사용자가 해야 할 일, 원하는 tone을 한 문장씩 준비합니다.
• 기존 color token과 font, spacing scale을 유지할지 결정합니다.
• reference URL이 공개 자료인지, 복제 권한에는 문제가 없는지 살펴봅니다.
• audit과 redesign을 구분하고 production code는 별도 branch에서 수정합니다.
• 58개 gate를 통과했다는 문구만 믿지 말고 실제 browser와 accessibility 도구로 다시 검사합니다.

현재 확인한 공개 정보

조회 시점은 2026-08-12 15:14 UTC입니다.

가장 최근 commit은 2026-08-06 16:19 UTC에 올라왔습니다. 21번째 theme인 Grid를 추가한 pull request를 merge한 내용입니다. 별도 GitHub Release가 없어서 version은 저장소의 package.json과 SKILL.md에서 확인해야 합니다.

Hallmark 정리

Hallmark가 노리는 것은 화려한 색 조합보다 뻔한 구조를 피하는 일입니다. 색을 고르기 전에 페이지 형태부터 정하고, audit과 redesign, study를 용도에 맞춰 나눠 씁니다. 반응형과 접근성도 마지막에 확인합니다.

디자인 품질까지 자동으로 보증해 주는 도구는 아닙니다. 어떤 model을 쓰는지, 기존 codebase가 어떻게 짜여 있는지, prompt를 얼마나 구체적으로 적었는지에 따라 결과가 달라집니다. 문서 안에서도 57개와 58개처럼 숫자가 맞지 않는 부분이 있으므로 설치된 파일을 기준으로 확인하세요.

처음에는 작은 랜딩 페이지나 component 하나부터 audit해 보세요. 팀에서 쓰는 token과 coding convention을 지키는지 확인한 뒤 redesign 범위를 넓히는 편이 안전합니다.

함께 보면 좋은 글

• Compound Engineering 사용법: plan, implement, review를 나눠 운영하는 AI 코딩 workflow입니다.
• Ponytail 사용법: coding agent가 필요 이상으로 구현하지 않도록 범위를 잡는 plugin입니다.
• Davia 사용법: codebase 문서를 AI agent가 읽기 좋은 형태로 관리하는 방법을 다룹니다.

FAQ

Hallmark는 독립 실행형 디자인 앱인가요?

아닙니다. Claude Code, Cursor, Codex가 읽는 skill 문서와 reference 파일을 묶어 놓은 프로젝트입니다. 별도로 실행하는 renderer나 web editor는 없습니다.

기존 프로젝트에서도 사용할 수 있나요?

가능합니다. 먼저 hallmark audit으로 진단만 받은 뒤 유지할 route와 component 범위를 정하고 redesign을 실행하세요.

Figma 화면을 그대로 복제할 수 있나요?

study는 화면을 그대로 복제하지 않습니다. macrostructure와 type role, color anchor 같은 특징만 읽어 냅니다. 화면을 그대로 복제하는 것이 목적이라면 이 skill과는 맞지 않습니다.

npm install hallmark로 설치해도 되나요?

안 됩니다. npm의 동명 hallmark package는 Markdown style guide 도구입니다. 공식 설치 명령인 npx skills add nutlope/hallmark를 사용하세요.

출처

• GitHub 저장소
• README 원문
• SKILL.md v1.1.0
• slop test 문서
• 공식 recipe
• live demo

AI/IT도구에서 이어서 보면 좋은 글

• Humanize KR 사용법: AI가 만든 한글 문장의 반복적인 표현을 찾아 자연스럽게 다듬는 도구입니다.
• LoopX 사용법 2026: 여러 세션에 걸친 agent 작업의 objective와 todo, evidence를 관리하는 control plane입니다.
• Orca 사용법 2026: 여러 AI coding agent의 workspace를 나눠 병렬로 운영하는 방법을 다룹니다.

AI/IT도구 전체 글 보기 · Daily Info Lab 블로그