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.
"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.
<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.
- Compare the findings with a browser accessibility audit for contrast and semantic issues.
- Ask a designer to mark which findings are actionable before opening tickets.
- 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
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.
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 Help Center
Custom visuals in chat and Cowork
Claude can generate diagrams, charts, and interactive visuals in chat when a visual is useful.