Loading...

디자인 스킬 · Hallmark v2

디자이너도 아닌데 블로그 디자인을 AI에게 맡겼더니, 예전 디자인이 창피해 보일 만큼 좋아졌어요

Claude Code·Codex 같은 코딩 AI에 Hallmark를 붙이고 랜딩 페이지를 부탁하면, AI가 누가 보는 페이지인지와 무엇을 누르게 할지부터 묻고 테마를 골라 짜요. 다 만든 페이지는 실제 브라우저에 띄워 AI로 만든 티가 나는 곳을 찾아 고쳐요. 10월 23일 처음부터 다시 만든 v2가 나왔고, 이미 있는 내 페이지도 링크와 입력칸은 그대로 둔 채 다시 짜거나 점검만 받을 수 있어요. 자기 사이트를 맡겨 본 사람들의 사례를 모아 봤어요.

2026.10.26·사례 3

제작사가 올린 v2 발표 영상이에요. Hallmark 없이 만든 페이지와 Hallmark를 붙인 페이지를 견주는데, 화면의 문제 개수는 Hallmark 자체 검사기가 센 숫자예요. 이어서 이미 있는 페이지를 다시 짜기 전후가 나와요. 출처: Hassan(@nutlope) X

한국 시간 10월 23일 새벽, 디자인 스킬 Hallmark를 만든 Together AI의 Hassan이 X에 "We rebuilt Hallmark from scratch."(Hallmark를 처음부터 다시 만들었다)라며 v2를 알렸어요. v2 발표 글은 나흘 만에 조회 14만 8천 회, 북마크 3,395개를 모았어요. 5월에 올린 v1 출시 글은 10월 26일까지 다섯 달 동안 조회 89만 회, 북마크 1만 개를 넘겼어요.

뮌헨의 자동차 데이터 회사 CTO Brian Porter는 스스로 디자이너가 아니라고 밝힌 사람이에요. 그는 7월에 v1으로 자기 블로그를 다시 디자인하고 이렇게 적었어요. "What came out was so much better it made the old version look embarrassing."(나온 결과가 훨씬 좋아서, 예전 디자인이 창피해 보일 정도였다)

Hallmark는 제목마다 위에 붙는 작은 라벨, 헤드라인에서 한 단어만 다른 색으로 칠한 것, 페이지 끝마다 붙는 이메일 구독 칸, 아무것도 보내지 않고 고맙다고만 하는 입력 양식을 'AI로 만든 티'로 꼽아요.

제작사 시연을 보면 AI는 바로 짜지 않고 먼저 물어요. "/hallmark a site for Five Mile Gin, a small distillery that forages its botanicals"(재료 식물을 직접 채집하는 작은 증류소 Five Mile Gin의 사이트를 만들어 줘) 한 줄을 넣자, AI는 "Any photos of the still?"(증류기 사진이 있나요?), "Who buys a bottle?"(누가 한 병을 사나요?), "The one thing to click?"(꼭 누르게 할 것 하나는요?)부터 물었어요.

Together AI가 무료로 공개한 이 스킬의 v2에는 테마 48개와 공개 라이선스 사진 755장이 들어 있어요. 제작사 설명에 따르면 Hallmark는 부탁에 맞는 테마 셋을 고르고, 다 만든 페이지를 실제 브라우저에서 여덟 가지 화면 폭으로 검사해요. 이미 있는 페이지를 다시 짤 때는 링크·입력칸·제목을 먼저 적어 두었다가, 하나라도 빠지면 실패로 처리해요.

Reference 01뮌헨 자동차 데이터 회사 CTO Brian Porter · 개인 블로그 (7월, v1)

디자인 방향 넷 가운데 하나를 고르자, AI가 데스크톱·모바일 화면을 혼자 찍어 보며 블로그 전체를 다시 짰어요

Brian은 그전까지 Google Stitch로 레이아웃을 잡고 Claude Design으로 다듬는 식으로 블로그를 만들었어요. Hallmark를 Claude Code 스킬로 깔고 블로그와 홈페이지를 다시 디자인해 달라고 하자, AI는 먼저 "just the blog, or everything?"(블로그만인가요, 전부인가요?)라고 범위를 물었어요. 이어서 서로 다른 디자인 방향 4개를 내밀었고, Brian이 하나를 고르자 그 안에서 다크 모드를 넣을지 같은 변형을 다시 고르게 했어요.

그다음은 AI가 혼자 했어요. 브라우저를 직접 조작해 데스크톱과 모바일 화면을 찍고, 자기 결과를 확인하며 40분 넘게 고쳤어요. Brian은 "It doesn't just hand me pixels. It does the part I'd skip."(화면만 건네고 끝내지 않는다. 내가 건너뛰었을 부분까지 해 준다)라고 적었어요.

이전 poornerd 디자인의 About 화면. 연회색 바탕에 'Technologist. Entrepreneur. Programmer.' 문구
이전 디자인의 About 화면이에요. Google Stitch와 Claude Design으로 만들었어요.
Hallmark로 다시 디자인한 poornerd 홈 화면. 캡슐 모양 상단 바와 다크 모드 버튼, 'poornerd' 제목, 'Read journal' 버튼, 글 카드
Hallmark로 다시 디자인한 홈 화면이에요. 상단 바 오른쪽에 다크 모드 버튼이 있어요.

Reference 02AI 활용 강좌와 멤버십을 운영하는 일본 강사 ウミノ · X (6월, v1)

자기 사이트를 다시 짜 달라고만 했는데, AI가 사이트의 목적을 알아채고 무료 강좌 안내를 첫 화면에 올렸어요

ウミノ는 Codex에 Hallmark를 넣고, 자기 공식 사이트에 다시 짜기(redesign) 명령을 돌렸어요. 결과를 보고는 "「メルマガの無料講座に登録してもらう」という一番の目的を、サイトの構成からAIが自動的に汲み取ってくれたんです。"('메일 매거진 무료 강좌에 등록하게 한다'는 가장 큰 목적을, AI가 사이트 구성에서 알아서 읽어 냈어요)라고 적었어요. 첫 화면은 메시지 문구가 크게 놓인 구성에서, 무료 강좌 신청으로 바로 이어지는 구성으로 바뀌었어요. ウミノ는 "一番クリックしてほしいものがファーストビューに入って、かつクリックするとちゃんとそこに飛ぶのが嬉しい。"(가장 눌러 줬으면 하는 것이 첫 화면에 들어오고, 누르면 제대로 그리로 넘어가서 좋다)라고 했어요.

같은 사이트를 점검(audit)하게 하자 보고서가 돌아왔어요. 결론은 "結論として、見た目と導線はかなり良い状態です。"(결론적으로 보기와 동선은 꽤 좋은 상태입니다)였어요. 그 아래에 첫 화면이 iframe 구조라 스크롤이 조금 불안정하다는 지적(P1), 신청 링크를 HTML에 직접 쓰지 않고 JS로 나중에 붙인다는 지적(P2), index.html이 약 6MB로 무겁다는 지적(P2)이 붙었어요. 마지막 줄은 먼저 고칠 두 가지였어요. "優先して直すなら、次は iframeのスクロール問題 と リンクのhref直書き化 です。"(우선 고친다면 다음은 iframe 스크롤 문제와 링크 주소를 HTML에 직접 쓰는 일입니다)

글 끝에는 ウミノ 자신의 강좌 링크가 붙어 있어요.

흰 바탕에 'AIを相棒にして、仕事・発信・商品づくりを、前に進める。' 문구가 크게 놓인 ウミノ 사이트의 이전 첫 화면
다시 짜기 전의 첫 화면이에요.
짙은 녹색 바탕에 'AIで、今日の仕事をひとつ軽くする。' 문구와 무료 강좌 카드 세 장이 놓인 새 첫 화면. 카드 둘레에 빨간 상자와 'ここが追加' 주석
Hallmark로 다시 짠 첫 화면이에요. 빨간 상자와 'ここが追加(여기가 추가됨)'는 ウミノ가 직접 표시했어요.

Reference 03루마니아의 소프트웨어 엔지니어 Mihai-Cristian Farcaș · X (10월 24일, v2)

Hallmark 새 판(v2)이 나온 지 이틀 만에, 학습 앱의 서재·복습 카드·개념 그래프 화면을 한 디자인으로 새로 짰어요

Mihai는 v2가 나온 지 이틀 뒤, 자기 학습 플랫폼의 화면을 Hallmark v2로 다시 디자인하고 결과 영상을 올렸어요. 영상에는 크림색 바탕에 세리프 글꼴로 쓴 "Good afternoon." 인사와 "Ask your library anything…" 입력창, 읽던 책의 진행률과 복습 카드가 나와요. 이어서 책 표지가 놓인 서재(Library), 노트(Notes), 개념끼리 이어 놓은 그래프(Brain) 화면이 차례로 지나가요.

Mihai는 "I used @nutlope 's Hallmark v2 skill to redesign my learning platform and I'm pretty impressed! Smooth transitions, clean animations, mindful of the layout."(Hallmark v2 스킬로 내 학습 플랫폼을 다시 디자인했는데 꽤 감탄했다! 화면 전환이 부드럽고, 애니메이션이 깔끔하고, 배치를 신경 썼다)라고 적었어요.

사람들의 반응

좋았다는 반응

  • “the only one that didn't make up stats or testimonials: every number is labelled "sample data".”

    통계나 후기를 지어내지 않은 유일한 결과물이다. 모든 숫자에 '샘플 데이터'라고 붙어 있다.

    인기 디자인 스킬 8개에 같은 랜딩 페이지 부탁을 주고 결과를 나란히 비교한 글이에요(10월, v1 기준).

    Paralect · 개발 에이전시의 디자인 스킬 비교 글paralect.com
  • “Every page without the skill had the tell; half the pages with it did not.”

    스킬 없이 만든 페이지는 모두 그 티가 났고, 스킬을 붙인 페이지는 절반이 그렇지 않았다.

    순수한 검정·흰색을 쓰는지를 직접 셌어요. 스킬 없이 40개 중 40개, 붙이면 28개 중 14개였어요(9월, v1, claude-haiku-4-5).

    ktlesr · GitHubgithub.com
  • “Hallmark by nutlope for UI its a deductiv list and forces AI to make anti slop UI instead of forcing a pattern that quickly becomes recognisable(an issue i spotted with impeccable and others).”

    UI에는 nutlope의 Hallmark. 하지 말 것을 빼 나가는 목록이라, 금방 알아보이게 되는 틀을 강요하지 않고 AI가 AI로 만든 티가 나지 않는 UI를 만들게 한다(impeccable 같은 다른 것들에서 내가 본 문제다).

    v2가 나오기 전(10월 16일) 댓글이에요. impeccable은 다른 디자인 스킬이에요.

    u/General_Cap_6316 · Reddit r/ClaudeAIreddit.com
  • “Nice skill, much needed these days; I know I'm not the only one that yearns for variety, even in our internal tool pages.”

    좋은 스킬이다. 요즘 꼭 필요하다. 사내 도구 페이지에서조차 다양함을 바라는 사람이 나만은 아닐 것이다.

    v1 소개 글에 달린 댓글이에요.

    mondainx · Hacker Newsnews.ycombinator.com
  • “Impeccable and https://www.usehallmark.com/ works well for me.”

    Impeccable과 https://www.usehallmark.com/ 이 나한테는 잘 맞는다.

    v2 발표 사흘 뒤 글이에요.

    Thet Hmuu · Xx.com

아쉬웠다는 반응

  • “12 of the 40 attempts with the skill ended without building anything”

    스킬을 붙인 40번 가운데 12번은 아무것도 만들지 않고 끝났다

    부탁에 이미 답이 있는데도 질문만 하다 멈췄다고 적었어요(9월, v1, claude-haiku-4-5).

    ktlesr · GitHubgithub.com
  • “The catch: cream, a serif and one accented word is close to the default frontend-design bans.”

    걸리는 점: 크림색, 세리프, 강조한 한 단어는 기본 frontend-design이 금하는 것에 가깝다.

    같은 비교 글에서 Hallmark 결과물을 두고 한 말이에요(10월, v1 기준). frontend-design은 Anthropic이 공개한 기본 디자인 스킬이에요.

    Paralect · 개발 에이전시의 디자인 스킬 비교 글paralect.com
  • “Has anyone got this or impeccable or any other to actually work? For me it still pretty much looks like slop.”

    이거나 impeccable, 아니면 다른 무엇이든 실제로 제대로 되게 한 사람 있나? 나한테는 여전히 거의 AI로 만든 티가 나는 것처럼 보인다.

    v1 소개 글 댓글이에요. 이어서 결국 계속 지시하고 고쳐야 한다고 했어요.

    aleksiy123 · Hacker Newsnews.ycombinator.com
  • “Loving the collage of screenshots where every one screams of being AI generated”

    하나같이 AI로 만들었다고 외치는 스크린샷 모음, 참 좋네요

    v1 README의 예시 화면 모음을 두고 비꼰 말이에요. 예시 가운데 Cold Snap과 Mend Assembly 둘만 좋다고 했어요.

    loopmonster · Hacker Newsnews.ycombinator.com

시작하는 법

Claude Code, Codex, Cursor, OpenCode 같은 코딩 에이전트에 아래 요청을 붙여 넣으면 돼요. 무료이고 API 키도 필요 없어요. 브라우저 검사까지 하려면 컴퓨터에 Chrome이 있어야 하고, 에이전트가 puppeteer-core 설치 허락을 물어볼 수 있어요.

  1. 시작 요청

    Hallmark 디자인 스킬을 써 보고 싶어. 이 글을 참고해 줘: https://www.working-ref.com/reference/hallmark-v2-2026-10 아직 안 깔려 있으면 npx skills add nutlope/hallmark -g 로 설치해 줘. 그다음 내 관심사와 지금 이 프로젝트를 보고 Hallmark로 해 볼 만한 것 세 가지를 제안해 줘(예: 지금 있는 페이지 점검만 받기, 링크와 입력칸은 그대로 두고 다시 짜기, 새 랜딩 페이지 만들기). 내가 하나 고르면 바로 시작하고, 고를 게 없으면 이 프로젝트의 페이지를 점검(audit)하는 것부터 해 줘.

이 레퍼런스 공유하기

매주 1회 · 무료

이 레퍼런스가 도움이 되셨나요?

매주 쏟아지는 AI 소식 중 BEST
딱 3개만, 메일함에 꽂아 드릴게요

Work Smarter with AI

420명이 매주 받아보고 있어요

구독 완료 다음 호부터 메일함에서 만나요.

디자이너도 아닌데 블로그 디자인을 AI에게 맡겼더니, 예전 디자인이 창피해 보일 만큼 좋아졌어요 | 레퍼런스