AI에게 랜딩 페이지를 만들게 하면 열 개 중 여덟 개는 비슷하게 나옵니다. 둥근 카드 6분할 그리드, 그라디언트 버튼, 제목 중 한 단어만 색을 입힌 강조, 페이지 하단의 이메일 구독 폼까지 똑같습니다. Together AI의 Hallmark는 바로 이런 공식을 겨냥해 만든 도구입니다. 작성자 @nutlope가 10월 23일에 올린게시글에 따르면, Hallmark는 v1에서 3만 star, 6만 회 설치를 기록한 뒤 처음부터 다시 작성해 v2를 내놓았고, Claude Code, Codex, OpenCode에서 사용할 수 있습니다.
먼저 결론부터 말씀드립니다.
- Hallmark는 웹 디자인 skill이며, 한 줄
npx skills add nutlope/hallmark만 실행하면 설치가 끝납니다.README 에 Claude Code, Codex, Cursor, OpenCode를 지원한다고 명시되어 있습니다. - v2는 48개 테마를 제공합니다. 요청할 때마다 먼저 3개 테마를 골라 보여 주고, 선택한 뒤에야 페이지 작성을 시작합니다.
- 작성이 끝나면
sloplint --render명령으로 실제 Chrome에서 검사합니다(README에는 8개 너비로 적혀 있습니다). “AI 티”가 나는 공식, 대비, 포커스 링, 모바일 레이아웃을 확인하고, 통과하지 못하면 스스로 고칩니다. - 본 사이트의 API Key로 직접 테스트했습니다. Claude Code는 테마 3개를 제시하는 데 26초, 전체 페이지를 작성하고 sloplint 0 FAIL이 될 때까지 수정하는 데 3분 40초가 걸렸고,
/hallmark audit로 일반적인 AI 랜딩 페이지를 검사하자 FAIL 41건이 나왔으며,/hallmark redesign로 전체를 다시 만드는 데 6분 11초가 걸렸고 재작업 후에는 0 FAIL이었습니다. Codex에서는$hallmark로 테마 3개를 제시하는 데 34초가 걸렸습니다.
AI 티가 나는 웹페이지는 어떻게 생겼을까
Hallmark의 README는 모델이 가장 자주 반복하는 공식을 꽤 직설적으로 나열합니다. 아래 항목 중 여러 개는 이미 보셨을 겁니다.
| 공식 | 모습 |
|---|---|
| 소제목 위의 영문 eyebrow | 제목마다 위에 작은 글씨 eyebrow가 한 줄씩 붙습니다. 대문자에 자간을 넓힌 영문 라벨이 흔합니다. |
| 제목 속 한 단어만 색 입히기 | “3초 만에 한 건 기록,월말에 헷갈리지 않게”처럼 문장의 뒤쪽 절반만 메인 컬러로 칠합니다. |
| 페이지 끝에는 반드시 이메일 구독 | 어떤 제품이든 페이지 마지막은 “이메일을 남기고 소식 받기”입니다. |
| 빈 박스뿐이거나 사진뿐인 페이지 | 빈 카드만 가득하거나, 정보 없이 이미지만 쌓아 둔 페이지입니다. |
| 첫 화면이 가득 차지 않음 | 큰 화면에서 첫 화면 콘텐츠가 절반만 차지하고 아래는 텅 비어 있습니다. |
| 가짜 폼 제출 | “제출”을 누르면 감사 메시지가 뜨지만, 실제로는 아무것도 전송되지 않습니다. |
Hallmark는 검사를 세 단계로 나눕니다.Floor 단계는 반드시 통과해야 합니다(대비, 포커스, 모션 감소, 지어낸 사실, 모바일 레이아웃).Reflex 단계는 모델이 습관적으로 내놓는 기본값으로, 이유가 있으면 기록해 두고 면제할 수 있습니다.Finish 단계는 세부 다듬기로, 배포를 막지 않습니다.
다루려는 대상이 웹페이지가 아니라 글의 AI 티라면Claude Code로 AI 글 고쳐 쓰기를 참고하시기 바랍니다.
Hallmark v2에는 무엇이 있나
아래 내용은 Hallmark README와공식 사이트를 참고했습니다.
| 기능 | 설명 |
|---|---|
| 48개 테마 | 테마마다 하나의 “소재”입니다. 종이, 글꼴, 배색, 컴포넌트, 질감이 있고 완성 이미지 한 장이 함께 제공됩니다. 공식 사이트는 Editorial 20, Modern minimal 11, Atmospheric 8, Playful 9로 분류합니다. |
| 목적에 맞춘 레이아웃 | 예약 페이지는 예약을 위해, 스토어 페이지는 판매를 위해 존재합니다. 주요 액션을 있어야 할 위치에 두고 페이지를 그 액션으로 마무리합니다. |
| Custom | custom이라고 말하면 테마 없이 설명하신 내용대로만 디자인하며, 규칙과 검사는 그대로입니다. |
| 실제 제품 사용 | URL, 개발 서버, App을 주면 알아서 스크린샷을 찍습니다. |
| 실제 사진 | 오픈 라이선스 사진 755장이 내장되어 있으며, 테마에 맞게 골라 페이지에 출처를 표기합니다. |
| redesign과 audit | /hallmark redesign <路径> 명령은 콘텐츠와 링크를 유지한 채 페이지를 다시 만들고,/hallmark audit <路径> 명령은 보고서만 내고 파일은 수정하지 않습니다. |
공식 사이트 FAQ에 따르면 Hallmark 자체에는 별도의 API Key가 필요하지 않습니다. 사진은 자체 오픈 라이선스 갤러리에서 가져오고, 이미지 생성 Key는 선택 사항입니다. 실제로 비용이 드는 쪽은 Claude Code나 Codex에서 쓰는 모델입니다.
1단계: Claude Code / Codex를 본 사이트로 연결하기
Claude Code
전역 ~/.claude/settings.json 에 다음과 같이 작성합니다:
{
"env": {
"ANTHROPIC_BASE_URL": "https://api.aicodewith.ai",
"ANTHROPIC_AUTH_TOKEN": "你的 API Key"
},
"model": "claude-sonnet-5-5"
}
ANTHROPIC_BASE_URL 에는 /v1을 붙이지 마세요. 이번 테스트에서는 Claude Code 2.1.309 + claude-sonnet-5-5를 사용했습니다.
Hallmark는 한 번 빌드하는 동안 모델을 여러 차례 호출하고, 스크립트를 실행하고, 페이지를 반복해서 고치기 때문에 일반 대화보다 사용량을 더 많이 소모합니다. Claude 구독을 쓰고 있다면 사용량 계산 방식을 먼저Claude Code 사용량을 다 썼을 때 대처법을 참고하시기 바랍니다.
Codex
전역 ~/.codex/config.toml 에 커스텀 provider를 작성하며, 작성법은Codex config.toml 설정 가이드와 같습니다:
model = "gpt-6.1-sol"
model_reasoning_effort = "medium"
model_provider = "aicodewith"
[model_providers.aicodewith]
name = "aicodewith"
base_url = "https://api.aicodewith.ai/chatgpt/v1"
wire_api = "responses"
experimental_bearer_token = "你的 API Key"
이번 테스트에서는 Codex CLI 0.164.0 + gpt-6.1-sol을 사용했습니다.
2단계: Hallmark 설치
# 装给所有项目（-g），Claude Code 和 Codex 都装
npx skills add nutlope/hallmark -g
# 只装给一个客户端
npx skills add nutlope/hallmark -g --agent claude-code
npx skills add nutlope/hallmark -g --agent codex
Node 18 이상이 필요합니다. Claude Code용으로만 설치했을 때는 14초가 걸렸습니다. 설치 위치와 호출 방식은 다음과 같습니다:
| 클라이언트 | 설치 위치 | 호출 |
|---|---|---|
| Claude Code | ~/.claude/skills/hallmark | /hallmark <需求> |
| Codex CLI | ~/.agents/skills/hallmark | $hallmark <需求> |
| Cursor, OpenCode | 위 두 경로를 읽습니다 | /hallmark <需求> |
브라우저 자체 점검(sloplint --render)에는 Chrome과 puppeteer-core도 필요합니다:
npm i -g puppeteer-core
이 둘이 없으면 Hallmark는 정적 검사만 실행합니다. 저희 장비에서 확인된 경로는 /usr/bin/google-chrome입니다. 스크립트가 알아서 찾아냈습니다.
3단계: 가계부 App 랜딩 페이지 만들기, 먼저 테마 3개 고르기
빈 디렉터리에서 Claude Code를 실행하고 다음을 입력합니다:
/hallmark 给记账 App「账小记」做一个落地页，写成 /workspace/hm/build/index.html。先给我 3 套主题挑。
Hallmark는 먼저 theme.mjs deal를 실행해 48개 중에서 요구에 맞는 3개를 고릅니다. Grid(그리드 포스터), Formwork(콘크리트 공사장 표지판), Studio(디자인 스튜디오 교정지)이며, 테마마다 배색과 글꼴, 가계부 App에 어울리는지를 적어 줍니다. 소재도 되묻습니다. App 스크린샷, 실제 사용자 수, 가격, 후기가 있는지입니다. 없으면 지어내지 않겠다고 분명히 말하고, 이미지 자리는 플레이스홀더로 둡니다. 이 단계에는 26초가 걸렸습니다.
Claude Code 里 /hallmark 先发 3 套主题并追问素材的终端输出
저희는 다음과 같이 답했습니다:
选 1 Grid。受众是上班族，转化动作是下载 App，调性偏轻松。没有截图和真实数据，用占位，不要编数字。
이어서 Hallmark가 한 일은 다음과 같습니다:
- 먼저
theme.mjs scaffold명령으로 생성한 파일은tokens.css및base.css입니다. 모든 색상, 글자 크기, 간격은 token에 들어갑니다. - Grid의 영문 폰트 스택에 중국어 폴백(PingFang SC, Noto Sans SC, Microsoft YaHei)을 추가했습니다.
- 먼저 첫 화면만 작성하고
sloplint.mjs --render를 한 번 실행해 1280, 1440, 1920 세 가지 첫 화면 크기와 1440, 375 두 가지 전체 페이지 크기에서 스크린샷으로 검사합니다. - 첫 검사에서는 “예시 데이터” 라벨의 대비 1.00:1, 지나치게 빈약한 다운로드 영역 등의 문제가 나왔고, 하나씩 고쳐
sloplint: clean. 0 FAIL, 0 REFLEX, 0 WARN이 될 때까지 반복했습니다.
이 단계 전체에 3분 40초가 걸렸습니다. 완성된 첫 화면은 다음과 같습니다. 제목 전체가 한 가지 색이고, eyebrow가 없으며, 따로 색을 입힌 단어도 없습니다. 모바일 목업의 숫자는 모두 ¥ 00.00이고 “예시 데이터”라고 표시했습니다.
Hallmark 用 Grid 主题做出的记账 App 落地页首屏（headless Chrome 截图）
Codex에서도 똑같습니다. Codex에 $hallmark 给记账 App「账小记」做一个落地页。这一步只发 3 套主题让我挑，不要写页面。라고 입력했을 때도 이번에 가장 먼저 theme.mjs deal, 이번에는 Newsprint, Hedgerow, Editorial 세 가지가 뽑혔고 34초가 걸렸습니다. 추첨할 때마다 시드가 달라서 두 클라이언트가 제시한 3종도 서로 다릅니다.
Codex 里 $hallmark 发出 3 套主题的终端输出
4단계: /hallmark audit으로 기존 페이지 점수 매기기
비교 기준을 만들기 위해 먼저 Hallmark 없이 Claude Code에 "가계부 App 랜딩 페이지 한 장 만들기"를 맡겼고, 28초 만에 완성됐습니다. 초록색 테마, 첫 화면의 휴대폰 목업, 6칸 기능 카드, 3단계 시작 가이드, FAQ, 다운로드 띠 배너로 구성되어 있습니다. 요청하지도 않은 요금 정책까지 멋대로 써 넣었기 때문에, 지어낸 설명과 관련 버튼 문구는 먼저 지운 뒤 검사에 넘겼습니다.
/hallmark audit /workspace/hm/bare/index.html
audit은 리포트만 출력하고 파일은 수정하지 않습니다. 50초 뒤 결과는 FAIL 41개, REFLEX 18개, WARN 5개였고, 대표적인 항목 몇 가지를 골라 보면 다음과 같습니다.
- Floor: 색상과 글꼴이 token 밖에 하드코딩되어 있고, emoji 10개를 아이콘으로 쓰고 있으며, 포커스 링 대비는 1.60:1에 불과하고, 흰 글자에 초록 배경인 버튼의 대비는 3.45:1입니다.
- Reflex 38iii: "월말에도 헷갈리지 않게"만 따로 색을 입힌 것이 바로 앞에서 말한 "제목 속 단어 하나만 컬러" 패턴입니다.
- 첫 화면: 1440×900 화면에서 첫 화면의 콘텐츠가 575px에서 끝나고, 버튼 앞에 텍스트 블록이 4개나 쌓여 있습니다.
- 지어낸 숫자: "3초", "¥ 2,368.50", "예산 68% 사용", "1분 이내"가 모두 사실인 것처럼 페이지에 적혀 있습니다. 스크립트는 진위를 판별하지 못하므로 목록으로 뽑아서 사람이 확인하게 합니다.
- 틀에 박힌 구조: 기능 6칸, 3단계 시작 가이드, FAQ, CTA 띠 배너는 어떤 가계부 App 이름으로 바꿔도 그대로 성립합니다.
마지막으로 어느 단계까지 해야 고쳐지는지 알려 줍니다. restyle(레이아웃은 유지하고 스타일 시스템만 교체)은 Floor 문제 대부분을 해소할 수 있고, 첫 화면, 분량, 구조 문제는 full(레이아웃까지 재작업)만 해결할 수 있습니다.
/hallmark audit 对普通 AI 落地页的审计报告终端输出
5단계: /hallmark redesign으로 재작업하고 비교하기
이 페이지를 한 부 복사해 전면 재작업하도록 했습니다.
/hallmark redesign /workspace/hm/redo/index.html 做 full 重做，这个目录是干净的副本。页面里的编造数字一律改成占位或删掉。
redesign의 핵심은 "콘텐츠와 링크 유지"입니다. 먼저 sloplint --before 명령으로 원본 페이지의 링크, 필드, 제목을 모두 기록해 두고, 재작업 후에는 sloplint --kept 명령으로 비교해 빠진 것이 있으면 경고합니다. 실측에서는 원래 제목 "3초면 기록 끝, 월말에도 헷갈리지 않게"를 "손쉽게 기록하고, 월말에도 헷갈리지 않게"로 바꿨는데,--kept 검사가 즉시 headings gone or reworded경고를 띄웠고, 변경 사유를 페이지 CSS 첫 줄의 Hallmark 기록에 적은 뒤에야 통과했습니다.
이번에는 Loom 테마(미색 종이, 세리프 제목, 남색 띠 하나)를 골랐고, 결과는 다음과 같습니다.
- 사이트 내 앵커 4개, 기능 6개, 단계 3개, FAQ가 모두 유지되었습니다.
- "3초", "1분 이내" 같은 표현은 삭제하고, ¥2,368.50, 68%, +8,000.00은 00.00으로 바꾼 뒤 "예시 데이터"로 표시했습니다.
- emoji 아이콘과 휴대폰 프레임을 없앴습니다.
sloplint --render --kept: FAIL 0, REFLEX 0, WAIVED 1, WARN 1. WAIVED는 "자주 묻는 질문"의 분량이 얇다는 항목으로, 재작업 시 원본에 없던 내용은 추가할 수 없다는 것이 사유였습니다. WARN은 lint가 "8,000"을 쉼표 기준으로 쪼개서 매칭에 실패한 것이며, 본문에는 이 숫자가 이미 없습니다.
전체 과정에 6분 11초가 걸렸습니다.
/hallmark redesign 全量重做后的终端输出
왼쪽이 재작업 전, 오른쪽이 재작업 후이며 내용은 동일합니다(headless Chrome 캡처, 1440×900 첫 화면).
普通 AI 落地页与 Hallmark redesign 后的首屏对比（headless Chrome 截图）
실측 소요 시간 요약
| 단계 | 클라이언트 / 모델 | 소요 시간 | 결과 |
|---|---|---|---|
| Hallmark 설치 | npx skills | 14초 | 설치 위치: ~/.claude/skills/hallmark |
| 테마 3종 제시 | Claude Code / claude-sonnet-5-5 | 26초 | Grid, Formwork, Studio |
| 전체 페이지 작성 및 자체 검사 | Claude Code / claude-sonnet-5-5 | 3분 40초 | sloplint FAIL 0, REFLEX 0, WARN 0 |
| Hallmark 없이 바로 작성 | Claude Code / claude-sonnet-5-5 | 28초 | 비교용 페이지 |
| audit 비교용 페이지 | Claude Code / claude-sonnet-5-5 | 50초 | FAIL 41, REFLEX 18, WARN 5 |
| redesign 비교용 페이지(full) | Claude Code / claude-sonnet-5-5 | 6분 11초 | FAIL 0, REFLEX 0, WAIVED 1, WARN 1 |
| 테마 3종 제시 | Codex 0.164.0 / gpt-6.1-sol | 34초 | Newsprint, Hedgerow, Editorial |
Hallmark로 한 페이지를 쓰는 것은 바로 쓰는 것보다 훨씬 느립니다. 시간은 대부분 "한 번 고치고, 렌더링해서 한 번 검사하는" 반복에 들어갑니다.
사용 팁
- 소재를 먼저 제공하기: Hallmark는 사용자 수, 평점, 후기를 지어내지 않습니다. 스크린샷, 실제 수치, 브랜드 컬러 등을 많이 줄수록 페이지가 실제 제품에 가까워집니다.
- 기존 사이트를 고칠 때는 명시적으로 지정하기: 이미 있는 페이지는 자동으로 수정하지 않으므로 반드시
/hallmark redesign <路径>. 레이아웃은 유지하고 스타일만 바꾸려면 keep the layout이라고 말하고, 틀에 박힌 패턴만 정리하려면 polish라고 말하면 됩니다. - redesign 전에 백업하거나 사본 사용하기: 저희는 한 부를 복사한 뒤 재작업해서 비교하기 쉽게 했습니다.
- 자동 실행되지 않으면 직접 지정하기: 자동으로 적용되지 않으면 "use hallmark to build ..."라고 바로 말하면 됩니다.
- Chrome 설치하기: Chrome과 puppeteer-core가 없으면 정적 검사만 가능합니다. 첫 화면 높이나 대비처럼 렌더링해야 측정할 수 있는 문제는 잡아내지 못합니다.
자주 묻는 질문
Hallmark란 무엇입니까?
Together AI가 만든 웹 디자인 skill로, Claude Code, Codex, Cursor, OpenCode에서 사용할 수 있습니다. 먼저 48종 테마 중 3종을 골라 선택하게 하고, 페이지가 완수해야 할 작업에 맞춰 레이아웃을 잡은 뒤, 마지막으로 실제 브라우저에서 AI 티가 나는 패턴과 접근성 문제를 검사합니다.
Hallmark skill은 어떻게 설치합니까?
npx skills add nutlope/hallmark -g, Node 18 이상이 필요합니다. 클라이언트 하나와 함께 --agent claude-code 또는 --agent codex만 설치하면 됩니다. 브라우저 검사에는 npm i -g puppeteer-core 및 Chrome도 필요합니다.
Claude Code와 Codex에서는 어떻게 호출합니까?
Claude Code에서는 /hallmark <需求>, Codex에서는 $hallmark <需求>명령을 사용합니다. "랜딩 페이지를 만들어 줘"처럼 직접 설명해도 보통 실행됩니다.
48종 테마를 지정할 수 있습니까?
가능합니다. 먼저 3종을 제시하면 번호만 답하면 됩니다. 테마를 쓰고 싶지 않다면 custom이라고 말하세요. 그러면 설명한 내용만 기준으로 디자인합니다.
audit과 redesign은 무엇이 다릅니까?
audit은 리포트만 출력하며, Floor, Reflex, Finish 등급별로 문제를 나열하고 파일은 수정하지 않습니다. redesign은 페이지를 다시 만들며, 기본적으로 콘텐츠와 링크를 유지하고 sloplint --kept 명령으로 누락된 것이 없는지 검사합니다.
서드파티 API Key로도 Hallmark를 실행할 수 있습니까?
네, 가능합니다. Claude Code의 ANTHROPIC_BASE_URL 값을 https://api.aicodewith.ai로 지정하고, Codex의 커스텀 provider는 https://api.aicodewith.ai/chatgpt/v1를 가리키게 했습니다. Claude Code에서는 설치, 테마 제시, 페이지 작성, audit, redesign이 모두 정상 동작했고, Codex에서도 테마 제시가 정상 동작했습니다. Hallmark 자체에는 별도의 Key가 필요하지 않습니다.
생성된 페이지를 바로 배포해도 됩니까?
실제 콘텐츠를 채워 넣어야 합니다. 실측에서는 다운로드 버튼의 링크, 푸터 연락처, App 스크린샷이 모두 자리 표시용이었고, Hallmark는 마지막에 사용자가 채워야 할 항목을 나열해 줍니다. 배포 전에 브라우저에서 직접 한 번 확인하세요.
