Communitygithub.com

cristianoliveira/pxp

Implementa ou refina um componente de UI a partir de uma captura de tela de referência, utilizando comparação de imagens com a CLI pxp. Ideal para solicitações como 'construa este componente a partir deste PNG', 'faça este componente corresponder' ou 'deixe esta UI pixel perfect' quando são esperadas alterações no código do aplicativo. Também suporta comparação de capturas de tela sem alterações de código, quando solicitado explicitamente. Não é para implementar uma UI sem uma referência visual.

O que é pxp?

Esta skill utiliza a CLI pxp para implementar ou refinar componentes de interface do usuário com base em uma captura de tela de referência. Ela é especialmente útil quando um desenvolvedor deseja que um componente se comporte de forma idêntica a um design visual fornecido, permitindo solicitações como "construa este componente a partir deste PNG" ou "deixe esta UI pixel perfect". A skill suporta plataformas como Claude Code e outras ferramentas de agente de IA que podem executar comandos CLI. Ela funciona analisando a captura de tela de referência, gerando ou modificando o código do componente e, em seguida, comparando o resultado com a referência usando o pxp para garantir a correspondência visual. É importante notar que a skill não deve ser usada para implementar uma UI sem uma referência visual clara.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cristianoliveira/pxp/tree/main/skills/pxp
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que pxp faz?

Implementa ou refina um componente de UI a partir de uma captura de tela de referência, utilizando comparação de imagens com a CLI pxp. Use para solicitações como "construa este componente a partir deste PNG", "faça este componente corresponder" ou "deixe esta UI pixel perfect" quando são esperadas alterações no código do aplicativo. Também suporta comparação de capturas de tela sem alterações de código, quando solicitado explicitamente. Não é para implementar uma UI sem uma referência visual.

Habilidades Relacionadas

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