Communitygithub.com

cristianoliveira/pxp

참조 스크린샷과 이미지 비교를 통해 UI 컴포넌트를 구현하거나 개선합니다. 코드 변경이 필요한 '이 PNG에서 이 컴포넌트를 만들어줘', '이 컴포넌트를 일치시켜줘', '이 UI를 픽셀 퍼펙트로 만들어줘'와 같은 요청에 사용하세요. 명시적으로 요청된 경우 코드 변경 없이 스크린샷 비교도 지원합니다. 시각적 참조 없이 UI를 구현하는 데는 사용하지 마세요.

pxp란 무엇인가요?

cristianoliveira/pxp는 pxp CLI를 활용하여 참조 스크린샷과 현재 UI를 이미지 비교함으로써 UI 컴포넌트를 구현하거나 미세 조정하는 AI 어시스턴트 스킬입니다. '이 디자인을 그대로 구현해줘' 또는 '이 컴포넌트를 스크린샷과 일치시켜줘' 같은 요청 시, 스킬이 pxp 도구를 사용하여 현재 UI의 스크린샷을 생성하고 참조 이미지와의 차이점을 분석한 후 필요한 코드 변경 사항을 제안합니다. 이 스킬은 Claude Code, Cursor, Codex 등과 같은 터미널 기반 AI 코딩 어시스턴트에서 사용하기에 적합하며, 사용자는 pxp CLI를 설치하고 구성해야 합니다. 주요 장점은 수동 비교 없이 시각적 정확성을 자동으로 보장하고 반복적인 '눈으로 확인' 과정을 제거한다는 것입니다. 또한 코드 변경 없이 단순한 스크린샷 비교 기능도 지원합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cristianoliveira/pxp/tree/main/skills/pxp

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

pxp은(는) 무엇을 하나요?

참조 스크린샷과 이미지 비교를 위해 pxp CLI를 활용하여 UI 컴포넌트를 구현하거나 개선합니다. "이 PNG에서 이 컴포넌트를 만들어줘", "이 컴포넌트를 일치시켜줘", "이 UI를 픽셀 퍼펙트로 만들어줘"와 같은 요청에 사용하세요. 명시적으로 요청된 경우 코드 변경 없이 스크린샷 비교도 지원합니다. 시각적 참조 없이 UI를 구현하는 데는 사용하지 마세요.

관련 스킬