Vision demo

The Screenshot-to-UX Audit

Upload a screenshot and ask Claude to return prioritized UX, accessibility, and conversion issues with exact visual evidence.

Designers, PMs, founders, support teams Beginner 8-15 minutes

"Upload an image like you would a file"

Setup: what the audience sees

A static screenshot becomes a critique session. The reveal works because Claude can discuss visual hierarchy, confusing labels, and likely user paths without needing the full app.

The setup matters because Claude demos fail when the prompt hides the goal, mixes private data into a public reveal, or asks for a finished answer without giving the model a way to expose assumptions.

  • Use a screenshot you own or a public page you can inspect.
  • Include the user goal: purchase, sign up, complete a task, compare plans, or recover from an error.
  • Ask Claude to distinguish visible evidence from assumptions.

What this does not prove

It does not replace user research or automated accessibility testing. It is a fast visual review that should feed a prioritized QA pass.

Copyable prompt Plain text
<context>I am uploading one product screenshot.</context>
<user_goal>The user is trying to choose the right plan and start checkout.</user_goal>
<task>
Audit the screenshot for UX, accessibility, and conversion problems.
</task>
<output_format>
- Top 5 issues, ordered by likely user impact
- For each issue: visible evidence, why it matters, suggested fix, confidence
- One thing the screen does well
- One follow-up screenshot I should upload next
</output_format>
<constraint>Do not infer hidden flows. Base findings on what is visible.</constraint>

The reveal: what should happen

  • Claude should point to visible details: hierarchy, labels, contrast, grouping, affordances, and missing states.
  • The confidence column keeps speculative product advice from masquerading as observed fact.
  • The next-screenshot recommendation turns a one-shot demo into a review sequence.

Verification steps

A demo becomes useful when the audience can inspect it. Use the steps below to turn the reveal from theater into a repeatable workflow.

  1. Compare the findings with a browser accessibility audit for contrast and semantic issues.
  2. Ask a designer to mark which findings are actionable before opening tickets.
  3. Upload a second state, such as the checkout modal or error view, and see whether the critique adapts.

Guardrails

  • Blur private user data before uploading support screenshots.
  • Do not ask Claude to identify private people from images.
  • Treat conversion advice as a hypothesis until tested.

Variations

  • Audit a confusing settings screen.
  • Audit a pricing page against a specific buyer persona.
  • Audit a mobile error state for recovery clarity.

FAQ

Can Claude inspect the live page from the screenshot?

Not from the screenshot alone. Use web search, a URL, or browser/computer-use features only when current page context is required.

What makes the prompt reliable?

It forces visible evidence, confidence, and a user goal, which reduces generic design advice.

Related demos

Primary Sources

These demos cite official Anthropic docs or help-center pages for capability claims. They do not claim identical output across accounts, plans, models, or dates.

Claude Platform Docs

Vision

Claude can receive image inputs through Claude.ai, Workbench, and API image content blocks.

Claude Platform Docs

Prompting best practices

Anthropic guidance emphasizes explicit instructions, output formats, tool-use direction, and model-specific prompt updates.

Claude Platform Docs

Increase output consistency

When exact JSON conformance matters, Anthropic recommends structured outputs rather than prompt-only formatting.