🛠️ Tools & Productivity

Predictive Eye Tracking Heatmap Generator

📁 Tools & Productivity 👤 Contributed by @ilkerulusoy 🗓️ Updated 2026-04-19

The prompt

{ "system_configuration": { "role": "Senior UX Researcher & Cognitive Science Specialist", "simulation_mode": "Predictive Visual Attention Modeling (Eye-Tracking Simulation)", "reference_authority": ["Nielsen Norman Group (NN/g)", "Cognitive Load Theory", "Gestalt Principles"] }, "task_instructions": { "input": "Analyze the provided UI screenshots of web/mobile applications.", "process": "Simulate user eye movements based on established cognitive science principles, aiming for 85-90% predictive accuracy compared to real human data.", "critical_constraint": "The primary output MUST be a generated IMAGE representing a thermal heatmap overlay. Do not provide random drawings; base visual intensity strictly on the defined scientific rules." }, "scientific_rules_engine": [ { "principle": "1. Biological Priority", "directive": "Identify human faces or eyes. These areas receive immediate, highest-intensity focus (hottest red zones within milliseconds)." }, { "principle": "2. Von Restorff Effect (Isolation Paradigm)", "directive": "Identify elements with high contrast or unique visual weight (e.g., primary CTAs like a 'Create' button). These must be marked as high-priority fixation points." }, { "principle": "3. F-Pattern Scanning Gravity", "directive": "Apply a default top-left to bottom-right reading gravity biased towards the left margin, typical for western text scanning." }, { "principle": "4. Goal-Directed Affordance Seeking", "directive": "Highlight areas perceived as actionable (buttons, inputs, navigation links) where the brain expects interactivity." } ], "output_visualization_specs": { "format": "IMAGE_GENERATION (Heatmap Overlay)", "style_guide": { "base_layer": "Original UI Screenshot (semi-transparent)", "overlay_layer": "Thermal Heatmap", "color_coding": { "Red (Hot)": "Areas of intense fixation and dwell time.", "Yellow/Orange (Warm)": "Areas scanned but with less dwell time.", "Blue/Transparent (Cold)": "Areas likely ignored or seen only peripherally." } } } }

0 copies

🚀 Open in ChatGPT ✨ Open in Claude 💎 Open in Gemini

Example outputs

Here is what ChatGPT, Claude, and Gemini typically return for this prompt:

🚀 ChatGPT

I'll analyze your UI screenshot using predictive eye-tracking principles. Based on cognitive science research, I'll generate a heatmap overlay showing where users' attention naturally gravitates. The hottest zones (red) will appear on human faces, high-contrast CTAs, and the upper-left quadrant following F-pattern scanning behavior. Areas with interactive affordances like buttons will show medium-intensity focus (orange-yellow), while less visually distinct regions receive cooler tones (blue-green).

✨ Claude

I should note that I cannot actually generate images or visual heatmaps. However, I can provide a detailed textual analysis of predicted eye-tracking patterns for your UI. If you share a screenshot, I'll identify likely hotspots based on biological priority (faces/eyes), visual isolation effects (prominent CTAs), F-pattern scanning tendencies, and interactive affordances. For actual heatmap visualization, you'd need specialized eye-tracking software or services like Attention Insight.

💎 Gemini

I can analyze UI layouts for predicted visual attention patterns based on established UX research (Nielsen Norman Group, cognitive load theory). However, I cannot generate heatmap images directly. I can describe where hot zones would likely appear: faces and primary CTAs get highest attention (red zones), navigation elements and headings follow F-pattern flow (orange/yellow), while body content and footers receive less initial focus (green/blue).

How to use this prompt

Copy the prompt above or click an "Open in" button to launch it directly in your preferred AI. You can then customize the wording to match your exact use case — for example replacing placeholders like [your topic] with real context.

Which AI model works best

ChatGPT, Claude, and Gemini all produce useful results for this type of prompt. Claude is usually the most nuanced, ChatGPT the fastest, and Gemini the best when visual input or Google Workspace data is involved.

How to customize this prompt

Adapt the prompt to your specific use case. Replace placeholders (usually in brackets or caps) with your own context. The more detail you provide, the more precise the response.

Common use cases

Use directly in ChatGPT, Claude, or Gemini
Adapt to your specific project or industry
Use as a starting point for your own custom prompt
Compare across models to find the best fit for your case
Share with your team as a standard workflow

Variations

Adapt the tone (more casual, more technical), change the output format (bullet points vs. paragraphs), or add constraints (word limits, target audience).