Website & UI Screenshot Analyzer avatar

Website & UI Screenshot Analyzer

Pricing

Pay per event + usage

Go to Apify Store
Website & UI Screenshot Analyzer

Website & UI Screenshot Analyzer

Analyze website screenshots for accessibility, design quality, and user experience issues.

Pricing

Pay per event + usage

Rating

0.0

(0)

Developer

daehwan kim

daehwan kim

Maintained by Community

Actor stats

0

Bookmarked

1

Total users

0

Monthly active users

a day ago

Last modified

Share

Screenshot Analysis MCP Server

Real MCP (Model Context Protocol) server for AI-powered screenshot analysis. Connect directly from Claude Desktop, Cursor, or any MCP client.

Connect from Claude Desktop

Add to your claude_desktop_config.json:

{
"mcpServers": {
"screenshot-analysis": {
"url": "https://ntriqpro--screenshot-analysis-mcp.apify.actor/mcp"
}
}
}

Restart Claude Desktop. The 5 tools will be available immediately.

5 Tools

ToolDescriptionPrice
analyze_uiAnalyze layout, elements, UX quality$0.10
compare_screenshotsVisual diff between two screenshots$0.15
check_accessibilityWCAG accessibility issues$0.10
extract_textOCR text extraction$0.05
describe_pageDetailed page description for documentation$0.08

Tool Descriptions

1. analyze_ui

Comprehensive UI analysis focusing on layout, elements, and user experience quality.

Input:

  • imageUrl (string): URL of the screenshot

Output:

  • Layout analysis (grid structure, whitespace, alignment, hierarchy)
  • Element inventory (buttons, forms, cards, navigation, etc.)
  • UX quality assessment
  • Potential issues (clutter, unclear CTAs, navigation problems)
  • Strengths of the design

Example Use Case: Review a competitor's website design or audit your own UI for layout issues.

2. compare_screenshots

Detects visual changes between two screenshots.

Input:

  • imageUrl1 (string): URL of the first screenshot (before)
  • imageUrl2 (string): URL of the second screenshot (after)

Output:

  • Before state analysis
  • After state analysis
  • Comparison note highlighting changes in sections, elements, colors, and layout

Example Use Case: Verify design changes were applied correctly, track UI evolution over versions.

3. check_accessibility

Checks for WCAG accessibility compliance issues in the screenshot.

Input:

  • imageUrl (string): URL of the screenshot

Output:

  • Color contrast issues
  • Readability problems (font size, spacing)
  • Touch target sizing issues
  • Color dependence issues
  • Visual hierarchy clarity
  • Spacing and motor accessibility
  • Text clarity problems
  • Focus indicator visibility

Each issue includes severity level (critical/moderate/minor) and suggested fixes.

⚠️ Important Disclaimer:

  • Automated analysis catches ~30-40% of WCAG issues
  • Manual testing by accessibility experts is required for compliance
  • This tool is informational only, not a compliance certification

Example Use Case: Catch common accessibility issues before formal audit, guide remediation priorities.

4. extract_text

Extracts all visible text from a screenshot using OCR, preserving layout structure.

Input:

  • imageUrl (string): URL of the screenshot

Output:

  • All visible text organized by reading order (top-left to bottom-right)
  • Includes headings, body text, button labels, form labels, navigation items

Example Use Case: Quickly copy text from a screenshot, extract content for translation, document UI copy.

5. describe_page

Generates comprehensive descriptions of page/app functionality useful for documentation and accessibility.

Input:

  • imageUrl (string): URL of the screenshot
  • context (string, optional): Additional context (e.g., "user trying to reset password")

Output:

  • Page title/header
  • Main purpose
  • Overall layout description
  • Navigation structure
  • Key content areas
  • Interactive elements
  • Visual design details
  • Call-to-action elements
  • Specific data/information displayed
  • Context clues (breadcrumbs, status indicators)

Example Use Case: Create documentation for new features, generate alt text for accessibility, share page purpose with non-technical stakeholders.

How It Works

This is a real MCP server using:

  • Apify Standby mode (always-on, no cold start)
  • Streamable HTTP transport (/mcp endpoint)
  • @modelcontextprotocol/sdk for protocol compliance
  • Local AI vision models (ntriq vision server)

Unlike regular Apify actors that require API calls, this server speaks native MCP protocol — Claude Desktop connects directly.

Vision API Backend

All analysis is powered by local AI vision models running on ntriq vision server (https://vision.ntriq.co.kr/analyze/image).

Advantages:

  • No external API calls for privacy-sensitive screenshots
  • Zero data leaves your infrastructure
  • Fast processing (local models)
  • Consistent analysis quality

Pricing

Pay per event. Only charged when a tool executes successfully. Platform usage is free.

ToolCost
analyze_ui$0.10 per run
compare_screenshots$0.15 per run
check_accessibility$0.10 per run
extract_text$0.05 per run
describe_page$0.08 per run

Usage Policy

⚠️ Legal Notice:

  • Analyze only screenshots you OWN or have explicit permission to analyze
  • Do not analyze screenshots containing sensitive personal information, credentials, or copyrighted material
  • Automated accessibility analysis is informational only — it catches ~30-40% of WCAG issues
  • Manual testing by qualified accessibility experts is required for legal WCAG compliance
  • This tool is for analysis and documentation purposes only

Workflow Examples

Example 1: Design Review

1. Take screenshot of your new feature
2. Run analyze_ui to get detailed layout feedback
3. Run check_accessibility to find issues before launch
4. Use describe_page to document the feature

Example 2: A/B Testing

1. Take screenshot of Design A
2. Take screenshot of Design B
3. Run compare_screenshots to see differences
4. Run analyze_ui on both to evaluate UX quality

Example 3: Accessibility Audit

1. Take screenshots of key pages
2. Run check_accessibility on each
3. Document issues found
4. Use describe_page for detailed context
5. Manually verify with accessibility experts

Example 4: Documentation

1. Take screenshot of feature
2. Run extract_text to get UI labels
3. Run describe_page to write detailed description
4. Combine for comprehensive feature docs

Integration with Claude

Claude can use these tools in conversations to:

  • Analyze designs you share
  • Compare UI changes
  • Find accessibility issues
  • Extract content
  • Generate documentation
  • Review competitors' designs

Share a screenshot URL, ask Claude to analyze it, and get instant insights.

Troubleshooting

"Vision server error"

  • Check that ntriq vision server is running
  • Verify NTRIQ_VISION_URL environment variable if customized
  • Ensure image URL is publicly accessible

Empty response

  • Image URL may not be publicly accessible
  • Large images may timeout (consider resizing)
  • Vision server may be temporarily unavailable

Accessibility check seems incomplete

  • Remember: automated analysis is ~30-40% accurate
  • Always follow up with manual accessibility testing
  • Use tools like WAVE, Axe, or NVDA for comprehensive audits

Data Privacy

  • Images are sent to ntriq vision server for analysis
  • Analysis results are returned immediately
  • No image storage or archiving
  • Local on-premises deployment available upon request

Support

For issues, feedback, or feature requests, please contact ntriq support.


Version: 1.0.0 Categories: MCP Servers, AI, Developer Tools License: Commercial (Apify)


Extend this actor with the ntriqpro intelligence network:

⭐ Love it? Leave a Review

Your rating helps other professionals discover this actor. Rate it here.