Analyze UX heuristics from UI screenshots with GPT-4 Vision and Google Sheets

Go to Workflow
0 views
Built by Oneclick AI Squad Oneclick AI Squad
Created on June 05, 2026

Description

This workflow evaluates website or app screenshots against established UX best practices (Nielsen's 10 Heuristics, WCAG accessibility guidelines, and mobile usability standards) and delivers prioritized, actionable improvement suggestions with severity ratings.

Who's it for
• UX designers seeking automated design audits
• Product managers reviewing UI quality pre-launch
• Agencies conducting client UX audits at scale
• Developers wanting accessibility compliance checks
• Startups running lean without a dedicated UX team

How it works / What it does
Accepts screenshot(s) via webhook upload crawl
Classifies the UI type (web app, mobile, landing page, dashboard, e-commerce)
Encodes image and sends to vision AI for heuristic analysis
Evaluates against 10 Nielsen heuristics + WCAG + mobile standards
Scores each heuristic category (0–10) and calculates overall UX score
Generates prioritized, actionable improvement suggestions per finding
Delivers a structured report via email and logs results to Google Sheets

How to set up
Import this workflow
Configure credentials (OpenAI with vision, SendGrid, Google Sheets)
Set your brand/product context in the Set UX Config node
Activate and submit screenshots via the webhook endpoint

Requirements
• OpenAI API key with GPT-4 Vision access
• Google Sheets (for audit log)
• SendGrid or Gmail (for report delivery)
• Screenshot files (PNG/JPG) or publicly accessible URLs

How to customize the workflow
• Add or remove heuristic categories in the AI prompt node
• Adjust severity thresholds in the Set UX Config node
• Extend the Google Sheet columns to include client or project metadata
• Chain multiple screenshots for full-flow UX audits

Want to improve productivity with a custom-built workflow? Our specialists can deliver it fast—Get in touch with our team

Nodes Used (4)

AI Agent
@n8n/n8n-nodes-langchain.agent
Code
n8n-nodes-base.code
HTTP Request
n8n-nodes-base.httpRequest
OpenAI Chat Model
@n8n/n8n-nodes-langchain.lmChatOpenAi