에이전트 스킬·프롬프트도구/라이브러리CSS

Nutlope/hallmark

Anti-AI-slop design skill for Claude Code, Cursor, and Codex.

GitHub 에서 보기 ↗카드 기준일 2026-10-31 · 처음 작성 2026-11-02
+11,739지난 주
36.2%규모 대비 성장률
44,127누적 스타

AI 작성이 카드는 AI(Claude)가 공개 자료(README·릴리스·HN·웹 글)로 쓴 요약입니다. 사람이 검토하지 않았으며, 주장마다 출처 링크와 확인·추정 표시를 붙였습니다. 숫자는 GitHub API 값을 코드가 채웁니다.

013줄 요약

  • 무엇인지 — Nutlope/hallmark는 Claude Code·Cursor·Codex·OpenCode 같은 코딩 에이전트가 만드는 웹 페이지에서 'AI가 만든 티'를 걸러 내는 디자인 스킬이다.
  • 왜 지금 떴나 — 5월 공개 뒤 7월에 GitHub Trending 상위권에 올랐고, 테마를 50개로 늘린 v2 README가 나온 상태에서 2026-10-25 HN에 소개글이 올라와 다음 날 스타가 급증한 것으로 보인다.
  • 어떤 의미인지 — 에이전트가 생성하는 UI가 서로 비슷해지는 문제를 프롬프트 요령이 아니라 규칙·테마·브라우저 린트·리뷰 단계로 묶어 다루는 스킬 패키지 사례다.

02숫자

누적 스타44,1272026-10-31
지난 주+11,739전주 2,253
규모 대비 성장률36.2%주 시작 32,388
생성04.272026년
주간 스타 · 최근 12주
12주 전10.25 주
이번 주 일별 스타 (UTC)
일 10.25토
항목값
누적 스타44,127 (2026-10-31 기준)
이번 주 증가+11,739
성장률+36% (주 시작 32,388)
AI 탭 순위지금 뜨는 6위
일별 증가10-25 +2,001 · 10-26 +2,676 · 10-27 +2,324 · 10-28 +1,630 · 10-29 +1,216 · 10-30 +963 · 10-31 +929
급등일2026-10-26 +2,676 (평소의 36배)
유형 · 카테고리도구/라이브러리 · 에이전트 스킬·프롬프트 (보조: 코딩 에이전트·IDE)
확인 필요없음

03왜 지금 떴나

  • 2026-05-19 Hassan(Nutlope)이 X에서 Hallmark를 공개했다. 오픈소스 디자인 스킬이며 Build·Study·Redesign·Audit 네 명령을 제공한다고 밝혔다. x.com (확인)
  • 2026-06-03 v1.1이 나왔다. x.com (확인)
  • 2026-07-15 GitHub Trending에서 처음으로 2위에 올랐고, Trendshift 일간 1위도 기록했다. trendshift.io · medium.com (확인)
  • 2026-07-17 설치·사용 가이드와 YouTube 튜토리얼이 잇따라 나왔다. 이 시점 자료는 테마 20개, slop-test gate 57개 체계를 설명한다. explainx.ai · youtube.com · dashen-tech.com (확인)
  • 2026-10-25 HN에 'The design skill that ends AI slop'이라는 제목으로 소개글이 올라왔다. 바로 다음 날인 10-26이 급등일이다. HN (확인)
  • README의 'New in v2' 항목은 테마 50개, URL·dev server 스크린샷 자동 캡처, 공개 라이선스 사진 사용, redesign/audit 명령을 소개한다. 이 확장이 급등 시점의 화제를 다시 끌어온 것으로 보인다. GitHub (추정)

04무엇인가

코딩 에이전트에게 랜딩 페이지를 맡기면 결과가 거의 같다. 보라색 그라디언트, 똑같은 카드 그리드, 모든 제목 위의 eyebrow 라벨, 끝마다 붙는 이메일 구독란 같은 요소가 반복된다. Hallmark는 이런 '기계가 만든 티'를 목록으로 정해 두고, 에이전트가 학습된 기본값으로 흘러가지 않도록 막는 스킬이다. Together AI가 만들었고, npx skills add nutlope/hallmark로 각 도구의 스킬 위치에 설치한다.

검사 단계는 세 층이다. Floor는 반드시 통과해야 하는 최저선이다. 대비, 포커스, reduced motion, 지어낸 사실, 깨진 모바일 레이아웃을 본다. Reflex는 모델이 습관적으로 쓰는 기본값으로, 이유를 기록하면 넘어갈 수 있다. Finish는 출시를 막지 않는 마감 디테일이다. 테마는 페이지 구성을 지정하지 않는다. 종이·서체·색·표면·컴포넌트를 담은 '재료'일 뿐이며, 파일 하나당 8KB 이하로 references/themes/에 들어 있다. custom 모드에서는 테마 없이 direction.md의 방향과 검사만 적용한다.

빌드는 네 단계로 진행한다. 먼저 프로젝트의 폰트·팔레트·프레임워크·design.md를 읽고, 사진이나 실제 수치 같은 자료를 한 번 묻는다. 다음으로 scripts/theme.mjs deal이 프롬프트에 맞는 테마 3개를 제시하고, draw가 페이지의 용도에 따라 구성을 정한다. 이어서 hero를 먼저 단독으로 렌더링해 검토한다. 마지막으로 scripts/sloplint.mjs --render가 8개 폭에서 페이지를 검사하고, 새 컨텍스트의 서브에이전트가 최종 리뷰를 맡는다. 결과물은 자체 완결된 HTML/CSS이며, 첫 CSS 주석에 내린 결정을 기록한다. 기존 페이지는 /hallmark redesign <path>로 내용과 연결을 유지한 채 다시 만들거나, /hallmark audit <path>로 보고서만 받을 수 있다.

05비교

  • Leonxlnx/taste-skill — 스킬 디렉터리 Cyrus에서 Hallmark와 같은 Design & Creative 분류의 관련 스킬로 함께 나열된다. 구체적인 차이는 근거에 없다. atcyrus.com (확인)
  • 같은 목록의 imagegen-frontend-web은 섹션별 디자인 참고 이미지를 생성한다. Hallmark는 실제 HTML/CSS 페이지를 만들고 린트까지 하는 점이 다르다. atcyrus.com · GitHub (추정)

06활용사례

  • npx skills add nutlope/hallmark 한 줄로 설치한다. Claude Code는 ~/.claude/skills/hallmark/, Cursor는 .cursor/rules/hallmark.mdc, Codex는 ~/.codex/skills/hallmark/에 설치된다. coddykit.com · atcyrus.com (확인)
  • YouTube 튜토리얼에서 저장소를 받아 회사용 커스텀 디자인 설정을 구성하고, 로컬에서 non-slop 인터페이스를 빌드하는 과정을 시연한다. youtube.com (확인)
  • 기존 사이트의 문구와 브랜드는 유지한 채 다시 만드는 Redesign, AI 티를 보고서로 받는 Audit, 스크린샷에서 테마를 추출하는 Study 용도로 쓸 수 있다. GitHub · x.com (확인)
  • v2.1.0 기준 사용 가이드와 Medium 분석 글이 나와 있다. 같은 사이트를 두 번 만들지 않게 하는 구조적 변주 방식에 주목한다. dashen-tech.com · medium.com (확인)

07한계·리스크

항목값
라이선스MIT
기여자7
상위 1명 기여 비중94%
지난 30일 이슈열림 6 · 닫힘 1
릴리스 주기릴리스 없음·모름
열린 이슈+PR75
  • 외부 글과 사이트는 테마 20개·gate 57개·v1.1을 설명하고, README는 v2·테마 50개를 말한다. 기능 구성이 빠르게 바뀌고 있어 서드파티 가이드가 금방 낡을 수 있다. GitHub · agentconn.com · dashen-tech.com · usehallmark.com (추정)
  • Together AI 소속 개발자가 공동 제작자와 함께 만든 소규모 프로젝트다. 방향과 유지보수가 소수에게 집중돼 있을 가능성이 있다. x.com · trendshift.io (추정)
  • MIT 라이선스여서 상업적 사용과 수정은 자유롭다. 다만 README가 openly licensed 사진 755장의 출처를 페이지에 표기한다고 밝히므로, 사진별 라이선스 조건은 따로 확인해야 한다. usehallmark.com · GitHub (추정)
  • 'hallmark'라는 이름이 마크다운 린터 vweevers/hallmark, 카드 회사, Hallmark Channel과 겹친다. 이 때문에 검색과 HN 반응 수집에서 무관한 결과가 대부분이었고, 급등 시점의 실제 커뮤니티 평가는 확인하지 못했다. github.com · HN 댓글 · hallmark-channel.pissedconsumer.com (확인)

08변경 기록

  • 2026-11-02 처음 작성 — 기준일 2026-10-31 · 근거 25건

근거