Claude Code

AI 코딩 에이전트의 화면을 디자이너의 기준으로 설계하는 Hallmark

Hallmark는 Claude Code·Cursor·Codex가 웹 화면을 만들 때 페이지 구성과 디자인 규칙을 살피는 스킬입니다.

AI에게 랜딩 페이지를 맡기면 비슷한 화면이 되풀이될 때가 있습니다. 큰 제목과 카드가 이어지고, 마지막에는 CTA와 푸터가 붙는 식입니다. 이때 색만 바꾸는 것으로는 부족합니다. Hallmark는 브리프에 맞는 화면 구성을 고르고, AI가 자주 반복하는 디자인 패턴을 점검하는 오픈소스 스킬입니다.

Together AI가 만들었고 MIT 라이선스로 공개됐습니다. 이 글에서는 새 화면과 기존 화면을 다루는 방법, 설치 후 확인할 항목을 살펴봅니다.

매주 비슷한 랜딩 페이지를 고쳐야 하는 제품·마케팅 담당자와 Claude Code나 Codex로 프로토타입을 만드는 디자이너·개발자에게 맞는 내용입니다. 이미 승인된 화면을 픽셀 단위로 복제하거나 카피만 다듬는 작업이라면 redesign을 쓰지 않습니다.

Hallmark는 색보다 먼저 페이지 구성을 살핍니다

새 화면을 만들 때 Hallmark는 브리프를 읽고 페이지의 큰 구성을 고른 뒤, 장르에 맞는 21가지 테마 가운데 하나를 적용합니다. 사용자가 브랜드 색을 지정하거나 카탈로그로 담기 어려운 분위기를 말하는 등 뚜렷한 창작 의도를 제시할 때만 Custom 경로로 갑니다. 그런 신호가 없으면 카탈로그 테마를 기본으로 씁니다. 작업의 중심도 색이 아니라 화면 구성에 놓입니다.

공식 저장소에는 사워도우 앱과 콘텐츠 추출 API, 음반 레이블 등 서로 다른 주제의 예시가 있습니다. 이 예시들을 보면 화면의 비율과 정보가 놓이는 위치, 글꼴과 색을 쓰는 방식이 브리프마다 다릅니다. Hallmark는 색보다 정보의 우선순위와 화면 구성을 먼저 살핍니다.

Hallmark가 만든 Tally SaaS 공식 예시 화면
SaaS 브리프에 맞춰 큰 제목과 사용량 청구 화면을 배치한 Hallmark 공식 예시입니다.

새로 만들지, 점검할지에 따라 명령을 고릅니다

새 페이지를 요청하기 전에 Hallmark는 프로젝트의 설계 정보를 읽습니다. 루트에 design.md가 있으면 그 내용을 먼저 보고, 없으면 프로젝트에서 쓰는 글꼴과 색을 살핍니다. 모션 라이브러리와 간격, 프레임워크도 이어서 확인합니다. 그다음 누가 화면을 쓰는지, 화면에서 어떤 행동을 하게 할지, 어떤 분위기를 원하는지 확인합니다. 답을 받지 못하면 요청을 어떻게 이해했는지 먼저 적습니다.

새소식52개 새소식
New
AI 코딩 에이전트의 화면을 디자이너의 기준으로 설계하는 Hallmark

Hallmark는 Claude Code·Cursor·Codex가 만든 웹 화면의 반복 패턴을 점검하는 스킬입니다. 기본 동작과 세 가지 명령의 쓰임, 설치 방법, 테스트 폴더에서 확인할 항목을 정리합니다.

Octigen, 매달 바뀌는 데이터만 넣어 PowerPoint 보고서를 다시 만듭니다

Octigen은 기존 PowerPoint 템플릿과 월별 Excel 파일을 연결해 반복 보고서를 만듭니다. 연결 구조를 만들 때는 AI가 변환 단계를 만들고, 다음 달부터는 같은 규칙으로 데이터를 채워 담당자가 숫자와 문구를 검토하는 흐름입니다.

AI에게 일반 사용자처럼 화면을 보게 하는 UX 피드백봇

ChatGPT 프로젝트에 일반 사용자 관점의 지침을 저장하고, Claude Design에서 여러 페르소나의 반응을 비교해 배포 전 화면의 혼란 지점을 찾는 흐름을 소개합니다.

Slack Workflow Builder로 채널의 반복 요청을 폼으로 받기

Slack Workflow Builder로 반복 요청을 정해진 질문으로 받고, 응답을 채널 메시지와 Google Sheets에 연결하는 흐름을 정리합니다.

Markdown 폴더는 그대로 두고 위키 화면만 얹는 LeafWiki

문서를 옮기지 않고 찾는 화면만 얹고 싶은 팀을 위해, LeafWiki 도입 전에 링크 변경·리싱크·로그인 모드에서 확인할 지점을 정리했습니다.

nanobot, 채팅에서 파일과 예약 작업을 처리하는 개인 AI 에이전트

nanobot은 채팅 요청을 파일 작업과 예약 실행으로 이어 주는 개인 AI 에이전트입니다. 회의록 정리와 알림을 예로, 맡길 범위와 확인할 항목을 살펴봅니다.

Meetily, 회의를 전사하고 요약하는 로컬 AI 회의록 도구

Meetily는 녹음과 전사를 기기에서 처리하고, 요약에는 로컬 AI나 사용자가 고른 API를 연결할 수 있는 회의록 도구입니다.

Codex 사용 분석: AI에게 질문하던 사람들이 일을 맡기기 시작했습니다

OpenAI의 Codex 사용 분석에서 비개발자 사용 급증과 위임 시간의 변화를 읽습니다. 수치의 전제를 확인하고, 내 업무에서 맡길 일을 고르는 기준까지 정리했습니다.

OfficeCLI, 매달 고치는 보고서 파일을 AI에게 맡기기

OfficeCLI는 Word, Excel, PowerPoint 파일을 AI 에이전트가 읽고 고치게 하는 단일 바이너리 도구입니다. 보고서 파일 한 건으로 시작해 결과물을 화면에서 확인합니다.

문서를 열기 전에, 먼저 ‘어디로 보낼지’ 정합니다

Document Classify는 문서 양식 대신 팀이 정한 분류 설명을 읽어 PDF·스캔본·이미지를 나눕니다. 문서 20건을 작은 표본으로 시험한 뒤, 어느 결과까지 자동으로 넘길지 정합니다.

Claude Tag, Slack 채널에서 팀의 일을 이어받다

Claude Tag는 Slack 채널의 대화를 이어서 읽고 팀의 반복 업무를 맡습니다. 어떤 업무부터 시작할지, 권한과 비용을 어떻게 관리할지 정리했습니다.

Pagecast로 보고서 파일을 링크로 공유하기

Pagecast는 AI 코딩 에이전트가 만든 HTML·Markdown 보고서를 Cloudflare Pages 링크로 발행해 공유하는 도구입니다. 파일 첨부 대신 웹 링크로 넘기는 절차와 주의점을 정리했습니다.

Ponytail: AI가 일을 크게 벌이지 않게 하기

Ponytail은 Claude Code나 Codex가 작은 수정까지 과하게 키우지 않도록 ‘덜 만들고 덜 건드리는’ 기준을 붙이는 스킬입니다. lite/full/ultra 모드와 Hooks 확인 기준을 함께 봅니다.

agent-handoff로 Claude Code와 Codex 사이에서 작업 넘기기

agent-handoff는 Claude Code와 Codex 사이에서 세션 맥락을 손으로 요약하지 않고 넘기는 도구입니다. 넘길 대화와 이어갈 에이전트만 고르면 작업 전환이 쉬워집니다.

Headroom: 긴 출력물을 Claude Code에 가볍게 넘기는 도구

Headroom은 Claude Code가 긴 로그나 실행 결과를 읽기 전에 먼저 압축해 넘기는 도구입니다. /compact와 달리 입력 단계의 컨텍스트 부담을 줄이는 선택지입니다.

Claude가 우리 사이트를 알고 있는지 확인하기

Claude나 Perplexity 같은 AI 답변에서 우리 사이트가 어떻게 읽히는지 Claude Code로 점검하는 geo-seo-claude 스킬입니다. SEO 점수보다 답변 원문과 인용 가능성을 확인하는 흐름입니다.