Communitygithub.com

cristianoliveira/pxp

根據參考截圖實作或優化 UI 元件,利用 pxp CLI 進行影像比對。適用於「從此 PNG 建立這個元件」、「讓這個元件相符」或「讓這個 UI 達到像素級完美」等要求,並預期會有應用程式程式碼變更。也支援在明確要求時進行無程式碼變更的截圖比對。不適用於沒有視覺參考的 UI 實作。

pxp 是什麼?

此技能利用 pxp CLI 工具,透過影像比對來協助開發者根據參考截圖實作或精煉 UI 元件。開發者可以提出「從此 PNG 建立此元件」或「讓此 UI 達到像素級完美」等要求,技能將自動對比參考圖與實作結果,並驅動應用程式程式碼的修改。它也支援純截圖比對模式,在不更動程式碼的情況下進行視覺驗證。主要適用於需要視覺參考的 UI 開發場景,不適合用於缺乏視覺參考的 UI 實作。支援多種平台與框架,能有效提升前端開發的像素精準度。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cristianoliveira/pxp/tree/main/skills/pxp

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

pxp 是做什麼的?

根據參考截圖實作或優化 UI 元件,利用 pxp CLI 進行影像比對。適用於「從此 PNG 建立這個元件」、「讓這個元件相符」或「讓這個 UI 達到像素級完美」等要求,並預期會有應用程式程式碼變更。也支援在明確要求時進行無程式碼變更的截圖比對。不適用於沒有視覺參考的 UI 實作。

相關技能