AI 티 안나는 웹페이지만들기
중급자용깃허브 주간 인기 TOP10© AIKOREACLUBNutlope/hallmark
AI 티 안 나는 웹페이지 만들기
코딩 AI가 웹페이지를 만들 때 테마 50개 중 셋을 먼저 내밀어 고르게 하고, 다 지은 페이지를 실제 브라우저에서 여덟 가지 화면 폭으로 검사해 기계가 만든 티를 걸러 줘요
코딩 AI에게 가게 홈페이지를 맡기면 제목마다 위에 작은 영어 머리글이 붙고, 제목 한 단어에만 색이 들어가고, 맨 끝에는 어김없이 이메일 구독 칸이 생겨요. 하나하나는 멀쩡한데, 모아 놓으면 기계가 찍어 낸 페이지로 보여요.할마크는 투게더 AI가 만든 디자인 스킬이에요. 이런 버릇을 목록으로 정해 막고, 테마 50개 중 요청에 맞는 셋을 먼저 내밀고, 다 지은 페이지는 실제 브라우저로 검사해요. 이번 주 깃허브에서 별을 1만 개 넘게 받았어요.
README에 실린 테마 그림 두 장이에요. 같은 스킬인데 테마에 따라 종이, 글꼴, 색, 질감이 완전히 달라져요. 테마는 재료일 뿐 페이지 순서는 정하지 않아서, 같은 테마로도 요청이 다르면 다른 페이지가 나온다고 해요.이미지·설명: Nutlope/hallmark README (MIT)
할마크가 잡는 '기계가 만든 티'
세 단계로 나눠 막아요. 바닥(대비, 키보드 초점, 움직임 줄이기, 지어낸 사실, 깨진 휴대폰 화면)은 절대 내보내지 않고, 버릇(위 같은 기본값)은 이유를 기록해야 넘어가고, 마무리 손질은 출시를 막지 않아요.
README가 꼽은 '기계가 만든 티'를 이해하기 쉽게 저희가 그린 예시예요. 실제 검사 결과는 페이지와 테마에 따라 달라져요.
한눈에
무엇인가요
할마크는 세 가지를 코딩 AI에 붙여 줘요.첫째, 넘으면 안 되는 문턱이에요. 바닥(Floor)은 절대 내보내지 않는 것으로 글자 대비, 키보드 초점 표시, 움직임 줄이기 설정, 지어낸 사실, 깨진 휴대폰 화면이 여기 들어가요. 버릇(Reflex)은 모델이 습관처럼 빠지는 기본값이라 이유를 기록해야 넘어갈 수 있고, 마무리(Finish)는 손질거리라 출시를 막지 않아요.둘째, 테마 50개예요. 테마 하나는 종이, 글꼴, 색, 표면, 부품, 질감을 정한 8KB 이하 파일 하나와 완성 페이지 그림 한 장이에요. 테마는 재료이지 설계도가 아니라서, 같은 테마라도 요청이 다르면 다른 페이지가 나와요.셋째, 실제 브라우저 검사예요. sloplint 가 페이지를 여덟 가지 화면 폭으로 열어 보고, 마지막엔 앞선 대화를 모르는 보조 에이전트가 새 눈으로 한 번 더 봐요.
함께 쓰는 도구 · 클로드 코드 · 코덱스 · 커서 · 오픈코드
이런 분께
- 코딩 AI로 랜딩 페이지나 가게 소개 페이지를 자주 만드는 분
- 매번 같은 품질 기준으로 페이지를 뽑고 싶은 분
- 이미 있는 페이지를 내용과 연결은 그대로 두고 새 모습으로 바꾸고 싶은 분
어떻게 작동하나요
한 번 지을 때 순서가 정해져 있어요.
1. 먼저 프로젝트를 읽고(글꼴, 색, 프레임워크, 잠가 둔 design.md) 사진, 스크린숏, 실제 숫자를 한 번 물어요. 아무것도 지어내지 않아요.
2. theme.mjs deal 이 요청에 맞고 최근 기록과 겹치지 않는 테마 셋을 내밀고, draw 가 페이지가 할 일(예약, 판매, 구독)에 맞춰 뼈대를 뽑아요.
3. 첫 화면(히어로)만 먼저 지어 띄워 보고, 나머지가 없는 상태에서 검토해요.
4. sloplint --render 가 여덟 가지 폭에서 검사하고, 보조 에이전트가 새 눈으로 다시 봐요.결과물은 하나로 된 HTML과 CSS예요. 첫 CSS 주석에 어떤 결정을 내렸는지 도장처럼 적어 둬요.이미 있는 페이지는 이름을 대야만 손대요. redesign 을 하면 sloplint --before 가 링크, 입력 칸, 동작, 제목을 모두 기록해 두고, 끝나면 --kept 로 빠진 게 없는지 확인한 뒤 전후를 나란히 보여 줘요. 모양만 바꾸려면 keep the layout, 티만 지우려면 polish 라고 덧붙이면 돼요.
할 수 있는 일
바로 쓸 수 있나요
필요한 것클로드 코드, 코덱스, 커서, 오픈코드 중 하나와 Node 18 이상. 브라우저 검사까지 하려면 puppeteer-core와 크롬
비용저장소는 무료(MIT). 쓰는 코딩 에이전트 요금은 따로예요
시작하기
- 설치
-g를 붙이면 모든 프로젝트에서 쓰고, 빼면 지금 프로젝트에만 들어가요. Node 18 이상이 필요해요. 한 도구에만 넣으려면 뒤에 --agent claude-code 처럼 붙여요.
npx skills add nutlope/hallmark -g - 클로드 코드 플러그인으로 넣기(선택)
이렇게 넣으면 /hallmark:hallmark 로 불러요.
/plugin marketplace add nutlope/hallmark /plugin install hallmark@hallmark - 브라우저 검사 준비(선택)
여덟 폭 검사와 스크린숏을 쓰려면 이것과 크롬이 필요해요. 없어도 코드만 보는 검사는 돌아가요.
npm i -g puppeteer-core - 불러서 쓰기
클로드 코드, 커서, 오픈코드는 /hallmark, 코덱스는 $hallmark 뒤에 요청을 써요. 저절로 안 켜지면 'hallmark를 써서 만들어 줘'처럼 이름을 말해요.
/hallmark <요청> - 이미 있는 페이지 점검
고치지 않고 문제만 보고받아요.
/hallmark audit ./index.html
/hallmark audit ./index.html
새 페이지 요청을 우리말로 써도 되는지는 README에 따로 적혀 있지 않아요. 테마를 고르는 낱말이 영어라서 업종 이름(bakery, orchard 같은)을 함께 적으면 맞는 테마를 찾기 쉬워요.테마 셋 받기부터 여덟 폭 검사까지
명령이 하는 일을 보여 주려고 저희가 그린 예시예요. 테마 그림은 할마크 저장소에 있는 실제 테마 그림이고, 어떤 테마가 나올지는 요청 문장과 날짜, 프로젝트에 따라 달라져요.
비슷한 도구
할마크 README는 임페커블과 taste-skill에서 영감을 받았다고 밝혀요. 셋 다 'AI 티'를 겨누지만, 할마크는 정해 둔 테마 재료와 여덟 폭 검사가 특징이에요(각 README 기준).
주의할 점
- 사진 목록은 위키미디어 공용에 있는 사진을 가리키고, 사진마다 이용 허락(CC0, 퍼블릭 도메인, CC BY, CC BY-SA)이 달라요. 출처 표시가 필요한 사진이 섞일 수 있으니 페이지에 붙은 출처를 지우지 마세요.
- 결과물은 하나로 된 HTML과 CSS 파일이에요. 이미 쓰는 프레임워크 구조에 맞추려면 손이 더 갈 수 있어요.
- 클론에서 설치할 때 install-hook.mjs 를 돌리면 클로드 코드에 편집 때마다 실행되는 검사 훅이 추가돼요.
- 2026-11-03 기준 열린 이슈가 71개 있어요.
더 보기
투게더 AI(Together AI)가 만들었어요. README는 임페커블, 앤트로픽의 frontend-design, taste-skill 등에서 영감을 받았다고 밝혀요.
낯선 말
- 테마 · 이 저장소에서는 색, 글꼴, 종이 질감, 부품 모양을 정한 재료 묶음이에요. 페이지 순서는 정하지 않아요
- 린트 · 정해 둔 규칙에 어긋나는 곳을 자동으로 찾아내는 검사예요. 할마크의 검사기 이름이 sloplint 예요
- 히어로 · 웹페이지를 열면 맨 처음 보이는 큰 첫 화면이에요
- 머리글(eyebrow) · 제목 위에 작게 붙는 대문자 꼬리표예요. 모든 제목에 붙으면 AI 티가 나요
- 서브에이전트 · 본 에이전트가 따로 띄우는 보조 에이전트예요. 앞선 대화를 모르는 상태라 새 눈으로 검토해요
댓글
AI 답은 참고 자료예요. 법·세금·돈·건강처럼 삶에 큰 영향을 주는 일에서는 AI 답이 정답이 될 수 없어요. 최종 판단은 전문가나 공식 기관에서 확인하세요.
