uimax-mcp: Claude Code를 활용한 자동 프론트엔드 코드 리뷰 및 수정을 위한 무료 MCP 서버

자동화된 프론트엔드 리뷰 파이프라인

uimax-mcp MCP 서버는 반복적인 워크플로우를 자동화하기 위해 만들어졌습니다: Claude에게 프론트엔드 전문가로서 코드 리뷰를 요청하고, Claude Code를 사용하여 제안된 수정사항을 구현하는 과정입니다. 이 도구는 전체 프로세스를 단일 자동화 파이프라인으로 패키징합니다.

핵심 기능

review my UI at localhost:3000 명령어를 사용하면 이 도구는 다음 작업을 수행합니다:

• Puppeteer를 사용하여 실행 중인 애플리케이션의 실제 스크린샷 캡처
• Google Lighthouse 감사 실행(성능, 접근성, 모범 사례, SEO 점수)
• axe-core WCAG 2.1 접근성 감사 실행
• 25개 이상의 안티패턴에 대한 소스 코드 스캔
• 모든 데이터를 Claude Code에 반환(내장된 전문가 리뷰 방법론 포함)
• Claude Code가 리뷰를 생성하고 자동으로 수정사항 구현

추가 기능

이 MCP는 총 12개의 도구를 포함합니다:

• 이전/이후 스크린샷 비교
• 반응형 뷰포트 확인
• 다크 모드 감지
• 독립형 HTML 보고서 내보내기
• 사용자 정의 규칙 구성

설치 및 사용법

하나의 명령어로 설치:

claude mcp add uimax -- npx -y uimax-mcp@latest

이 도구는 Pro 플랜 사용자에게 100% 무료이며, API 키가 필요하지 않고 추가 비용이 발생하지 않습니다. MCP는 데이터를 수집하고, Claude Code(기존 구독 사용)가 전문가 분석과 수정을 처리합니다.

실제 테스트 결과

실제 프로젝트에서 테스트하는 동안, 이 도구는 한 애플리케이션에서 109개의 코드 발견사항을 찾았으며, 그 중 32개의 키보드 접근성 문제는 수동으로 식별하는 데 30분 이상 걸렸을 것입니다.

사용 가능성

소스 코드는 GitHub에서 사용 가능: https://github.com/prembobby39-git/uimax-mcp

패키지는 npm에서 사용 가능: https://npmjs.com/package/uimax-mcp