Hallmark: Claude Code·Cursor·Codex용 AI 티 나는 디자인 방지 스킬

Hallmark는 Claude Code, Codex, Cursor, OpenCode에서 웹 페이지를 만들거나 다시 디자인할 때 사용하는 오픈소스 스킬입니다. 48개 디자인 테마와 페이지 목적에 맞춘 구성, 브라우저 검사와 재검토 절차를 제공하며, 접근성이나 모바일 레이아웃 같은 필수 조건은 통과 기준으로 둡니다.

주제: 개발 도구 웹 AI

에디터 노트

Hallmark의 설계에서 설득력 있는 부분은 미적 취향을 하나의 정답으로 고정하지 않고, 접근성과 기능 보존은 필수 기준으로 두면서 흔한 디자인 습관은 기록을 남겨 예외를 허용한다는 점입니다. 특히 재설계 전후에 링크와 입력 필드, 핸들러를 대조하는 절차는 시각적 변경이 실제 기능을 지우는 문제를 직접 검사합니다. 다만 sloplint의 규칙을 통과하는 것과 좋은 디자인을 보장하는 것은 다릅니다. 여덟 화면 너비 검사와 별도 에이전트 검토를 제공하지만, 취향에 따른 품질을 어떤 기준으로 판정하는지는 자료에 구체적으로 제시되지 않습니다. 따라서 이 도구가 보장하는 범위는 명시된 검사와 기능 보존 절차이며, 결과물의 미적 완성도까지 자동으로 인증하지는 않습니다.

AI 요약

Hallmark는 AI가 만든 듯한 반복적 웹 디자인을 줄이기 위한 스킬입니다. Claude Code, Codex, Cursor, OpenCode에서 새 페이지를 만들거나 기존 페이지를 재설계하고 검사하는 데 씁니다. MIT 라이선스로 공개됐으며 Together AI가 만들었습니다.

테마와 페이지 구성

48개 테마는 종이, 서체, 색, 표면 질감, 구성 요소를 묶은 시각적 재료입니다. 테마가 페이지의 내용이나 순서를 정하지는 않습니다. 같은 테마를 골라도 프롬프트가 다르면 서로 다른 페이지를 만듭니다. 각 테마는 8KB 이하 파일과 완성된 페이지 예시 이미지로 구성되며, 빌드 한 번에 테마 하나를 읽습니다.

기본 빌드에서는 프롬프트에 맞는 테마 세 개를 제안하고, 페이지의 목적에 맞춰 구성을 정합니다. 예약 페이지는 예약, 쇼핑몰은 판매, 뉴스레터 페이지는 구독을 중심 행동으로 삼고 페이지 끝도 그 행동에 맞춥니다. 사용자가 custom을 요청하면 테마나 구성 요소, 팔레트 조합을 정해 두지 않고, 프로젝트에만 맞는 아이디어를 찾도록 짧은 방향 지침만 제공합니다.

생성과 검사 절차

사전 점검에서 프로젝트의 글꼴, 색상 팔레트, 프레임워크, 고정된 design.md를 읽습니다. 사진이나 스크린샷, 실제 수치처럼 필요한 자료는 한 번 요청하며, 내용을 임의로 만들어내지 않는다고 설명합니다. 페이지 전체를 만들기 전에 히어로 영역을 먼저 구현해 별도로 렌더링하고 검토합니다. 결과물은 자체 포함 HTML과 CSS이며, 선택한 디자인 결정을 첫 CSS 주석에 기록합니다.

검사 기준은 세 단계입니다. Floor는 대비, 키보드 포커스, 동작 감소 설정, 사실을 지어내지 않는 것, 휴대전화 레이아웃 오류처럼 배포를 막는 조건입니다. Reflex gates는 제목 위의 작은 분류 문구, 자간을 벌린 대문자 라벨, 헤드라인의 단어 하나만 색칠하기, 비어 있는 프레임이나 사진만 가득한 페이지, 화면에 맞지 않는 히어로, 모든 페이지 끝의 이메일 가입, 실제 전송 없이 감사 문구만 표시하는 폼 등 흔히 나오는 디자인 습관을 검사합니다. 사유가 있으면 기록을 남기고 이 기본 규칙을 넘길 수 있습니다. Finish checks는 완성도를 높이는 세부 검사이며 배포를 막지는 않습니다.

sloplint.mjs --render는 실제 브라우저에서 여덟 가지 화면 너비로 페이지를 확인합니다. 이어 별도 맥락의 검토 에이전트가 결과를 살핍니다. 브라우저 검사와 스크린샷에는 puppeteer-core와 Chrome이 필요하지만, 설치하지 않아도 정적 검사는 실행됩니다.

기존 페이지 재설계와 설치

Hallmark는 사용자가 지정하지 않으면 이미 존재하는 디자인을 바꾸지 않습니다. /hallmark redesign ./src/app은 내용과 연결 기능을 유지하면서 디자인 체계와 레이아웃을 다시 만들고, keep the layout은 구조를 유지한 스타일 변경, polish는 지적된 디자인 습관만 손보도록 지정합니다. 재설계 전에는 링크, 입력 필드, 핸들러, 제목을 기록하고, 재설계 뒤 누락 여부를 검사합니다. 결과에는 전후 비교가 포함됩니다. /hallmark audit ./index.html은 수정 없이 검사 결과만 보고합니다.

npx skills add nutlope/hallmark -g로 전체 프로젝트에 설치하며 -g를 빼면 현재 프로젝트에 설치합니다. Node.js 18 이상이 필요합니다. 설치 대상은 Claude Code, Codex CLI, Cursor, OpenCode이며, GitHub Copilot 지정 설치 옵션도 안내합니다. 저장소를 복제해 설치할 경우 설치 스크립트가 테마와 참조 파일을 검증한 뒤 복사합니다.

사진은 Wikimedia Commons에서 가져온 공개 라이선스 자료 755개를 목록으로 관리합니다. 사진 파일 자체를 저장소에 넣지는 않으며, 사용한 사진은 페이지에 출처를 표시합니다. 각 사진의 라이선스는 CC0, 퍼블릭 도메인, CC BY 또는 CC BY-SA입니다.

GitHub 반응

댓글은 없습니다.

원문: GitHub / 번역·요약: Trawling

원문 보기 ↗토론 보기 ↗