디자인 리뷰 (Refactoring UI)
지식은 references/에 있습니다. 절대 모든 것을 로드하지 마세요. 다음 체인을 따르세요:
SKILL.md → INDEX.md → 필요한 파일만
1. 요청 분류하기
| 작업 유형 | 신호 | 로드할 파일 |
|---|---|---|
| 컴포넌트 수정 | "이 카드들 / 이 폼 / 내비게이션 바 검토" | references/components/INDEX.md → 1~2개의 components/<name>.md |
| 화면 감사 | "이 페이지 / 화면 / 앱 검토" | references/principles/INDEX.md → hierarchy.md, layout-spacing.md, typography.md, color.md; 필요시 depth.md, images.md, finishing.md 추가 |
| 재설계 | "재설계 / 더 나은 버전 제안" | 화면 감사 세트 + personality.md + systems.md (+ process.md) |
| 폴리싱 | "더 세련되게 / 마무리 터치 적용" | finishing.md, depth.md, images.md |
| 신규 디자인 | "처음부터 디자인" | process.md, personality.md, systems.md, 그 다음 주제 파일들 필요시 |
또한 화면에 어떤 컴포넌트가 있는지 식별하세요(자세한 설명은 components/INDEX.md 참조). 화면 감사의 경우, 가장 지배적인 1~2개의 컴포넌트 파일을 여세요.
2. 인터페이스 캡처하기
가능한 모든 것을 사용하되, 다음 순서를 따르세요:
- 브라우저 도구 (Chrome의 Claude, 내장 브라우저, Playwright MCP): 페이지를 열고 스크린샷을 찍은 다음, 도구의 JavaScript 실행 기능으로
scripts/measure_styles.js를 실행하세요. 특정 영역으로 범위를 좁히려면 먼저window.__DR_ROOT = '<css selector>'를 실행하세요. - 쉘 + Playwright (Claude Code):
python3 scripts/capture.py <url|file> [--selector ".card"] [--out dir]→ 스크린샷, 회색조 스크린샷,measurements.json생성. - 스크린샷만: 시각적 검사만 수행; 측정값을 사용할 수 없었다고 명시하세요.
- 코드만: CSS/마크업을 읽고 동일한 신호를 수동으로 계산하세요.
항상 그레이스케일 테스트(PRO-03)를 수행하세요: 채도가 낮은 버전을 확인합니다 (capture.py는 자동으로 생성합니다. 브라우저 도구에서는 document.documentElement.style.filter='grayscale(1)'을 적용하고 스크린샷을 찍은 후 제거합니다).
3. 분석하기
- 모든 발견 사항을 원칙 ID에 매핑하세요. 측정값을 증거로 사용하세요 (
measurements.json키는measure_styles.js주석에 있는 ID를 참조합니다). - 다음 영향도 순서로 확인하세요: 계층 → 간격/레이아웃 → 타이포그래피 → 색상/대비 → 깊이 → 이미지 → 마무리.
- 측정값은 힌트일 뿐, 확정이 아닙니다: 보고하기 전에 각각을 스크린샷과 대조하여 확인하세요.
- 변경을 요청하지 않는 한 기존 브랜드/개성을 존중하세요 (PER-*). 재설계의 경우, 먼저 목표 개성을 명시하세요.
[process]원칙은 재설계를 안내합니다. 감사에서는 이를 결함으로 보고하지 마세요.
4. 결과 전달하기
A. 발견 사항 — 영향도 순으로 정렬, 최대 ~10개, 각각 다음 형식:
[ID] 문제 — 증거 (측정된 값 또는 시각적으로 확인된 내용) → 수정 방법 (책의 스케일에서 가져온 구체적인 값)
B. 수정된 디자인 — 사용자가 비평만 원하는 경우는 제외:
- 수정 사항을 적용한 자체 포함 HTML/CSS 페이지로 화면/컴포넌트를 재구축하고, 원칙 파일의 스케일을 사용하세요 (간격 4/8/12/16/24/32/48/64…, 폰트 크기 12/14/16/18/20/24/30/36/48…, 5단계 그림자, 100–900 색상 음영). 가능한 경우 이전(스크린샷)과 이후를 나란히 보여주세요.
- 또는 사용자가 코드 변경을 원하면 CSS/마크업 패치를 제공하세요.
C. 시스템 요약 (재설계 시) — 사용된 폰트 크기 스케일, 간격 스케일, 팔레트(회색 + 기본 색상 + 강조 색상(HSL)) 및 그림자를 포함하여 팀이 채택할 수 있도록 하세요.
규칙
- ID를 인용하세요. 참조 파일에 없는 원칙을 임의로 만들지 마세요. 다루지 않는 내용이 있으면 책의 범위를 벗어난다고 명시하세요.
- 긴 목록보다는 소수의 영향력 큰 변경을 선호하세요.
- 책의 텍스트를 복사하지 마세요. 참조 파일은 요약된 내용입니다.
유지 관리
원칙 파일이 진실의 원천입니다. 편집한 후에는 인덱스와 컴포넌트 파일을 다시 생성하세요:
python3 tools/build_indexes.py skills/design-review (스크립트는 설치된 스킬 내부가 아닌 소스 저장소의 tools/에 있습니다).