스킬 자체의 표현으로
실제 사이트를 대상으로 하는 디자이너 시점의 QA입니다. 사용자의 브라우저에서 페이지를 열어 375, 768, 1440 해상도로 스크린샷을 찍고, 시각적 계층 구조부터 인터랙션 상태까지 열 가지 항목을 채점한 다음, 발견한 문제를 소스에서 수정합니다. 수정 하나당 커밋 하나이며, 전후 스크린샷으로 다시 검증합니다.
깊이는 기본적으로 5-8개 페이지로 설정되며, 기능 브랜치에서 URL 없이 실행하면 diff 기반으로 전환됩니다. 결과에는 두 개의 헤드라인 점수, 가중치가 적용된 Design Score와 독립적인 AI Slop Score가 포함되며, 판단의 근거가 되는 [kicker-above-heading], [gradient-text]와 같은 30개의 명명된 감지 규칙도 함께 제공됩니다.
산출물
- 실행 디렉터리에 작성되는 구조화된 마크다운 감사 보고서입니다.
- 이후 실행 시 회귀 비교를 위해 작성되는 design-baseline.json 파일입니다.
- 적용된 모든 수정 사항에 대한 전후 스크린샷 쌍입니다.
- 사용자가 2단계 제안을 받아들일 경우, 추출된 관찰 내용을 바탕으로 작성되는 선택적 DESIGN.md입니다.
작동 방식
- 01분석 전에 먼저 반응하기
1단계는 대상을 열어 전체 페이지 데스크톱 스크린샷을 찍은 다음, 시선이 가장 먼저 향하는 곳을 명시하는 구조화된 첫인상을 작성합니다.
- 02렌더링된 시스템 추출하기
2단계는 페이지 내부의 폰트, 색상, 헤딩 스케일, 터치 타겟을 조사한 다음, 그 결과를 DESIGN.md로 저장할 것을 제안합니다.
- 03페이지별로 감사하기
3단계는 페이지마다 콘솔 훅, 인터랙티브 스냅샷, 주석이 달린 스크린샷을 실행한 뒤, 세 가지 뷰포트 너비에서 이를 반복합니다.
- 04흐름을 체감하기
4단계는 2-3개의 사용자 흐름을 따라가며 각 동작 후 스냅샷을 비교하고, 마찰과 복구에 대한 호감도 점수를 추적합니다.
- 05한 번에 하나씩 발견 사항 수정하기
8단계는 최소한의 변경만 적용하여 단독으로 커밋한 다음, 다음 발견 사항으로 넘어가기 전에 다시 테스트합니다.
- 06두 개의 헤드라인 점수 매기기
디자인 점수는 열 가지 항목에 대한 가중 평균이며, AI 슬롭 등급은 별도로 독립적으로 산정됩니다.