mcp-ux-vision

sfearl1/mcp-ux-vision

3.2

If you are the rightful owner of mcp-ux-vision and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

An MCP server that provides AI-powered visual analysis for UI/UX assessment using Google's Gemini Vision API.

Tools
4
Resources
0
Prompts
0

MCP UX Vision

An MCP server that provides AI-powered visual analysis for UI/UX assessment using Google's Gemini Vision API.

Features

  • Screenshot capture from URLs
  • AI-powered UI element detection and analysis
  • WCAG contrast ratio analysis
  • Color palette and typography extraction
  • Visual accessibility auditing
  • Comprehensive JSON reporting

Installation

git clone <repository-url>
cd mcp-ux-vision
npm install
npm run build

Configuration

Add to your MCP client configuration:

{
  "servers": {
    "ux-vision": {
      "command": "node",
      "args": [
        "path/to/mcp-ux-vision/build/index.js"
      ]
    }
  }
}

Tools

screenshot_url

Capture a screenshot of any webpage.

  • url (required): URL to screenshot
  • fullPage (optional): Capture full page vs viewport
  • waitTime (optional): Delay before capture (ms)

analyze_screen

Analyze the most recent screenshot with AI, extracting:

  • UI elements with geometry and styling
  • Color palette and typography
  • Accessibility metrics
  • Visual hierarchy assessment

generate_report

Create a comprehensive JSON report from the last analysis.

  • testUrl (required): URL that was analyzed
  • appName (optional): Application name
  • output_path (optional): Report output directory

analyze_url_full_report

One-step workflow combines all above tools with the same parameters: screenshot → analyze → report.

Usage

Once the server is running and configured in your MCP client (like Claude), you can use natural language prompts to call the tools:

screenshot_url

analyze_screen

  • "Analyze the current screenshot for UI elements"
  • "Examine the accessibility of this interface"
  • "What UI components do you see in the screenshot?"

generate_report

  • "Create a UX report for the analysis of https://example.com"
  • "Generate a comprehensive UI audit report"

analyze_url_full_report

License

MIT