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.

Cast: Opus 5Designers, PMs, founders, support teamsBeginner8-15 minutes

"Upload an image like you would a file"

Casting: which model to run

Claude Opus 5 is the right cast here. The demo is short, visual, and best served by a model your audience already has. Haiku 4.5 is fine for checking that the prompt shape returns the table you want before you spend a frontier call.

See the casting page for the full current lineup and API IDs. MagicClaude does not score models; Claude Reports covers benchmark comparisons and pricing analysis.

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 promptPlain 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.

Keep the act moving

Related demos and tools

Artifacts

Artifact Prototype

Give Claude a messy product idea and ask for a shareable interactive prototype with states, empty cases, and iteration notes.

Computer Use

Browser Chore

Show Claude using browser/computer workflows on non-sensitive tasks while keeping permissions and prompt-injection risk visible.

Tool

Demo Gallery Tool

Find more exact prompts by format, audience, and difficulty.

Tool

Prompt Remixer

Turn this prompt pattern into a themed copy-paste variant.

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.

Claude Platform Docs

Claude Opus 5 overview

Claude Opus 5 (`claude-opus-5`) launched July 24, 2026 with a 1M-token context window, 128K max output, adaptive thinking, and an optional fast mode.