Together AI의 웹 디자인 스킬: 에이전트에게 완화할 수 없는 16가지의 기본 원칙(색상과 폰트는 토큰 사용, 데이터 및 리뷰 조작 금지, 첫 화면에 제목과 주요 버튼 배치 등)을 설정하고, 테마 라이브러리에서 세 가지 방향 중 하나를 선택하여 제작 후 sloplint로 브라우저에서 위반 사항을 확인한 뒤 전달합니다.
skills.sh 설치 횟수 74901(+2635 / 24시간)
보안 감사: 위험 경고 있음
- 스캔되지 않은 스크립트 참조: scripts/sloplint.mjs, scripts/capture.mjs, scripts/theme.mjs
- 감사 범위: GitHub nutlope/hallmark/skills/hallmark/SKILL.md(SKILL.md 텍스트만 스캔)
이유
- 기본 원칙이 구체적인 CSS로 적용됨: transition: all 미사용, width / height / top / left 애니메이션 미사용, html 및 body에 overflow-x: clip 사용, 모든 인터랙티브 요소에 :focus-visible 적용, 모든 애니메이션에 prefers-reduced-motion 대체 옵션 포함
- 작업 시작 전 네 가지 사항(소재, 대상 독자, 페이지가 유도할 행동, 어조)만 한 번 질문; 제공되지 않은 숫자, 인용문, 로고는 모두 공백으로 남겨 에이전트가 임의로 생성하지 않도록 함
- theme.mjs가 프롬프트에 따라 세 가지 테마를 제시하고 로그를 기록하여 연속된 두 작업이 동일한 스타일로 되지 않도록 방지; 작성자는 테마 라이브러리에 50가지의 질감, 사진 라이브러리에 755장의 오픈 라이선스 사진이 있다고 언급하며, 사용 시 푸터에 출처를 표기함
- skills.sh에서 24시간 동안 2635회 설치, 누적 74901회; 최근 일주일간 6181회, 이전 몇 주간은 모두 2천 회대(관심도만을 나타냄)
사용법
- npx skills add https://github.com/nutlope/hallmark --skill hallmark(작성자의 README에서는 npx skills add nutlope/hallmark -g로 전역 설치 권장); Claude Code 플러그인도 존재
- 새 페이지 제작 시 요구 사항을 직접 설명; 기존 페이지 수정 시 /hallmark redesign <경로> 또는 /hallmark audit <경로>와 같이 명시적으로 지정
- Node 18 이상 필요; 브라우저 검사 및 스크린샷을 위해 npm i -g puppeteer-core 및 Chrome이 추가로 필요하며, 없을 경우 정적 검사만 실행
리스크
- 감사 경고에서 언급된 sloplint.mjs, capture.mjs, theme.mjs 세 스크립트는 스캔되지 않음; SKILL.md는 에이전트가 Node로 이들을 실행하도록 하며, capture.mjs는 제품 URL이나 개발 서버를 열어 스크린샷을 찍는데 이는 용도에 부합함
- 사진 라이브러리는 Wikimedia Commons 링크만 저장하고 이미지 파일은 포함하지 않아, 사용 시 네트워크를 통해 이미지를 가져와야 함; 스캔 시 이 네트워크 항목은 별도로 명시되지 않음
- 프로세스가 여러 참고 파일을 읽고 여러 라운드의 재검사를 요구하며, 작성자도 파일 추가 로드가 가장 큰 회피 가능한 비용임을 명시함