Compare PNG/JPG design drafts against app screenshots and generate structured diff reports.
npx skills add https://github.com/iAmMccc/ai-essentials --skill ui-diff
Please help me install this Agent Skill. Skill: ui-diff Source: https://github.com/iAmMccc/ai-essentials/tree/main/.claude/skills/ui-diff Command: npx skills add https://github.com/iAmMccc/ai-essentials --skill ui-diff
对比 UI 设计稿和 App 截图，检查元素间距、位置、对齐、颜色、字号等差异。
将设计稿文件夹和截图文件夹作为输入执行对比以生成差异报告。
High-intent search queries and answers about installing and using this skill.
To compare a UI design draft with a real app screenshot, you provide both images to generate a structured diff report. It identifies visual differences in elements like spacing, alignment, and colors.
Yes, you can batch compare multiple UI design drafts and screenshots by grouping them into separate folders. The tool automatically identifies pairs and generates diff reports for each group.
The UI visual diff and design review checks support PNG and JPG image formats. It compares these images, handles automatic size normalization, and outputs a structured report annotating the differences.
Yes, the image comparison tool handles automatic size normalization for mismatched dimensions during the visual diff process. This ensures accurate alignment when comparing design drafts to real app screenshots.
During a UI QA check, the tool detects visual differences including element spacing, position, alignment, color, and font size. It highlights these variations in a structured diff report for design review.
Eva813Export Figma frames as PNG images via a Python script.
seokan-jeongDetect discrepancies between design mockups and implemented UI by category.
aquariuscookCompare screenshots across viewports and browsers to detect visual regressions.
robit-manCompare screenshots and analyze pixel differences across browsers and viewports.
