Predictive Eye Tracking Heatmap Generator — ChatGPT prompt for UI
A prompt that turns a UI screenshot into a thermal heatmap: where the eye lands, and what gets scrolled past.
Open on GitHubWhat Predictive Eye Tracking Heatmap Generator does
The prompt casts the model as a senior UX researcher running a predictive visual attention simulation. You feed it a screenshot of a web or mobile interface, and it returns an image with a heatmap overlaid on the original screen. The reasoning leans on Nielsen Norman Group material, Cognitive Load Theory and Gestalt principles.
Four rules drive the overlay. Biological priority puts faces and eyes in the hottest red zone. The Von Restorff effect flags high-contrast elements such as a primary CTA as fixation points. F-pattern gravity sets a default top-left to bottom-right reading bias toward the left margin. Goal-directed affordance seeking highlights buttons, inputs and nav links where the brain expects interactivity.
The color scale is spelled out in the prompt: red for intense fixation and dwell time, yellow and orange for areas scanned briefly, blue or transparent for what gets ignored. The prompt claims 85-90% predictive accuracy against real human data. That figure is the prompt's own target, not a measured result, so treat the output as a hypothesis worth testing rather than a substitute for a live study.
What it helps with
- guess where attention lands on a new layout before running a test
- show a client that the primary CTA is getting lost
- compare two versions of a screen by attention distribution
- spot regions users are likely to skip entirely
- explain to a team why the sidebar banner goes unnoticed
Example prompts for the agent
- Analyze this UI screenshot and generate a thermal heatmap overlay on top of it
- Run the eye-tracking simulation on my signup screen and mark the fixation zones
- Compare these two cart screenshots and show where attention shifts
How to install Predictive Eye Tracking Heatmap Generator
How to use
Paste the text at the start of a chat or into project instructions
Manually: put the files in place
.claude/commands/prompts.csv.mdQuestions about Predictive Eye Tracking Heatmap Generator
How do I install Predictive Eye Tracking Heatmap Generator in Claude?
There is no install command: you paste the prompt into a chat or save it as an instruction. Copy the prompt text, open a new chat, and send it together with your UI screenshot.
What does Predictive Eye Tracking Heatmap Generator do?
It simulates eye movement across a web or mobile UI screenshot and returns an image with a thermal heatmap over the original screen. The colors show where dwell time is long and where an element will go unseen.
What are the highlighting rules based on?
Four principles: biological priority for faces and eyes, the Von Restorff effect for high-contrast elements, F-pattern scanning gravity, and goal-directed affordance seeking. The prompt cites Nielsen Norman Group, Cognitive Load Theory and Gestalt principles.
Source text
prompts.csv · CC0-1.0
{
"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."
}
}
}
}
© ilkerulusoy · CC0-1.0 · f/prompts.chat
