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

Workflow preview

100%

Open on n8n.io

$20/month : Unlimited workflows

2500 executions/month

Try free

THE #1 IN WEB SCRAPING

Scrape any website without limits

Try free

HOSTINGER

Early Deal
DISCOUNT 20%

Self-hosted n8n

Unlimited workflows - from $4.99/mo

Try free

#1 hub for scraping, AI & automation

6000+ actors - $5 credits/mo

Try free

1. Workflow Overview

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 priori...

Best for

Document Extraction automation workflows
AI Summarization automation workflows
advanced n8n builders looking for reusable templates

Tools used

n8n-nodes-base.stickynote, n8n-nodes-base.webhook, n8n-nodes-base.set, n8n-nodes-base.filter, n8n-nodes-base.code, n8n-nodes-base.wait, n8n-nodes-base.httprequest, @n8n/n8n-nodes-langchain.agent

Source and attribution

This workflow is cataloged by N8N Workflows and links back to its original n8n.io source page by Oneclick AI Squad.

Original n8n.io source

1.1 Workflow description

Title: Analyze UX heuristics from UI screenshots with GPT-4 Vision and Google Sheets
Workflow name: Analyze UX heuristics from UI screenshots with GPT-4 Vision and Google Sheets

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

1.2 Logical Blocks

This catalog entry is organized from the workflow JSON. The node-level section below shows the executable blocks available for review before importing the template.

2. Block-by-Block Analysis

Block 1 - Sticky Note

Type / Role: n8n-nodes-base.stickyNote - stickyNote
Config choices: Version 1

Block 2 - Sticky Note1

Type / Role: n8n-nodes-base.stickyNote - stickyNote
Config choices: Version 1

Block 3 - Sticky Note2

Type / Role: n8n-nodes-base.stickyNote - stickyNote
Config choices: Version 1

Block 4 - Sticky Note3

Type / Role: n8n-nodes-base.stickyNote - stickyNote
Config choices: Version 1

Block 5 - Sticky Note4

Type / Role: n8n-nodes-base.stickyNote - stickyNote
Config choices: Version 1

Block 6 - Webhook - Screenshot Upload

Type / Role: n8n-nodes-base.webhook - webhook
Config choices: Version 1.1

Block 7 - Prepare Audit Context

Type / Role: n8n-nodes-base.set - set
Config choices: Version 3.4

Block 8 - Set UX Config

Type / Role: n8n-nodes-base.set - set
Config choices: Version 3.4

Block 9 - Filter - Has Screenshot Input

Type / Role: n8n-nodes-base.filter - filter
Config choices: Version 2.2

Block 10 - JS - Build Vision API Payload

Type / Role: n8n-nodes-base.code - code
Config choices: Version 2

Block 11 - Wait 1 - Rate Limit Buffer

Type / Role: n8n-nodes-base.wait - wait
Config choices: Version 1

Block 12 - OpenAI Vision - Heuristic Evaluation

Type / Role: n8n-nodes-base.httpRequest - httpRequest
Config choices: Version 4.2

Block 13 - JS - Parse Vision Response

Type / Role: n8n-nodes-base.code - code
Config choices: Version 2

Block 14 - JS - Calculate UX Score & Grade

Type / Role: n8n-nodes-base.code - code
Config choices: Version 2

Block 15 - AI - Generate Improvement Report

Type / Role: @n8n/n8n-nodes-langchain.agent - agent
Config choices: Version 1.6

Block 16 - JS - Attach Narrative to Report

Type / Role: n8n-nodes-base.code - code
Config choices: Version 2

Block 17 - Update Google Sheet - Audit Log

Type / Role: n8n-nodes-base.httpRequest - httpRequest
Config choices: Version 4.2

Block 18 - Send UX Audit Report Email

Type / Role: n8n-nodes-base.httpRequest - httpRequest
Config choices: Version 4.2

Block 19 - Webhook Response - Return Audit Report

Type / Role: n8n-nodes-base.respondToWebhook - respondToWebhook
Config choices: Version 1.1

Block 20 - OpenAI Chat Model

Type / Role: @n8n/n8n-nodes-langchain.lmChatOpenAi - lmChatOpenAi
Config choices: Version 1.3

3. Summary Table

Workflow	Analyze UX heuristics from UI screenshots with GPT-4 Vision and Google Sheets
Complexity	advanced
Nodes	20
Categories	Document Extraction, AI Summarization
Author	Oneclick AI Squad
Published	21 Apr 2026

4. Reproducing the Workflow from Scratch

1. Download the workflow JSON

Use the JSON export at /data/workflows/15200/15200.json as the source template for this automation.
2. Import the template into n8n

Open n8n, import the downloaded JSON, and review each node before activating the workflow.
3. Configure credentials and variables

Replace placeholder credentials, API keys, webhook URLs, account IDs, and environment-specific values with your own settings.
4. Test with sample data

Run the workflow manually or in a staging workspace, inspect node output, and confirm downstream systems receive the expected data.
5. Activate and monitor

Enable the workflow only after testing, then monitor executions, errors, and rate limits during the first production runs.

5. General Notes & Resources

Review imported nodes carefully before activation. This catalog entry is intended to help you inspect the workflow structure, understand required services, and find related templates faster.

Node names, credentials, schedules, webhook paths, and external service limits may need adjustment for your workspace.

Download workflow JSON Original n8n.io source Document Extraction workflows AI Summarization workflows

Frequently asked questions

What does Analyze UX heuristics from UI screenshots with GPT-4 Vision and Google Sheets do?

What do I need before importing this workflow?

Review the workflow JSON, configure any required credentials in n8n, and test the automation in a safe workspace before using it in production.

Can I customize this workflow?

Yes. Use the block-by-block analysis and the downloadable JSON to inspect each node, then adjust credentials, prompts, schedules, filters, or destinations for your Document Extraction, AI Summarization use case.

Oneclick AI Squad

224 workflows

Nodes

n8n-nodes-base.stickynote n8n-nodes-base.webhook n8n-nodes-base.set n8n-nodes-base.filter n8n-nodes-base.code n8n-nodes-base.wait n8n-nodes-base.httprequest @n8n/n8n-nodes-langchain.agent

Complexity

advanced

Published 21 Apr 2026

Likes 0

View on n8n.io Download Workflow

Install path: /data/workflows/15200/15200.json

Share Your Workflow

Have a useful automation to share? Publish it and help the community.

Submit Your Template How to Submit

Related Workflows

Detect semantic duplicate website pages with Google Drive, Postgres and Ollama

## Quick overview This workflow scans HTML files in a Google Drive folder, extracts and stores page text in Postgres, generates local vector embeddings with Ollama, and uses PGVector similarity searches to produce CSV reports that flag semantically duplicate website pages. ## How it works 1. Starts manually and clears the existing PGVector embeddings table and the scraped page text table in Postgres. 2. Lists files in a specified Google Drive folder, filters to the target documents, and processes them in batches. 3. Downloads each HTML file from Google Drive, extracts the main body text, cleans it, and upserts the results into a Postgres table for scraped pages. 4. Reads the scraped page text back from Postgres in batches, splits it into overlapping chunks, and attaches page metadata (sheet_id, file_name, file_url) to each chunk. 5. Generates embeddings locally with Ollama and inserts the chunk vectors and metadata into Postgres (PGVector), deduplicating already-processed pages. 6. Builds an HNSW index in Postgres, computes chunk-to-chunk similarity matches and a pairwise page report, and exports the results as a CSV file. 7. Computes page-level centroid embeddings, finds highly similar page pairs, and exports a page-level duplicate report as a CSV file. ## Setup 1. Add Google Drive OAuth2 credentials and set the Google Drive folder URL/ID used to scan for your HTML files. 2. Add Postgres credentials for a database with the pgvector extension enabled and permissions to create/alter tables and indexes (including HNSW indexes). 3. Add an Ollama credential and ensure the embedding model mxbai-embed-large:latest is available on your Ollama instance. 4. Confirm your source files are HTML documents and that the workflow’s text extraction and similarity thresholds match your content and desired duplicate sensitivity. ## Requirements - Working instance of n8n, either self-hosted or on the cloud. Remember, this workflow can be computationally expensive. - Google Drive API (with OAuth setup in n8n credentials section) - Ollama (for open source models) or any Embedding model API - PostgreSQL with PGVector or any other vector database - PgAdmin (for PostgreSQL) or your interface to access database tables via SQL for troubleshooting (optional). ## Additional info Limitations and Enhancements: Physical system memory mxbai-embed-large Running through Ollama is free and private, but the embedding generation speed depends entirely on your hardware. The more system memory you have, the more data you can process in batches in the loop node. Similarity threshold and boilerplate content The cosine distance used in this workflow is 0.15 for chunk-level matching. And 0.05 (similarity above 95%) of the threshold is used for page-level centroid matching. This is only the starting point. Once you have the data, and especially if your data has more noise, you might need to tweak these thresholds for better matching. This workflow needs HTML files to extract text This workflow doesn't crawl a website or fetch pages by entering a URL. You need to download HTML files (rendered or source) for consumption. Use parallel processing and Cloud APIs Two sub-processes take the most time: Downloading HTML files from Google Drive Creating vector embeddings If you can use parallel processing in n8n and execute these sub-processes in parallel, the process will be done much faster. Additionally, if you can use cloud APIs for embedding, it may save some you some processing time as well. Use efficient SQL queries Since I am from a non-tech background and not a coder, I used a mix of Gemini, Perplexity and Claude to create SQL codes for this workflow. If you're better at it, you can run computationally efficient queries that would help you achieve better results with less computation expense and time.

View

Generate monthly BigQuery KPI PDF reports with Claude, Google Docs, Outlook and Teams

## Quick overview This workflow runs monthly to query KPI data from Google BigQuery, generates a narrative with Anthropic Claude, fills a Google Docs report template, exports it as a PDF, archives it to OneDrive, emails it via Microsoft Outlook, and posts a summary to Microsoft Teams. ## How it works 1. A schedule trigger fires on the 1st of every month at 07:00 and calculates the start and end dates of the previous full calendar month. 2. Four parallel BigQuery queries fetch revenue KPIs, top product categories, weekly sales trend, and top customers for that period. Each result set is tagged with a source label before merging. 3. All tagged rows are combined and aggregated into a single structured report payload containing KPI summaries, ranked tables, and company metadata. 4. The payload is split across two concurrent branches: one sends it to a Claude Sonnet LLM chain to generate an executive narrative with five sections (summary, revenue analysis, category insights, customer insights, and recommendation), and the other creates a named copy of a Google Docs template in your reports folder. 5. Once both branches complete, the narrative is merged into the report payload and the replacement requests for all template placeholders are constructed. 6. The Google Docs node applies all replacements in a single batchUpdate call, then the file is exported as a PDF via Google Drive. 7. The finished PDF is archived to OneDrive, emailed via Outlook with the report attached, and a formatted KPI summary card is posted to a Microsoft Teams channel. ## Setup 1. Set the following n8n environment variables before activating: GCP_PROJECT_ID, BQ_DATASET, GDOCS_TEMPLATE_FILE_ID, GDRIVE_REPORTS_FOLDER_ID, ONEDRIVE_REPORTS_FOLDER_ID, REPORT_RECIPIENTS, TEAMS_TEAM_ID, and TEAMS_CHANNEL_ID. 2. Connect a Google BigQuery credential and update the four SQL queries to match your dataset, table name, and column names. 3. Connect an Anthropic API credential to the Claude Chat Model sub-node, then manually wire its output to the ai_languageModel input (bottom connector) of the Create AI Narrative with Claude node on the canvas. 4. Connect Google Drive and Google Docs OAuth2 credentials. In Google Drive, create a master report template Doc containing the placeholder strings listed in the Customization section, note its file ID from the URL, and set GDOCS_TEMPLATE_FILE_ID accordingly. 5. Connect Microsoft OneDrive, Outlook, and Teams OAuth2 credentials. Retrieve your Teams team ID and channel ID using the Microsoft Graph Explorer and set the corresponding environment variables. ## Requirements - Google Cloud project with BigQuery enabled and an orders table matching the SQL schema in the workflow - Google Workspace account (Drive and Docs OAuth2 access) - Anthropic API key - Microsoft 365 account with OneDrive, Outlook, and Teams access ## Customization - To change the reporting cadence, update the cron expression in the schedule trigger: 0 7 * * 1 for weekly or 0 7 * * * for daily. - To adapt the SQL queries to your schema, replace orders, order_total, customer_id, is_new_customer, created_at, and product_category with your actual column names. - To change the AI model, update the model field in the Claude Chat Model sub-node. - To add more KPI sections, extend the SQL queries, the aggregation code in Consolidate BigQuery Data, and the replacements array in Construct Replacement Requests.

View

Ingest and search Cloudflare R2 media with Gemini, Groq Whisper, and Supabase

## Quick overview This workflow ingests images, PDFs, and videos from a Cloudflare R2 folder, uses Google Gemini to view pdfs, images and videos, Groq stt (Whisper) for video transcriptst - to generate searchable descriptions and tags, stores embeddings in a Supabase pgvector table. ## How it works 1. Receives a webhook request containing a Cloudflare R2 bucket and folder URL, then lists the objects in that folder. 2. Filters to supported file types, builds public CDN URLs and timestamps, and routes each item as an image, PDF, or video. 3. For images, calls Google Gemini with the image URL to generate structured metadata (summary, detailed description, tags, and scores). 4. For PDFs, calls Google Gemini to analyze the document URL and return the same structured metadata. 5. For videos, downloads each file locally, extracts representative frames with FFmpeg for Google Gemini visual analysis, extracts audio, transcribes it with Groq Whisper, and tags transcript chunks with Groq Llama. 6. Normalizes results into a single text “content” field plus JSON metadata, generates Google Gemini embeddings, and inserts the vectors into Supabase (pgvector). 7. Receives a separate webhook query, retrieves the most similar items from Supabase using embeddings, and returns ranked matches in the webhook response. ## Setup 1. Create a Cloudflare R2 bucket with publicly accessible object URLs, and add Cloudflare R2 credentials in n8n. 2. Set up a Supabase project with pgvector enabled and a table named `vec10`, then add Supabase credentials in n8n. 3. Add Google Gemini credentials (Google PaLM/Gemini API) for embeddings and provide an HTTP Header Auth credential for the Gemini HTTP requests. 4. Set the `GROQ_API_KEY` environment variable for the Groq Whisper transcription and Llama tag extraction calls. 5. If you enable video processing, install `curl`, `ffmpeg`, and `ffprobe` on the n8n host and update the local directory paths (temp root, frames directory, and video directory) in the workflow inputs. 6. Copy the ingest webhook (`/vector-ingest`) and query webhook (`/vector-query`) URLs and configure your upstream app to send the expected JSON payloads. ## Additional info Video: FFmpeg code nodes cut videos smartly into "video_frames" items and "video_transcripts" for easy handling and pgvector storage. Exposed webhook to vector query flow allows Voice Agent to find and display the full video, pulled from Cloudflare bucket, by the referenced matching video_frames or video_transcripts returned from vector query.

View

Need Custom Automation?

Get help designing a custom n8n workflow that connects your stack and fits your process.

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

Workflow preview

1. Workflow Overview

Best for

Tools used

Source and attribution

1.1 Workflow description

Who's it for

How it works / What it does

How to set up

Requirements

How to customize the workflow

1.2 Logical Blocks

2. Block-by-Block Analysis

Block 1 - Sticky Note

Block 2 - Sticky Note1

Block 3 - Sticky Note2

Block 4 - Sticky Note3

Block 5 - Sticky Note4

Block 6 - Webhook - Screenshot Upload

Block 7 - Prepare Audit Context

Block 8 - Set UX Config

Block 9 - Filter - Has Screenshot Input

Block 10 - JS - Build Vision API Payload

Block 11 - Wait 1 - Rate Limit Buffer

Block 12 - OpenAI Vision - Heuristic Evaluation

Block 13 - JS - Parse Vision Response

Block 14 - JS - Calculate UX Score & Grade

Block 15 - AI - Generate Improvement Report

Block 16 - JS - Attach Narrative to Report

Block 17 - Update Google Sheet - Audit Log

Block 18 - Send UX Audit Report Email

Block 19 - Webhook Response - Return Audit Report

Block 20 - OpenAI Chat Model

3. Summary Table

4. Reproducing the Workflow from Scratch

1. Download the workflow JSON

2. Import the template into n8n

3. Configure credentials and variables

4. Test with sample data

5. Activate and monitor

5. General Notes & Resources

Frequently asked questions