oh-my-design: Skill for Claude Code

omd:slop-audit

OmD에서 AI slop은 “AI가 만든 화면”이라는 출처 판정이 아니다. 제품의 목적·콘텐츠·브랜드 근거 대신, 생성 도구가 자주 꺼내는 구조와 문구가 반복되어 서로 다른 제품이 같은 화면처럼 수렴한 상태를 뜻한다.

보라색, 카드, 둥근 모서리, 그라데이션은 죄가 없다. DESIGN.md와 콘텐츠가 요구하면 그대로 둔다. 문제는 이유 없이 여러 기본 패턴이 한 화면에 겹치고, 그 결과 위계·신뢰·사용성이 약해질 때다.

모드

• AUDIT — 코드와 실제 route를 읽고 근거가 있는 finding만 작성
• APPLY — 사용자가 수정까지 요청한 경우 omd:apply 계약으로 BLOCK/WARN을 고친 뒤 같은 route에서 재검증
• COMPARE — 같은 콘텐츠의 before/after specimen과 rule 설명을 만든다. 제품 기능을 새로 꾸미지 않는다.

시작 전에 읽을 것

1. 프로젝트 DESIGN.md 전체와 .omd/preferences.md
2. 실제 사용자 journey와 대상 route
3. references/pattern-catalog.md
4. 출처·라이선스 경계가 필요하면 references/sources.md

판정 우선순위는 사용자 의도 > DESIGN.md > 실제 제품 정보 구조 > 접근성·플랫폼 요구 > slop taxonomy다.

세 가지 판정 축

1. Slop cluster

제품 맥락 없는 기본 패턴이 같은 화면에서 둘 이상 겹치고, 정보 위계나 브랜드 구별성을 약하게 만든다. SLOP 배지를 쓴다.

2. General quality

대비, overflow, focus, heading 순서, target size, 성능처럼 출처와 무관한 결함이다. QUALITY로 분리한다. 접근성 오류를 “AI 느낌”이라고 부르지 않는다.

3. Preference

브랜드 또는 사용자가 합리적으로 선택할 수 있는 미감 차이다. FYI만 허용한다. 취향을 결함으로 승격하지 않는다.

열 가지 review lens

감사 범위가 일부 유행 요소에만 갇히지 않도록 다음 순서로 훑는다.

1. Hierarchy — 첫 시선과 핵심 행동이 제품 우선순위와 일치하는가
2. Containers — 각 card·panel이 실제 entity·action·selection·layer 경계인가
3. Typography — scan·read·compare·operate 중 화면 과업에 맞는 measure·scale·pace인가
4. Color and depth — accent·status·selection·elevation 역할이 분리되는가
5. Evidence — 실제 workflow·asset·data·state가 generic decoration보다 앞서는가
6. Density — group 안과 group 사이의 간격이 다르고 과업에 맞는가
7. States — empty·loading·error·permission·long content·success가 포함되는가
8. Responsive composition — desktop을 축소하는 대신 viewport별 우선순위를 다시 구성하는가
9. Motion — feedback·origin·continuity·space를 설명하며 중단·reduced motion을 지원하는가
10. Interaction contract — control의 label·appearance·state·result가 같은 약속을 지키는가

이 목록은 미니멀리즘을 강요하지 않는다. expressive editorial, dense product tool, focused service flow 모두 brief와 실행 근거가 있으면 유효하다.