무엇인가요?
Hallmark는 AI 코딩 도구가 웹페이지를 만들 때 디자인 방향과 검수 절차를 함께 적용하도록 돕는 스킬입니다. Claude Code·Codex·Cursor·OpenCode 등에서 사용하며, 독립적인 웹사이트 제작 서비스가 아니라 코딩 에이전트에 추가하는 작업 지침과 도구 모음입니다.
언제 쓰나요?
랜딩 페이지나 제품 소개 화면을 만들면서 글꼴·색·간격의 방향을 먼저 정하고 싶을 때 살펴볼 수 있습니다. 이미 만든 화면도 공식 스킬 안내의 audit로 점검하거나 redesign으로 다시 구성할 수 있습니다. 예를 들어 새 서비스를 소개하는 페이지라면 디자인 후보를 비교한 뒤 실제 화면을 만들고 검수하는 흐름으로 활용할 수 있습니다.
무엇을 할 수 있나요?
- 48개 디자인 테마에서 요청에 맞는 후보를 고르고, custom 요청으로 별도 방향을 정할 수 있습니다. 테마는 고정된 페이지 배치가 아니라 색과 글꼴 등의 기준입니다.
- 기존 프로젝트의 디자인 토큰과 design.md를 확인해 현재 디자인 기준을 참고합니다.
- 실제 제품 화면이나 개발 서버를 캡처하고, sloplint의 정적 검사와 브라우저 검사로 결과를 점검하는 절차를 제공합니다.
어떻게 시작하나요?
공식 설치 안내에 따라 Node.js 18 이상이 준비된 환경에서 사용하는 코딩 도구에 Hallmark 스킬을 추가하세요. Claude Code·Cursor·OpenCode에서는 /hallmark, Codex CLI에서는 $hallmark 뒤에 만들거나 점검할 화면을 설명하는 방식으로 안내합니다.
처음에는 작은 페이지 하나와 원하는 독자·목적을 정해 시작하는 편이 좋습니다. 브라우저 검사와 화면 캡처에는 Chrome과 puppeteer-core가 추가로 필요합니다. 해당 환경이 없을 때 수행한 정적 검사를 실제 화면 검증과 같은 결과로 받아들이면 안 됩니다.
사용 전 알아둘 점
Hallmark 기본 사용에 별도 이미지 API 키가 필수인 것은 아닙니다. 이미지 생성은 선택 사항입니다. 공식 이미지 생성 스크립트는 Together API를 사용하며, 이 기능을 사용하면 이미지 프롬프트가 외부 서비스로 전송됩니다. 코딩 도구와 선택한 이미지 서비스의 비용도 별도로 확인하세요. 제품 화면을 캡처할 때는 개인정보나 비밀값이 없는 샘플 데이터를 사용하는 편이 좋습니다.
코드와 문서는 MIT 라이선스입니다. 제공되는 사진 목록에는 서로 다른 이용 조건이 있으므로 코드의 라이선스를 사진 전체에 적용하면 안 됩니다. 검사 도구가 제공되더라도 실제 접근성·반응형·기능 동작은 결과 화면에서 확인해야 합니다.
공식 자료 확인일: 2026년 10월 26일. 공식 문서를 정리한 소개이며 직접 설치·실행하거나 디자인 품질을 비교한 후기는 아닙니다.
새 글 받아보기
RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.
