오픈소스 디자인 스킬 hallmark: Claude Code와 Cursor에서 'AI스러운' 웹 디자인 지운다

hallmark는 Together AI 개발자 Nutlope가 공개한 오픈소스 디자인 스킬이다. Claude Code, Cursor, Codex, OpenCode 등에 연동해 LLM이 만든 티가 팍팍 나는 전형적인 'AI 스타일' 프론트엔드 결과물을 막아내는 데 집중한다.

대규모 언어 모델에 웹 디자인을 맡기면 대부분 비슷한 결과로 수렴한다. 보라색 그라데이션, 헤드라인 위의 무의미한 소제목 라벨, 자간을 잔뜩 벌린 대문자 버튼, 전송되지 않는 이메일 구독 폼 같은 것들이다. hallmark는 이러한 모델의 기본 습관을 하나씩 쳐내도록 설계됐다.

무엇을 할 수 있나

hallmark는 단순히 예쁜 템플릿을 주는 대신 일관된 디자인 파이프라인을 실행한다.

기본적으로 50개의 디자인 테마를 내장하고 있다. 각 테마는 8KB 이하의 단일 파일과 예시 이미지로 구성되며 종이 질감, 타이포그래피, 컬러, 컴포넌트 표면 텍스처를 정의한다. 고정된 레이아웃이 아니기 때문에 같은 테마를 써도 페이지의 목적에 따라 전혀 다른 구조가 나온다.

내장 테마 대신 'custom'을 지정하면 프롬프트만 분석해 고유한 레이아웃과 배색을 완전히 새로 짜낸다.

허위 데이터를 지어내지 않도록 하는 장치도 갖췄다. 프로젝트의 실제 스크린샷을 찍어오거나, 위키미디어 커먼즈 기반의 755개 오픈 라이선스 사진 목록에서 맥락에 맞는 이미지를 골라 출처 표기와 함께 넣는다. 완성된 결과물은 완전히 독립적인 HTML과 CSS로 떨어지며, 첫 줄 주석에 이번 빌드에서 내린 디자인 결정들이 기록된다.

새 페이지를 짜는 것 외에 기존 사이트 개선도 지원한다. `/hallmark redesign` 명령어를 쓰면 기존 텍스트와 링크, 핸들러 동작을 그대로 보존하면서 시각 레이아웃만 갈아엎고, `/hallmark audit`은 코드를 건드리지 않고 안티 패턴 문제만 짚어낸다.

'AI 느낌'을 걸러내는 방식

hallmark의 핵심은 미적 기준을 실제 브라우저 자동화 검사로 검증한다는 점이다.

검사 관문은 여러 단계로 나뉜다. 가장 기본인 'The Floor'는 명도 대비, 포커스 상태, 모션 감소 대응, 모바일 레이아웃 깨짐, 허위 정보 등을 확인해 통과하지 못하면 빌드 자체를 막는다. 그 위의 'Reflex gates'는 모델이 습관적으로 넣는 뻔한 디자인 패턴들을 하나씩 걸러낸다.

빌드 과정에서도 첫인상을 좌우하는 히어로 섹션을 먼저 렌더링해 단독 검토한 뒤 나머지 페이지를 만든다. 전체 코드가 나오면 `sloplint.mjs` 스크립트를 통해 헤드리스 브라우저에서 8가지 화면 너비로 렌더링을 확인하고, 완전히 독립된 컨텍스트의 서브에이전트가 최종 점검을 진행한다.

설치 및 실행

hallmark는 MIT 라이선스로 배포되는 오픈소스 프로젝트다.

설치는 간단하다. 터미널에서 `npx skills add nutlope/hallmark -g` 명령어를 실행하면 전역에 설치된다. Claude Code에서는 플러그인 형태로 추가해 쓸 수도 있다. 구동 환경은 Node 18 이상이 필요하며, 브라우저 렌더링 검사와 캡처 기능을 쓰려면 `puppeteer-core`와 로컬 Chrome이 깔려 있어야 한다. 이 환경이 없어도 정적 검사는 그대로 돌아간다.

왜 중요한가

AI 도구로 프론트엔드를 개발할 때 흔한 템플릿 느낌을 벗겨내는 일은 생각보다 많은 손이 들어간다. hallmark는 막연한 프롬프트 엔지니어링 대신, 디자이너의 감각을 브라우저에서 실행 가능한 구체적 규칙과 린트(lint) 단계로 치환했다는 점에서 똑똑하다. Cursor나 Claude Code로 실제 서비스 수준의 웹 인터페이스를 빠르게 만들어야 하는 1인 개발자라면 바로 도입해볼 만하다.