Hallmark는 Claude Code, Cursor, Codex에서 웹 UI를 만들 때 “AI가 만든 것처럼 보이는” 반복 패턴을 줄이기 위한 디자인 스킬이다. Together AI가 만든 프로젝트로, brief에 맞는 macrostructure와 theme를 고르고 slop-test gate를 통과한 뒤 결과를 내는 방식을 표방한다.
네 가지 사용 모드
| 명령 | 역할 | |
|---|---|---|
| 기본 | 새 UI를 만든다 | |
hallmark audit <target> | 기존 코드를 anti-pattern 기준으로 점검한다 | |
hallmark redesign <target> | 기존 copy·IA·brand는 유지하고 구조를 다시 잡는다 | |
`hallmark study | URL>` | 참고 디자인의 구조·타입·색상 DNA를 추출한다 | |
핵심은 단순 색상 테마 교체가 아니라 brief마다 다른 화면 구조를 선택하게 하는 것이다.
설치
npx skills add nutlope/hallmark수동 설치 시 SKILL.md와 references/를 각 도구의 skill/rule 위치에 둔다.
~/.claude/skills/hallmark/
~/.codex/skills/hallmark/
.cursor/rules/hallmark.mdc언제 유용한가
- 랜딩 페이지가 매번 비슷한 카드·그라디언트·hero 구도로 나올 때
- 에이전트에게 기존 사이트를 “조금 예쁘게”가 아니라 구조적으로 다시 만들게 하고 싶을 때
- screenshot이나 URL에서 디자인 방향만 추출하고 pixel clone은 피하고 싶을 때
- 팀의 디자인 리뷰 기준을 skill로 반복 적용하고 싶을 때
관련 문서
- agent-skills — 에이전트 스킬 시스템 개요
- claude-code — Claude Code 개요
- codex — OpenAI Codex 개요
- astryx — Meta의 에이전트 친화적 React 디자인 시스템
- ui-skills — UI 전문 지침을 에이전트에 붙이는 방식
참고 자료
- Nutlope/hallmark — GitHub 공식 저장소