Nutlope/hallmark

어떤 프로젝트인가요?

핵심 기능

• 01코드를 작성하기 전에 요구사항에 맞춰 페이지의 매크로 구조를 선택합니다.
• 0221가지 테마를 제공하며, 맞는 테마가 없는 요구사항에는 Custom 모드를 사용할 수 있습니다.
• 03출력 전에 안티패턴 57가지를 점검하고 자체 비평을 수행합니다.
• 04기존 코드를 수정하지 않고 감사해 할 일 목록을 반환합니다.
• 05스크린샷이나 URL에서 레이아웃, 서체 조합, 컬러를 추출해 design.md로 저장합니다.

활용 사례

• AI 코딩 어시스턴트로 흔해 보이지 않는 랜딩 페이지나 제품 UI를 만들 때.
• 기존 프런트엔드 코드베이스에서 흔한 AI 생성 디자인 패턴을 검토할 때.
• 카피와 구조는 유지하면서 사이트의 외관을 재디자인할 때.
• 마음에 드는 디자인을 다른 도구에서 재사용할 수 있는 디자인 브리프로 바꿀 때.

빠른 시작

1. 1

   npx로 스킬을 설치하세요

   npx skills add nutlope/hallmark
2. 2

   AI 코딩 도구(Claude Code, Cursor 또는 Codex)를 열고 UI를 만들어 달라고 요청하면 스킬이 자동으로 적용됩니다

사용 전 알아둘 점

• !AI 코딩 에이전트를 위한 프롬프트 규칙 모음이므로, 지원되는 도구를 이미 사용 중인 경우에만 도움이 됩니다.
• !결과물의 품질은 기반이 되는 AI 모델과 제공하는 brief에 따라 달라집니다.

토픽

자주 묻는 질문

hallmark은(는) 무엇인가요?

Claude Code, Cursor, Codex용 디자인 스킬로, AI 코딩 에이전트가 AI가 만든 듯한 티가 나지 않는 UI를 구현하도록 돕습니다. Hallmark는 Claude Code, Cursor, Codex 같은 AI 코딩 어시스턴트에 연동하는 디자인 스킬입니다. 주어진 요구사항에 맞는 페이지 구조를 선택하고, 21가지 테마 중 하나를 적용하며, 결과를 반환하기 전에 흔히 나타나는 AI 디자인 패턴 57가지를 점검합니다.

hallmark은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

hallmark은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

hallmark은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. hallmark의 마지막 커밋은 2026년 8월 6일입니다.

hallmark은(는) 어디에 사용할 수 있나요?

AI 코딩 어시스턴트로 흔해 보이지 않는 랜딩 페이지나 제품 UI를 만들 때. 기존 프런트엔드 코드베이스에서 흔한 AI 생성 디자인 패턴을 검토할 때. 카피와 구조는 유지하면서 사이트의 외관을 재디자인할 때. 마음에 드는 디자인을 다른 도구에서 재사용할 수 있는 디자인 브리프로 바꿀 때.

hallmark는 어떻게 설치하나요?

npx로 스킬을 설치하세요: npx skills add nutlope/hallmark AI 코딩 도구(Claude Code, Cursor 또는 Codex)를 열고 UI를 만들어 달라고 요청하면 스킬이 자동으로 적용됩니다

hallmark은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Nutlope/hallmark