Communitygithub.com

cristianoliveira/pxp

Implementa o refina un componente de UI a partir de una captura de pantalla de referencia utilizando la comparación de imágenes con el CLI pxp. Ideal para solicitudes como 'construye este componente desde este PNG', 'haz que este componente coincida' o 'pixel perfect esta UI' cuando se esperan cambios en el código de la aplicación. También permite la comparación de capturas sin cambios en el código cuando se solicita explícitamente. No apto para implementar una UI sin referencia visual.

¿Qué es pxp?

La skill cristianoliveira/pxp permite a asistentes de IA como Claude Code, Cursor o Codex implementar o refinar componentes de interfaz de usuario (UI) a partir de una captura de pantalla de referencia, utilizando la herramienta CLI pxp para la comparación de imágenes. Es útil para desarrolladores que necesitan lograr una coincidencia visual casi perfecta entre un diseño de referencia y el código real, ya sea al construir un componente desde cero, al ajustar un componente existente para que coincida con un diseño, o al depurar diferencias visuales sin modificar el código. La skill analiza la captura de referencia y la interfaz generada, identificando discrepancias de píxeles, posición, tamaño y color, y luego genera instrucciones o parches de código para aproximar la implementación a la referencia. Está diseñada para usarse con solicitudes explícitas de comparación de imágenes y no debe emplearse para implementar componentes sin una referencia visual clara.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cristianoliveira/pxp/tree/main/skills/pxp
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace pxp?

Implementa o refina un componente de UI a partir de una captura de pantalla de referencia utilizando la comparación de imágenes con el CLI pxp. Úsalo para solicitudes como "construye este componente desde este PNG", "haz que este componente coincida" o "pixel perfect esta UI" cuando se esperan cambios en el código de la aplicación. También admite la comparación de capturas sin cambios en el código cuando se solicita explícitamente. No apto para implementar una UI sin una referencia visual.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community