Search everything...

Stats

Actions

Available In

design-eval

Name: design-eval
Author: tan-yong-sheng

By tan-yong-sheng

Audit web UIs from URLs, screenshots, or images for usability heuristics, WCAG accessibility compliance, visual consistency, component reusability, and design system maturity. Generate prioritized reports with remediation roadmaps using AI vision CLI commands and Playwright-powered agents without writing code.

npx claudepluginhub tan-yong-sheng/ai-vision-mcp --plugin design-eval

Popularity

Stars

Top 10%

Med: 0·Avg: 284

Installs

Med: 0·Avg: 1

Forks

Top 10%

Med: 0·Avg: 36

Health & Quality

Maintenance

Top 25%

Excellent10.0/10

Med: 7/10·Avg: 7.4/10

Community

42%

Med: 42%·Avg: 42.1%

What's Inside

Slash Commands5

/design-eval:audit-accessibility

/audit-accessibility

Use this command to verify WCAG 2.1/3.0 compliance with detailed remediation guidance and assistive technology assessment

/design-eval:audit-components

/audit-components

Use this command to analyze component reusability patterns and identify consolidation opportunities

/design-eval:audit-design-debt

/audit-design-debt

Use this command to calculate design debt ratio and assess design system maturity level

/design-eval:audit-design

/audit-design

Use this command to run a comprehensive design audit across heuristics, accessibility, visual consistency, and design system governance

/design-eval:audit-visual-consistency

/audit-visual-consistency

Use this command to validate design token compliance (single image mode) or detect visual regressions (regression mode)

Agents4

accessibility-tester

/accessibility-tester

Use this agent when you need deep WCAG 2.1/3.0 compliance verification, assistive technology assessment, and accessibility remediation guidance

design-auditor

/design-auditor

Use this agent when you need comprehensive design evaluation across heuristics, accessibility, visual consistency, and design system governance

design-system-maturity-tester

/design-system-maturity-tester

Use this agent when you need design system maturity assessment, component reusability analysis, and design debt evaluation

visual-consistency-tester

/visual-consistency-tester

Use this agent when you need design token compliance validation or visual regression detection

Skills5

design-audit-orchestration

/design-audit-orchestration

Use this skill when aggregating design audit findings across multiple dimensions, deduplicating related issues, or synthesizing results into executive summaries with remediation roadmaps

design-system-governance

/design-system-maturity-governance

Use this skill when assessing design system maturity, evaluating adoption health, analyzing component duplication, or calculating design debt ratios

playwright-cli-automation

/playwright-cli-automation

Use playwright-cli to capture full-page screenshots, navigate complex flows, run Lighthouse audits, and test responsive design without writing code

visual-consistency-validation

/visual-consistency-validation

Use when validating design system token compliance, detecting visual regressions, or analyzing responsive design consistency across breakpoints and modes

wcag-compliance

/wcag-compliance

Use this skill when verifying WCAG 2.1/3.0 compliance, mapping accessibility violations to specific criteria, or providing remediation guidance with code examples

Stats

Version1.0.0

ReleasedApr 4, 2026

LanguageTypeScript

Stars50

Forks13

MaintenanceExcellent

LicenseApache-2.0

Last CommitApr 6, 2026

AddedApr 5, 2026

Actions

View on GitHub View README Plugin Marketplace JSON

Own this plugin?

Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).

Available In

design-eval46

Safety Signals

Caution

Uses power tools

Uses Bash, Write, or Edit tools

README

AI Vision MCP Server

A powerful Model Context Protocol (MCP) server that provides AI-powered image and video analysis using Google Gemini and Vertex AI models.

Features

Dual Provider Support: Choose between Google Gemini API and Vertex AI
Multimodal Analysis: Support for both image and video content analysis
Flexible File Handling: Upload via multiple methods (URLs, local files, base64)
Storage Integration: Built-in Google Cloud Storage support
Comprehensive Validation: Zod-based data validation throughout
Error Handling: Robust error handling with retry logic and circuit breakers
TypeScript: Full TypeScript support with strict type checking

Quick Start

Pre-requisites

You could choose either to use google provider or vertex_ai provider. For simplicity, google provider is recommended.

Below are the environment variables you need to set based on your selected provider. (Note: It’s recommended to set the timeout configuration to more than 5 minutes for your MCP client).

(i) Using Google AI Studio Provider

export IMAGE_PROVIDER="google" # or vertex_ai
export VIDEO_PROVIDER="google" # or vertex_ai
export GEMINI_API_KEY="your-gemini-api-key"

Get your Google AI Studio's api key here

(ii) Using Vertex AI Provider

export IMAGE_PROVIDER="vertex_ai"
export VIDEO_PROVIDER="vertex_ai"
export VERTEX_CLIENT_EMAIL="your-service-account@project.iam.gserviceaccount.com"
export VERTEX_PRIVATE_KEY="[REDACTED:Private Key]\n"
export VERTEX_PROJECT_ID="your-gcp-project-id"
export GCS_BUCKET_NAME="your-gcs-bucket"

Refer to the guideline here on how to set this up.

Installation

Below are the installation guide for this MCP on different MCP clients, such as Claude Desktop, Claude Code, Cursor, Cline, etc.

Claude Desktop

Add to your Claude Desktop configuration:

(i) Using Google AI Studio Provider

{
  "mcpServers": {
    "ai-vision-mcp": {
      "command": "npx",
      "args": ["ai-vision-mcp"],
      "env": {
        "IMAGE_PROVIDER": "google",
        "VIDEO_PROVIDER": "google",
        "GEMINI_API_KEY": "your-gemini-api-key"
      }
    }
  }
}

(ii) Using Vertex AI Provider

{
  "mcpServers": {
    "ai-vision-mcp": {
      "command": "npx",
      "args": ["ai-vision-mcp"],
      "env": {
        "IMAGE_PROVIDER": "vertex_ai",
        "VIDEO_PROVIDER": "vertex_ai",
        "VERTEX_CLIENT_EMAIL": "your-service-account@project.iam.gserviceaccount.com",
        "VERTEX_PRIVATE_KEY": "[REDACTED:Private Key]\n",
        "VERTEX_PROJECT_ID": "your-gcp-project-id",
        "GCS_BUCKET_NAME": "ai-vision-mcp-{VERTEX_PROJECT_ID}"
      }
    }
  }
}

Claude Code

(i) Using Google AI Studio Provider

claude mcp add ai-vision-mcp \
  -e IMAGE_PROVIDER=google \
  -e VIDEO_PROVIDER=google \
  -e GEMINI_API_KEY=your-gemini-api-key \
  -- npx ai-vision-mcp

(ii) Using Vertex AI Provider

claude mcp add ai-vision-mcp \
  -e IMAGE_PROVIDER=vertex_ai \
  -e VIDEO_PROVIDER=vertex_ai \
  -e VERTEX_CLIENT_EMAIL=your-service-account@project.iam.gserviceaccount.com \
  -e VERTEX_PRIVATE_KEY="[REDACTED:Private Key]\n" \
  -e VERTEX_PROJECT_ID=your-gcp-project-id \
  -e GCS_BUCKET_NAME=ai-vision-mcp-{VERTEX_PROJECT_ID} \
  -- npx ai-vision-mcp

Note: Increase the MCP startup timeout to 1 minutes and MCP tool execution timeout to about 5 minutes by updating ~\.claude\settings.json as follows:

{
  "env": {
    "MCP_TIMEOUT": "60000",
    "MCP_TOOL_TIMEOUT": "300000"
  }
}

Cursor

Go to: Settings -> Cursor Settings -> MCP -> Add new global MCP server

Pasting the following configuration into your Cursor ~/.cursor/mcp.json file is the recommended approach. You may also install in a specific project by creating .cursor/mcp.json in your project folder. See Cursor MCP docs for more info.

(i) Using Google AI Studio Provider

{
  "mcpServers": {
    "ai-vision-mcp": {
      "command": "npx",
      "args": ["ai-vision-mcp"],
      "env": {
        "IMAGE_PROVIDER": "google",
        "VIDEO_PROVIDER": "google",
        "GEMINI_API_KEY": "your-gemini-api-key"
      }
    }
  }
}

View full README on GitHub

design-eval

Popularity

Health & Quality

What's Inside

Confidence

README

AI Vision MCP Server

Features

Quick Start

Pre-requisites

Installation

Similar Plugins

design-eval

vision-specialist

visual-design-principles

ai-accessibility

ux-pilot

design-audit

More by tan-yong-sheng

design-eval

cc-devkits

AI Vision MCP Server

Features

Quick Start

Pre-requisites

Installation

More by tan-yong-sheng

design-eval

cc-devkits

Popularity

Health & Quality

Similar Plugins

design-eval

vision-specialist

visual-design-principles

ai-accessibility

ux-pilot

design-audit