skills.rest
thomasttvo
thomasttvoCOMMUNITY
Explore all skills by this author →
GitHub

visual-engine

Compare device screenshots and Figma exports to detect UI alignment and spacing defects.

Updated Aug 27, 2026
Search Tags:#oauth#figma#mcp#gemini#visual-qa#visual-testing#image-analysis
One-click install
npx skills add https://github.com/thomasttvo/claude-skills --skill visual-engine-thomasttvo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-engine
Source: https://github.com/thomasttvo/claude-skills/tree/main/skills/visual-engine
Command: npx skills add https://github.com/thomasttvo/claude-skills --skill visual-engine-thomasttvo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual-engine eliminates manual, error-prone visual inspection by programmatically analyzing screenshots and design exports to find alignment issues, spacing regressions, color mismatches, and other UI defects.

Core Features & Use Cases

  • Image comparison: Compare device screenshots against Figma exports to highlight layout and spacing differences.
  • Visual QA & bug detection: Detect alignment problems, missing elements, font or color mismatches, and other regressions from images.
  • Local MCP integration: Runs as a local MCP server authenticated via Google OAuth and invokes Google Gemini vision models (gemini-2.5-pro / gemini-2.5-flash) for analysis.
  • Use case: Feed a mobile screenshot and a Figma-rendered image to quickly identify padding inconsistencies and misaligned components before shipping UI changes.

Quick Start

Use the analyze_images tool to compare a device screenshot and a Figma export for alignment, spacing, and color differences.

Frequently Asked Questions about visual-engine

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I compare mobile screenshots against Figma exports to find UI regressions?▼

Visual-engine detects UI visual defects by comparing device screenshots and Figma exports to identify spacing, color, and layout regressions. It works by sending images and prompt parameters to Google Gemini vision models for automated visual testing and bug detection.

How do I automate visual QA for mobile design workflows using Gemini vision?▼

Yes, visual-engine runs as a local MCP server authenticated via Google OAuth. This local server integration allows it to securely invoke Google Gemini vision models to analyze images and detect visual UI defects without manual inspection.

Do I need Google OAuth to use the local MCP server for image analysis?▼

Gemini vision models analyze image file paths to detect alignment problems, missing elements, font mismatches, and color regressions. The visual-engine passes prompt parameters and image paths to Gemini-2.5-pro or Gemini-2.5-flash for comprehensive visual QA.

What types of visual UI defects can image analysis detect in Figma exports?▼

Visual-engine compares device screenshots and Figma exports to detect alignment issues, missing elements, and spacing or color regressions. It is specifically designed for mobile and design workflows to identify padding inconsistencies and misaligned components before UI changes ship.

Can I use a local MCP server to detect padding inconsistencies between designs and screenshots?▼

Visual-engine detects visual UI defects by comparing device screenshots and Figma exports to identify spacing, color, and layout regressions. It uses a local MCP server authenticated via Google OAuth to call Gemini vision models with image file paths and prompt parameters.

Related Skills

Explore More Design & Creative Skills→
guhans6guhans6

figma

Translate Figma design nodes into React and Tailwind code.

Community
Advanced
AMDResearchAMDResearch
3

pm-bugfix

Automate bug-fix workflows from reproduction to regression verification.

Official
Advanced
AngelP17AngelP17
1

generate-image

Generate and edit images from prompts using AI models via OpenRouter API.

Community
Intermediate
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate