Communitygithub.com

cristianoliveira/pxp

Implementiere oder verfeinere eine UI-Komponente anhand eines Referenz-Screenshots mithilfe des pxp-CLI-Tools für Bildvergleiche.

Was ist pxp?

Dieses Skill ermöglicht es einem KI-Agenten (z. B. Claude Code, Cursor, Codex), UI-Komponenten pixelgenau anhand eines bereitgestellten Referenz-Screenshots zu implementieren oder zu optimieren. Es nutzt das pxp-CLI-Tool, um Bildvergleiche zwischen der aktuellen Ansicht und dem Referenzbild durchzuführen. Entwickler können Anfragen wie „Erstelle diese Komponente aus diesem PNG“ oder „Mache diese Komponente pixelgenau“ stellen. Der Skill unterstützt sowohl Codeänderungen (automatische Anpassung der Komponente basierend auf dem visuellen Vergleich) als auch explizite reine Screenshot-Vergleiche ohne Code-Änderungen. Er ist nicht dafür gedacht, eine UI ohne visuelle Referenz zu implementieren.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cristianoliveira/pxp/tree/main/skills/pxp

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht pxp?

Implementiere oder verfeinere eine UI-Komponente anhand eines Referenz-Screenshots mithilfe des pxp-CLI-Tools für Bildvergleiche. Verwende dies für Anfragen wie „Erstelle diese Komponente aus diesem PNG“, „Mache diese Komponente passend“ oder „Pixelgenaue UI dieser Komponente“, wenn Codeänderungen erwartet werden. Unterstützt auch Screenshot-Vergleiche ohne Codeänderungen, wenn dies explizit gewünscht wird. Nicht geeignet, um eine UI ohne visuelle Referenz zu implementieren.

Verwandte Skills