클로드 코드와 코덱스에 홀마크 2.0 디자인 스킬 설치해 AI 티 안 나는 페이지 만드는 법

홀마크(Hallmark)는 투게더 AI가 만든 디자인 스킬이다. 에이전트가 만든 웹페이지를 브라우저로 열어 보고 기계가 만든 티를 걸러 낸다(제목마다 위에 붙는 작은 머리글, 자간을 넓힌 대문자 라벨, 제목에서 한 단어만 색칠하는 버릇 같은 것). 10월 21일 나온 2.0.0에는 테마 48개와 기존 페이지를 다시 짜거나 점검하는 명령이 들어갔고, 클로드 코드(Claude Code) 플러그인으로도 설치할 수 있다.

1. 모든 프로젝트에 설치한다. Node 18 이상이 필요하다.

npx skills add nutlope/hallmark -g

-g를 빼면 지금 프로젝트에만 들어간다. 한 도구에만 넣으려면 --agent claude-code(또는 codex, cursor, opencode, github-copilot)를 붙인다.

1. 클로드 코드 플러그인으로 넣어도 된다. 이때는 /hallmark:hallmark로 부른다.

/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark

1. 새 페이지를 만들 때 부른다. 클로드 코드는 /hallmark <요청>, 코덱스 CLI는 $hallmark <요청>이다. 저절로 켜지지 않으면 "use hallmark to build ..."처럼 이름을 넣어 요청한다.

2. 이미 있는 페이지는 명령으로 짚어 줘야 손댄다. 새로 짜려면 redesign, 고치지 않고 보고만 받으려면 audit을 쓴다.

/hallmark redesign ./src/app
/hallmark audit ./index.html

redesign은 내용과 연결(링크·입력란·핸들러)을 그대로 두고 디자인 체계와 배치만 바꾼다. 배치까지 두려면 "keep the layout", 티만 걷어 내려면 "polish"라고 덧붙인다.

화면 너비 여덟 가지로 렌더링하는 검사(sloplint --render)와 스크린샷을 쓰려면 npm i -g puppeteer-core와 크롬을 따로 깔아야 한다. 없으면 정적 검사만 돈다. 라이선스는 MIT다.