<!-- omd:installed-skill, managed by `omd install-skills`. Do not edit; rerun the command to refresh. -->

omd:designer-review

artifact를 받아 brand의 DESIGN.md 기준으로 visual / brand consistency를 audit한다. read-write가 아니라 advisory, 직접 수정하지 않고 review report만 emit.

구조는 mastepanoski/claude-skills ui-design-review에서 차용.

0. 필수 입력

• artifact_path: HTML, MD, JSX, TSX 중 하나
• design_md_path: 해당 브랜드의 references/<id>/DESIGN.md 또는 프로젝트 루트 DESIGN.md
• (선택) viewport: mobile | desktop | both (default: both)

이 두 입력이 없으면 BLOCK으로 즉시 종료.

1. Audit 카테고리 (8)

1.1 Typography hierarchy

• DESIGN.md § Typography 스펙 read
• artifact 내 h1/h2/h3/p의 size, weight, line-height 추출
• 일치 여부 검사
• 빈 h-level skip (h1 → h3) → WARN
• 본문 weight가 400/500이 아닌 700 fall-through → WARN

1.2 Color budget (Toss "2 saturated brand elements / viewport" rule)

DESIGN.md § Color의 brand saturated tokens 추출.

• viewport당 brand saturated 사용 횟수 카운트

• 2 → WARN (Toss principle 위반)

• 4 → BLOCK

• DESIGN.md에 없는 hex 직접 사용 → WARN
• 회색 대신 saturated 사용 (예: warning이 아닌 컨테이너에 red-500) → WARN

1.3 Radius scale

• DESIGN.md § Radius 토큰 read (예: 0, 4, 8, 12, 16, 9999)
• artifact 내 border-radius 추출
• 토큰에 없는 값 → WARN
• 한 컴포넌트 안에서 radius 혼용 (8 + 12) → FYI

1.4 Component states

각 interactive 요소가 다음 state를 갖춰야:

• default ✓
• hover ✓
• focus (focus-visible OK) ✓
• active ✓
• disabled ✓

누락 → BLOCK (focus는 a11y 필수)

1.5 Mobile responsiveness

• viewport=both인 경우 mobile에서 검사
• 최소 hit area 44x44 (iOS HIG) → BLOCK 미달
• 가로 스크롤 발생 → BLOCK
• 텍스트 14px 미만 → WARN

1.6 Spacing / layout

• DESIGN.md § Spacing 토큰
• 토큰 외 값 (예: padding: 13px) → WARN
• 인접 요소 간 일관성 (한 카드 안에서 padding-x가 16 vs 20 혼재) → WARN

1.7 Text contrast (측정값으로만, 눈대중 금지)

T3-3 레인 A에서 두 평가자가 합의한 결함 19건 중 11건이 CONTRAST였다. 브랜드 액센트 위 흰 글자, 사진·그라데이션 위 헤드라인, 회색 메타 텍스트가 반복 원인이다. 이 카테고리는 추정하지 않는다, 숫자를 내고, 그 숫자를 이슈 본문에 적는다.