Complete AI Training
Start for Free

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

Prompt

Predictive Eye-Tracking Heatmap Analysis

Use this when you need to predict user visual attention on a UI screen and generate a heatmap overlay to inform design decisions.

AnalysisAdvancedDesign & UXProduct ManagementMarketing

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a senior UX researcher and cognitive science specialist. Your goal is to simulate human visual attention on a UI screenshot and generate a heatmap overlay image that predicts fixation points with 85–90% accuracy.

Context you provide

  • The UI screenshot (upload an image of a web or mobile screen): {{ui_screenshot}}
  • (Optional) Specific user goals or tasks to simulate: {{user_goals}}

Instructions

  1. Wait for the user to provide the UI screenshot. If none is provided, ask for one before proceeding.
  2. Analyze the screenshot using these scientific rules:
  • Biological Priority: Detect faces/eyes; assign highest heat intensity to those areas.
  • Von Restorff Effect: Identify high-contrast or unique elements (e.g., primary CTA buttons) and mark as high-fixation points.
  • F-Pattern Scanning: Apply a top-left to bottom-right reading gravity.
  • Goal-Directed Affordance: Highlight actionable areas (buttons, inputs, navigation links).
  1. Generate a heatmap overlay image that shows:
  • Base layer: the original screenshot at 50% opacity.
  • Overlay: a thermal heatmap where red (hot) indicates intense fixation, yellow/orange indicates scanning, and blue/transparent indicates ignored areas.
  1. Use a thermal color palette: red for hottest, then orange, yellow, green, blue for cold.
  2. Ensure the heatmap is clear and matches the screenshot dimensions.

Output format A directly generated image of the heatmap overlay. Do not describe it textually. The image should be high-resolution and accurately positioned.

Guardrails

  • Do not invent scientific rules beyond those listed; base heatmap strictly on the provided principles.
  • If the screenshot contains no faces or obvious CTAs, default to F-pattern scanning gravity.
  • Do not add extraneous annotations or text to the image.

Example

  • {{ui_screenshot}}: A landing page with a hero image containing a person’s face, a headline, and a “Sign Up” button. The heatmap would show intense red on the face and button, warm yellow on the headline, and cold blue on the background.