UI 뽑아내고 검증하는 날

디자인 리드처럼 관점 있는 UI를 만들고, 실제 브라우저 스크린샷으로 결과를 확인합니다. 접근성 위반과 반응형·상태 결함까지 잡아내 'AI가 만든 것 같은' 화면을 피할 수 있습니다.

7개 스킬

React·Vue·Angular·Svelte·HTML 코드베이스를 WCAG 2.2 A/AA 기준으로 진단하고 프레임워크별 수정 코드까지 만들어 주는 접근성 감사 스킬.

템플릿 같지 않은, 주제에 밀착한 UI 비주얼 방향을 잡아주는 공식 디자인 리드 스킬.

Claude가 Playwright로 로컬 웹앱을 직접 열어 클릭·스크린샷·콘솔 로그까지 확인하며 프론트엔드를 검증하게 해주는 공식 스킬.

웹 UI와 터미널 UI를 스크린샷·픽셀 디프 증거와 두 개의 독립 리뷰어로 이중 검증해 GOOD/NEEDS WORK 판정을 내리는 스킬.

디터 람스의 10가지 '좋은 디자인' 원칙으로 UI를 증거 기반 채점하고, 신규·개선·재설계 판정과 실행 계획 프롬프트까지 만들어 주는 스킬.

빌드·테스트·브라우저 시각 검증을 끝내기 전에는 절대 '완료'라고 말하지 않게 만드는 프론트엔드 작업 규율 스킬.

이미 렌더링된 웹·대시보드·HTML 덱·Electron UI를 실제 브라우저와 스크린샷 증거로 검수해 레이아웃·반응형·상태·출력 결함을 잡아내는 스킬.