Hallmark
AI 코딩 어시스턴트를 위한 디자인 스킬입니다. 생성된 UI가 마치 사람이 만든 것처럼 보이게 합니다.
Hallmark는 독선적이고, 짧고, 의도적으로 지루합니다. 이는 반(反)AI-슬롭(anti-AI-slop) 디자인 분야(Anthropic의 프론트엔드 디자인 스킬, 프론트엔드 미학에 관한 Claude cookbook, 2026년 '촉각적 반란' 운동)의 합의에서 도출된 엄격한 규칙 집합을 인코딩하며, 모든 LLM이 학습한 기본값으로 모델이 퇴보하는 것을 거부합니다.
차별화 요소: Hallmark는 시각적 다양성뿐만 아니라 구조적 다양성을 주장합니다. 서로 다른 두 브리핑에 대한 Hallmark의 두 페이지는 동일한 히어로 → 3-기능 → CTA → 푸터 리듬을 공유해서는 안 됩니다. 동일한 템플릿의 다른 색상 교체가 아닌, 다른 사이트처럼 느껴져야 합니다. references/structure.md를 참조하세요.
Together AI 제공.
이 스킬 사용 방법
Hallmark는 하나의 기본 동작과 세 가지 명시적 동사를 가지고 있습니다.
| 호출 | 기능 |
|---|---|
| (기본) | 사용자가 새로운 것을 디자인하거나 빌드해 달라고 요청했습니다. 아래의 디자인 흐름을 따르세요. |
hallmark audit <target> | 대상을 읽고, 안티-패턴 목록에 따라 점수를 매긴 후, 순위가 매겨진 펀치 목록을 반환합니다. 편집하지 마십시오. |
hallmark redesign <target> [--mood <name>] | 대상의 콘텐츠와 의도를 가져와 사용자가 전체 재구축을 명시적으로 확인하지 않는 한 기존 구현 경계 내에서 시각적 구조를 재설계합니다. 새로운 섹션 리듬, 새로운 제목 배치, 새로운 컴포넌트 스타일. 기존 라우트, 컴포넌트 소유권, 복사 의도, 브랜드 및 정보 아키텍처를 유지합니다. 요청된 범위에 필요한 시각적/상호작용 레이어만 교체합니다. |
hallmark study <screenshot | URL> | 사용자가 감탄하는 디자인의 이미지를 붙여넣거나 첨부했거나, 또는 라이브 페이지의 URL을 붙여넣었습니다. DNA - 거시 구조, 아키텍처, 유형 페어링, 색상 앵커 - 를 추출하여 진단 보고서를 생성한 다음, 선택적으로 추출된 DNA를 사용하여 사용자의 콘텐츠를 재구축하거나 또는 이식 가능한 design.md로 DNA를 출력합니다. 감지는 자동입니다. URL (http:// / https:// 접두사)은 URL 모드로 라우팅됩니다. 다른 모든 것은 이미지 모드로 라우팅됩니다. URL 모드는 WebFetch를 통해 페이지의 HTML과 CSS를 읽습니다. 정확한 글꼴과 정확한 색상 값을 지정할 수 있지만 리듬을 판단할 수는 없습니다. 진단 후 사용자는 세 가지 후속 조치를 취할 수 있습니다: DNA로 빌드(기본값으로 전환), DNA를 이식 가능한 design.md로 잠금("DNA 잠금" / "design.md 제공"을 통해 선택), 또는 진단에서 중단. 픽셀을 복사하지 않습니다. 템플릿 마켓플레이스 URL을 거부합니다. 진단 자체보다 design.md 출력에 더 엄격한 거부 계층을 적용합니다. URL 모드 출력은 소스가 사용자 자신의 것이거나 사용자 자신의 브랜드를 위한 공개 참조임을 증명해야 합니다. URL이 인증 장벽, JS 전용 SPA 셸 또는 읽을 수 없는 경우 스크린샷을 요청하는 것으로 대체됩니다. 이 동사가 실행되기 전에 references/study.md를 로드하세요. |
사용자가 audit, redesign 또는 study에 명확히 매핑되지 않는 내용을 입력하면 기본값으로 처리합니다. 사용자가 동사 접두사 없이 이미지를 첨부하거나 URL을 붙여넣으면 다음과 같이 질문하세요: "이것을 study(DNA 추출)해야 할까요, 아니면 새 빌드의 참조로 처리해야 할까요?"
구현 안전 레일. Hallmark는 디자인 스킬이지 코드베이스를 밀어버리기 위한 면허가 아닙니다. 기존 프로젝트에서:
- 사용자가 명시적으로 삭제를 요청하거나 삭제 내용을 나열한 파일 수준 계획을 승인하지 않는 한, 프로덕션 파일, 라우트 트리, 컴포넌트 디렉토리 또는 이전 웹사이트를 절대 삭제하지 마십시오.
- 기본적으로 명명된 파일을 제자리에서 편집하거나 기존 경로를 통해 연결되는 추가 컴포넌트/토큰을 추가하십시오. 재설계로 인해 여러 컴포넌트를 제거해야 하는 경우 중단하고 먼저 확인을 요청하십시오.
- PDF, README 파일,
.md브리핑, 문서, 대본 및 피치 덱을 참고 자료로 취급하십시오. 사용자가 해당 텍스트를 그대로 사용하라고 명시적으로 말하지 않는 한 페이지에 그대로 복사하지 마십시오. - 편집하기 전에 수정/생성/삭제할 정확한 파일을 명시하십시오. 삭제에는 명시적인 확인이 필요합니다.
기본 디자인 흐름은 항상 테마를 선택합니다. 기본적으로 20개의 명명된 테마 - 카탈로그 - 중 하나를 선택하고 다각화 규칙에 따라 순환합니다. 또한 브리핑에 대한 일회성 OKLCH 팔레트 + 자유 글꼴 페어링을 구성하는 조용한 사용자 정의 분기가 있습니다. 사용자 정의 경로는 브리핑이 창의적 의도 신호를 전달할 때만 실행됩니다(사용자가 브랜드 색상을 지정하거나, 카탈로그가 전달할 수 없는 다중 속성 분위기를 지정하거나, 명시적으로 사용자 정의 테마를 요청하는 경우). 바닐라 브리핑의 경우 사용자는 "카탈로그" 또는 "사용자 정의"라는 단어를 절대 보지 못합니다. 카탈로그는 자동으로 실행됩니다. 1단계(신호 감지) 및 2.6단계(디스패치)를 참조하십시오. 프로토콜은 references/custom-theme.md에 있습니다.
모든 동사에 적용되는 규율
이 여섯 가지 규율은 동사별로 적용되지 않습니다. 기본 디자인, audit, redesign, study 및 컴포넌트 범위에도 동일하게 적용됩니다. 이는 슬롭 테스트와 함께 위치하며, 그 분기 내부가 아닙니다.
-
사전-출력 자기 비판. 출력을 반환하기 전에 6가지 축(철학, 계층 구조, 실행, 구체성, 절제, 다양성)에서 1-5점으로 점수를 매기십시오. < 3인 것은 수정 단계를 트리거합니다. 아티팩트 상단에 여섯 개의 점수를 스탬프로 찍으십시오(
/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */).references/slop-test.md§ 사전-출력 자기 비판을 참조하십시오. -
정직한 복사 - 허위 콘텐츠 금지. 사용자가 지표를 제공하지 않은 경우, 지표를 발명하지 마십시오. 통계 중심 레이아웃, 비교 행 및 증명 막대는 실제 숫자, 자리 표시자(
—+ 레이블이 지정된 회색 블록, "확인할 지표") 또는 다른 거시 구조를 사용해야 합니다. "+47% 전환율", "50,000개 이상의 팀이 신뢰" 및 *"10배 더 빠름"*은 발명되는 순간 슬롭입니다. 사용후기, 로고 및 사례 연구 수에도 동일한 규칙이 적용됩니다.references/anti-patterns.md§ 발명된 지표 및 슬롭-테스트 게이트 46을 참조하십시오. -
잠긴 토큰 - 중간 렌더링 즉흥 연주 금지. 2.6단계에서 테마가 선택되면, 아티팩트의 모든 색상 및 모든
font-family선언은 명명된 토큰을 참조해야 합니다(var(--color-accent),font-family: var(--font-display)). 인라인 OKLCH / hex /rgb()값 또는 토큰 블록을 우회하는font-family: "Some Font"선언은 허용되지 않습니다. 토큰으로 존재하지 않는 값이 필요한 경우, 새 명명된 변수로 토큰 블록에 올린 후 참조하십시오.references/anti-patterns.md§ 중간 렌더링 토큰 즉흥 연주 및 슬롭-테스트 게이트 48을 참조하십시오. -
다시 그린 크롬 금지. Hallmark는 가짜 브라우저 바(URL 알약 + 신호등 점), 가짜 전화 프레임, 가짜 코드 블록 창(모의 제목 표시줄 +
<pre>를 감싸는 점) 또는 가짜 IDE 크롬을 직접 빌드해서는 안 됩니다. 사용자 환경은 이미 실제 크롬을 제공합니다. 실제 스크린샷을<figure>로 감싸거나(최대 머리카락 선 테두리 사용) 크롬을 생략하고 콘텐츠가 자체적으로 서도록 하십시오.references/anti-patterns.md§ 다시 그린 UI 크롬 및 슬롭-테스트 게이트 47을 참조하십시오. -
모바일 반응성 - 모든 출력이 320 / 375 / 414 / 768px에서 검증됨. Hallmark의 출력은 네 가지 너비 모두에서 완벽하게 렌더링되어야 합니다. 양보할 수 없는 사항: 수평 스크롤 없음 +
html및body모두에overflow-x: clip, 절대hidden아님(게이트 34); 두 줄 클릭 가능 텍스트 없음 - 버튼, 기본 탐색 링크, 푸터 링크, 브레드크럼, CTA(게이트 49); 이미지 베어링 그리드 트랙은minmax(0, 1fr)사용,1fr만 사용하지 않음(게이트 50); 디스플레이 헤더는overflow-wrap: anywhere; min-width: 0을 통해 긴 단어 내에서 줄 바꿈(게이트 51); 섹션 헤드는 모든 테마 변형에서 모바일에서 한 열로 축소(게이트 52); 라디오-탭 패턴은 스크롤 점프를 일으키지 않음(게이트 53).references/responsive.md§ 모바일 - 양보 불가를 참조하십시오. 이것은 희망 목록이 아닌 하드 플로어입니다. -
타이포그래피 순수성 - 이탤릭 헤더 금지. 제목과 디스플레이 유형은 항상 로만체(
font-style: normal)입니다. 그 외에는 직립인 제목 안에 이탤릭체 강조 단어(Built to <em>think</em>)는 가장 신뢰할 수 있는 AI 특징 중 하나입니다. 제목에 모두 이탤릭체 디스플레이 서체를 사용하는 것도 마찬가지입니다. 강조는 가중치, 악센트 색상 또는 그려진 밑줄로 전달하십시오. 이탤릭체는 생존합니다
…
[번역을 위해 잘림]