스킬
분석 기준은 공식 저장소 Nutlope/hallmark의 6033bab2a8051b5454552d2e8e6cb8f27c483a42입니다. 기존 v1의 설치·검사 설명을 v2로 개정한 데 이어, 이번에는 50개 테마와 명시 입력 경로 오류 처리·결정적인 테마 색인·일정표 조건을 대조했습니다. 아래 명령은 독자를 위한 예시이며, 이번 분석에서는 설치·모델 호출·upstream 스크립트 실행을 하지 않았습니다.
Hallmark는 AI 코딩 도구가 새 페이지를 만들 때 읽는 skills/hallmark/SKILL.md, 주제별 문서, Node 검사 도구를 묶은 패키지입니다. 실행되는 웹 앱 자체가 아니라 페이지 제작 과정에 붙는 확장입니다. Claude Code·Codex·Cursor·OpenCode 경로를 안내하지만, 문서에서 지원한다고 한 것과 특정 도구에서 실제로 검증한 것은 구분해야 합니다.
v2의 핵심은 테마를 고정 레이아웃으로 쓰지 않는 점입니다. 테마는 색·서체·면·질감의 재료를 정하고, 페이지 구조는 방문자가 예약·구매·가입 등 무엇을 하러 왔는지에서 결정합니다. 기존 화면을 바꾸는 작업은 사용자가 Hallmark를 명시한 redesign이나 audit로 구분합니다.
2026-10-25 수집한 TrendShift Daily에서 4위였습니다. 순위는 관심의 신호이며 결과물 품질을 입증하는 벤치마크는 아닙니다. 기술적으로 볼 지점은 취향을 자연어 지침으로만 남기지 않고, 테마 선택·파일 생성·정적 검사·렌더 검사로 나눴다는 것입니다.
| 접근 | 얻는 것 | 남는 한계 |
|---|---|---|
| 일반 디자인 프롬프트 | 도입이 간단함 | 규칙 누락과 반복 선택을 추적하기 어려움 |
| Hallmark v2 | 50개 테마, 목적별 구조, 검사 결과와 예외 기록 | 문맥 적합성·사실성·미감을 모두 기계적으로 판정하지는 못함 |
| 컴포넌트 디자인 시스템 | 코드 수준에서 일관된 부품 제공 | 페이지의 자료·카피·구조 선택은 별도로 필요 |
README는 755개 공개 라이선스 사진 목록도 소개합니다. 사진 파일을 패키지에 포함하는 방식이 아니라 photos.json에 Wikimedia Commons의 출처·라이선스를 기록합니다. 프로젝트의 MIT 라이선스가 사진별 조건까지 대신하지 않습니다.
| 층 | 실제 파일·기술 | 책임 |
|---|---|---|
| 에이전트 지침 | Markdown·YAML, SKILL.md·references/ | 사전 조사, 구조·테마 선택, 제작·검토 순서 |
| 선택·생성 | Node ES modules, theme.mjs | 테마 후보·구조 선택과 tokens.css·base.css 골격 생성 |
| 정적 검사 | sloplint.mjs, Node 18+ | HTML·CSS와 JSX/TSX/Vue/Svelte/Astro의 클래스·마크업 검사 |
| 렌더 검사 | sloplint-render.mjs, puppeteer-core·Chrome | 실제 화면 크기·레이아웃·렌더 결과 확인 |
| 설치 | install.mjs, 파일 복사·참조 검사 | 스킬 본체와 references/scripts/agents를 도구별 폴더에 배치 |
| 전시 사이트 | site/의 정적 HTML·CSS·JS | 테마·제작 사례 제공. 별도 제품 서버는 없음 |
package.json의 버전은 2.0.0이고 files는 skills를 지정합니다. serve 스크립트는 Python으로 site 디렉터리를 제공할 뿐입니다. 단순한 정적 사이트와, 브라우저가 필요한 품질 검사 도구의 의존성을 혼동하지 않아야 합니다.
프로젝트·실제 자료·요구사항
→ 사전 조사 / 방문자의 작업 정의
→ theme deal: 후보 3개 → 테마 선택
→ draw: 작업·자료에 맞는 구조 선택
→ scaffold: tokens.css + base.css
→ 히어로 제작·검토 → 나머지 페이지
→ sloplint 정적 검사 + 브라우저 렌더 검사
→ 판단이 필요한 규칙 검토 / 결과 기록사용자가 custom을 요청하면 정해진 테마·구조 조합 대신 direction.md를 따르지만 공통 하한과 검사는 유지됩니다. 이 구분은 자유로운 미감과 반드시 지켜야 할 동작 조건을 분리하려는 설계입니다.
| 등급 | 의미 |
|---|---|
| Floor | 예외를 허용하지 않는 하한. 위반은 FAIL |
| Reflex | 모델의 흔한 기본값. 근거가 있는 예외를 기록할 수 있으며 미해결은 REFLEX |
| Finish | 완성도에 관한 확인. 답을 기록하되 자체로 출고를 막지 않음 |
| Ledger | 반복 선택 장부. NOTE로 보고 |
references/gates.md는 별도로 M(정적), R(렌더), J(판단) 검사 주체를 표시합니다. sloplint.mjs는 이 문서를 등급 기준으로 사용합니다. 따라서 “FAIL 0”은 Floor 위반이 없다는 뜻이며, 모든 판단 항목까지 합격했다는 뜻은 아닙니다. 예외도 아무 문자열이 아니라 규칙·전제 근거·해당 페이지의 이유를 남겨야 합니다.
install.mjs는 참조·테마를 검사한 뒤 임시 설치 디렉터리에 복사하고 최종 경로로 교체합니다. 심볼릭 링크는 따라가지 않으며 fixtures·node_modules 같은 항목은 제외합니다. Codex와 Cursor에는 ~/.agents/skills/hallmark를 사용하고, 옛 ~/.codex/skills/hallmark가 있으면 중복 탐지 안내를 냅니다. OpenCode는 호환 경로를 발견하면 복사를 생략할 수 있습니다.
Refract와 Vantage가 추가돼 references/themes/index.json의 실제 항목은 50개입니다. Refract는 밝은 종이·물/유리의 빛, Vantage는 어두운 바탕·점군을 재료로 정의합니다. 두 테마 모두 움직임 감소 시 정지 화면을 제시합니다. 이 글에서는 테마 스크립트를 실행하거나 새 화면·이미지를 만들지 않았습니다.
sloplint.mjs의 collectFiles()는 사용자가 명시한 최상위 경로를 읽지 못하면 process.exit(2)로 중단합니다. 경로를 잘못 준 검사를 “위반 없음”으로 오해하지 않게 하는 변경입니다. theme.mjs는 색인에서 당일 날짜를 제거해 내용이 같으면 날짜 때문에 결과가 달라지지 않게 했습니다.
references/layout.md는 일정표를 방문자가 예약·선택하는 실제 시간에만 쓰도록 범위를 명시합니다. 작업 과정을 임의 시각표로 바꾸라는 지침이 아닙니다. Bloom의 clip 기본색도 정의된 --lane-1을 사용하도록 고쳤습니다.
hallmark/
├─ package.json v2.0.0·배포 범위
├─ skills/hallmark/
│ ├─ SKILL.md 작업 진입점
│ ├─ agents/openai.yaml 도구 메타데이터
│ ├─ references/
│ │ ├─ anatomy.md · flow.md 목적별 구조·실행 흐름
│ │ ├─ gates.md 등급·검사 주체·예외
│ │ ├─ patterns.md · redesign.md
│ │ └─ themes/ 50개 테마·이미지·색인
│ └─ scripts/
│ ├─ theme.mjs · install.mjs
│ ├─ sloplint.mjs · sloplint-render.mjs
│ └─ photos.json · fixtures/
├─ site/ 전시 사이트·제작 사례
└─ eval/ 평가 도구·브리프읽기 순서는 README → package.json → SKILL.md → gates.md → 검사 코드입니다. 사진·생성 API와 연결되는 선택 도구도 있으므로 “스킬 설치에 별도 서버가 없다”를 모든 기능이 오프라인이라는 의미로 넓히지 않습니다. 이번 분석은 그런 도구를 실행하지 않았습니다.
| 목적 | 조건 |
|---|---|
| 문서·코드 학습 | Git·편집기. GPU와 모델 호출 불필요 |
| 설치·정적 검사 | README 기준 Node 18+. AI 제작 과정에는 지원 코딩 도구 필요 |
| 렌더·스크린숏 검사 | 추가로 puppeteer-core와 Chrome 필요. 없으면 정적 검사만 가능 |
| 데모 사이트 | Python 정적 서버로 site/ 제공 가능 |
| 외부 이미지·생성 도구 | 선택 경로별 네트워크·인증·사용료 확인. 기본 스킬의 필수 키와 혼동하지 않음 |
README의 기본 설치 예시는 npx skills add nutlope/hallmark -g이며 -g는 전역 설치입니다. 프로젝트 한 곳에서만 사용하려면 빼고, 특정 도구만 선택하려면 해당 installer의 agent 옵션을 확인합니다. 설치 전에 스킬 지침과 포함 스크립트를 읽는 것이 좋습니다.
PIN=6033bab2a8051b5454552d2e8e6cb8f27c483a42
git show "$PIN:package.json"
git show "$PIN:skills/hallmark/references/gates.md"
git show "$PIN:skills/hallmark/scripts/install.mjs"완료 기준: package 버전, Floor/Reflex 차이, Codex 설치 경로를 파일별로 적습니다. 위 명령은 이미 확보한 공식 clone에서 파일을 읽으며 스킬을 실행하지 않습니다.
gates.md에서 M·R·J 항목을 하나씩 골라 “소스 문자열만으로 판정할 수 있는가”를 설명합니다. 예를 들어 transition: all과 실제 첫 화면에 CTA가 보이는지는 필요한 증거가 다릅니다.
install.mjs에서 참조 검사 실패, OpenCode 복사 생략, 레거시 Codex 경로 경고를 찾습니다. 사용자의 스킬 폴더를 변경하지 않고 조건→출력→파일 쓰기 여부의 표를 만듭니다.
별도 연습 프로젝트에서 동일 브리프의 결과물을 비교할 계획을 세웁니다. 정적 검사·8개 폭 렌더·실제 자료의 정확성·사람의 평가를 나누고, 모델·설치·캡처 실행 비용과 조건은 실제 수행 전에 확인합니다. 이 글의 검토를 실행 결과로 쓰지 않습니다.
| 주차 | 읽기와 산출물 |
|---|---|
| 1주 | SKILL.md·anatomy.md: 사용자의 작업에서 페이지 구조로 이어지는 결정 지도 |
| 2주 | themes·tokens·patterns: 같은 테마로 다른 페이지가 가능한 변수 구분 |
| 3주 | sloplint와 gates: 정적 검사가 잡는 것·못 잡는 것의 사례표 |
| 4주 | 렌더 검사·redesign: 기존 링크·입력·핸들러 보존과 시각 품질을 함께 평가하는 계획 |
| 용어 | 이 저장소에서의 의미 |
|---|---|
| 스킬 | 코딩 도구가 읽는 작업 지침과 보조 파일 묶음 |
| 테마 / 구조 | 시각 재료 / 페이지의 내용·배치. 둘을 같은 템플릿으로 취급하지 않음 |
| Floor / Reflex | 예외 불가 하한 / 근거를 남길 수 있는 기본 규칙 |
| 정적 / 렌더 검사 | 소스 코드 관찰 / 실제 브라우저 결과 관찰 |
| scaffold | tokens.css·base.css 등 제작 시작 골격 |
| waiver | 규칙·전제·이유가 기록된 Reflex 예외 |