AI 티 안 나는 UI, 스킬로 강제한다

인공지능 코딩 도구가 만든 화면은 이상하게 서로 닮았다. 둥근 모서리, 보라에서 파랑으로 흐르는 그라데이션, 어디서 본 듯한 여백 배치다. 이 기시감을 규칙으로 차단하겠다는 디자인 스킬 홀마크(Hallmark)가 공개돼 개발자 커뮤니티에서 화제를 모았다. 클로드 코드(Claude Code)·커서(Cursor)·코덱스(Codex)에 그대로 얹어 쓰는 방식이다.

무슨 일인가

홀마크는 투게더 AI(Together AI)가 만들어 깃허브(GitHub)에 MIT 라이선스로 공개한 프로젝트다. 수집 시점 기준 별 1만8200여 개, 포크 920개, 커밋 133건이 기록돼 있다. 설치는 명령 한 줄이다. npx skills add nutlope/hallmark를 실행하거나, SKILL.md와 references 폴더를 클로드 코드는 ~/.claude/skills/hallmark/, 코덱스는 ~/.codex/skills/hallmark/에 복사하면 된다. 커서는 .cursor/rules/hallmark.mdc에 프런트매터를 뺀 본문만 넣는 구조다.

배경에는 생성형 도구 특유의 획일화가 있다. 모델은 학습 분포에서 가장 무난한 답을 고르는데, 디자인에서 그 무난함은 곧 어디서 본 듯한 화면으로 나타난다. 홀마크는 그 기본값을 의도적으로 거부하도록 규칙을 심었다.

핵심 짚어보기

동작은 네 개 동사로 정리된다. 기본 호출은 새 UI를 만들고, audit은 기존 코드를 안티패턴 기준으로 채점해 수정 목록만 돌려준다. redesign은 문구와 정보구조·브랜드는 유지한 채 구조를 버리고 다시 짜며, study는 스크린샷이나 URL에서 뼈대만 추출한다. 큰 구조, 서체 조합, 색 기준점 같은 것들이다.

핵심 장치는 57개 슬롭 테스트 관문과 결과를 내놓기 직전의 자체 비평 단계다. 스무 개 테마 중 하나를 골라 입히되, 브리프에 맞는 테마가 없으면 커스텀(Custom) 모드로 전환해 팔레트·서체·레이아웃을 새로 설계한다. 산출물은 자체 완결형 HTML과 CSS이며, 어떤 구조를 썼는지 CSS 주석에 남긴다.

주목할 대목은 study가 픽셀 단위 복제와 유료 템플릿 베끼기를 명시적으로 거부한다는 점이다. 참고와 복제를 도구 차원에서 갈라놓은 설계다.

1인기업 실전 적용 포인트

• 랜딩 페이지를 새로 만들기 전에 기존 페이지에 audit부터 돌려 감점 항목을 목록으로 받아라. 고칠 대상이 서너 개로 좁혀지면 반나절이면 끝난다.
• 제품이 여러 개라면 브리프를 제품별로 다르게 써서 테마가 겹치지 않게 하라. 같은 템플릿에서 색만 바꾼 사이트는 신뢰를 깎는다.
• study로 뽑은 뼈대는 design.md 형태로 내보내 다른 도구와 공유하되, 벤치마크 사이트의 문구와 이미지는 절대 옮기지 마라. 구조 참고와 복붙은 다른 일이다.
• 결과물이 단일 HTML이라 랜딩 A안·B안을 한 시간 안에 만들 수 있다. 광고비를 쓰기 전에 어느 쪽이 남는지부터 확인하라.

전망 / 주의점

한계도 분명하다. 스킬은 결국 프롬프트 규칙 묶음이라 모델이 규칙을 얼마나 지킬지는 세션 길이와 작업 복잡도에 따라 흔들린다. 스무 개 테마도 널리 쓰이면 그 자체가 새로운 기본값이 될 수 있다. 도구가 대신 만들어 주는 것은 완성도이지 브랜드가 아니다. 색·서체·말투 같은 자기 기준을 문서로 갖고 있는 쪽이 어떤 스킬을 쓰든 결과가 낫다.

출처: 해커뉴스 (https://github.com/Nutlope/hallmark)