Communitygithub.com

cristianoliveira/pxp

Implémentez ou affinez un composant d'interface utilisateur à partir d'une capture d'écran de référence en utilisant la comparaison d'images avec l'outil CLI pxp.

Qu'est-ce que pxp ?

Ce skill permet aux agents AI, comme Claude Code, Cursor ou Codex, de prendre une capture d'écran d'un composant d'interface utilisateur (UI) et de générer ou peaufiner le code correspondant pour qu'il corresponde visuellement à la référence. Il utilise l'outil CLI pxp pour une comparaison d'images précise, détectant les différences entre le rendu actuel et la cible. L'utilisateur peut demander de « créer ce composant à partir de ce PNG », « faire correspondre ce composant » ou « pixel perfect cette UI ». Le skill prend en charge à la fois la génération de code et, lorsqu'elle est demandée explicitement, la simple comparaison de captures d'écran sans modification de code. Il est particulièrement utile pour les développeurs travaillant sur des implémentations d'UI précises à partir de maquettes visuelles.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cristianoliveira/pxp/tree/main/skills/pxp
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait pxp ?

Implémentez ou affinez un composant d'interface utilisateur à partir d'une capture d'écran de référence en utilisant la comparaison d'images avec l'outil CLI pxp. À utiliser pour des demandes telles que "construis ce composant à partir de ce PNG", "fais correspondre ce composant" ou "pixel perfect cette UI" lorsque des modifications de code sont attendues. Prend également en charge la comparaison de captures d'écran sans modification de code lorsque cela est explicitement demandé. Ne convient pas pour implémenter une UI sans référence visuelle.

Skills associés

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