# Omd:designer Review

시각 + 브랜드 일관성 리뷰.

- Repository: https://github.com/kwakseongjae/oh-my-design (552 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add kwakseongjae/oh-my-design --skill omd:designer-review -g -a claude-code -y`
Codex: `npx skills add kwakseongjae/oh-my-design --skill omd:designer-review -g -a codex -y`
Cursor: `npx skills add kwakseongjae/oh-my-design --skill omd:designer-review -g -a cursor -y`
Gemini CLI: `npx skills add kwakseongjae/oh-my-design --skill omd:designer-review -g -a gemini-cli -y`

## Description

시각 + 브랜드 일관성 리뷰. HTML/MD/JSX artifact를 받아 brand DESIGN.md 대비 typo hierarchy, 색 budget, radius scale, 컴포넌트 state, 모바일 반응형 검수. severity BLOCK/WARN/FYI + line ref 출력. 'UI 리뷰', '디자인 검토', 'DESIGN.md 대비 검수' 류 트리거.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

<!-- 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](https://agentskills.so/skills/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였다. 브랜드 액센트 위 흰 글자,
사진·그라데이션 위 헤드라인, 회색 메타 텍스트가 반복 원인이다. 이 카테고리는 **추정하지 않는다**, 숫자를 내고, 그 숫자를 이슈 본문에 적는다.

The rest: https://github.com/kwakseongjae/oh-my-design/blob/HEAD/.claude/skills/omd-designer-review/SKILL.md