screenshot-explain://

[ screenshot-explain:// ] experimental

cat: image model: @cf/meta/llama-3.2-11b-vision-instruct

Drop a UI screenshot → get a screen-reader narration. What's on the screen, what's actionable, in reading order.

// system prompt

You narrate UI screenshots in screen-reader order. User uploads + names context. Output:

  ## Page-level description
  <One sentence naming what the screen IS.>

  ## Reading order (top-to-bottom, left-to-right)
  1. <element + content>
  2. ...

  ## Actionable controls
  - <button / link / input> — <label> — <what it does>

  ## Accessibility concerns
  • <observed concern + suggested fix>
  • ...

  ## State / context cues
  <one-line — anything that suggests the user is logged-in / in a particular flow / has data already entered>

Rules:
- "Reading order" follows screen-reader logical order (top-to-bottom, left-to-right for LTR languages).
- Skip purely decorative elements (icons that have no label, dividing lines).
- Actionable controls get their visible label AND your best guess at function.
- Accessibility concerns: low contrast, icon without text label, button without focus state, etc.
- "State" is what tells you the user is on day 1 vs day 100 (e.g. "trial banner visible — 7 days left").

Upload a screenshot + 1-line context (which app / what the user was doing)

⚡ powered by Cloudflare Workers AI · quota deducted on success

// output

// sample output

## Page-level description
A SaaS app account-settings page in a logged-in state, with billing information displayed and subscription controls.

## Reading order (top-to-bottom, left-to-right)
1. Top nav bar: brand logo (left), nav items "Dashboard", "Reports", "Team", "Settings" (current page), user avatar + dropdown indicator (right).
2. Sidebar nav: "Profile", "Notifications", "Billing" (current), "Team", "Integrations", "Danger zone".
3. Main content header: "Billing".
4. Current-plan card: "Pro plan", monthly billing, "$49.00 / month", next billing date 15 June 2026.
5. Payment method card: "Visa **** 1234", expires 09/27, "Update payment method" button.
6. Usage summary: "API calls this month: 14,372 / 50,000", progress bar.
7. "Cancel subscription" button (right-aligned, secondary styling).
8. Footer: "Need help? Contact support" link.

## Actionable controls
- Link: "Dashboard" / "Reports" / "Team" — top-nav navigation
- Button: avatar dropdown — opens user menu
- Link: sidebar items — switches within Settings
- Button: "Update payment method" — opens payment-update flow
- Button: "Cancel subscription" — initiates cancellation (likely modal)
- Link: "Contact support" — opens support channel

## Accessibility concerns
• "Cancel subscription" button has secondary (low-contrast) styling. For destructive actions, consider stronger visual weight + warning colour cue.
• Sidebar "Danger zone" — heading colour should be distinguishable from regular items even without colour vision (currently it appears red; ensure an icon or bold treatment also signals danger).
• Payment-method expiry "09/27" — short-form date is unclear (year first? month first?). Consider "September 2027" or "exp 9/2027".

## State / context cues
User is on the Pro plan ($49/mo). Logged in. API usage is well under the limit. Account has been active long enough to have a stored payment method with a specific card.

// powered by cloudflare workers ai · quota deducted on success ← back to catalog