Multimodal / Product UXMock demo

ScreenSense QA

A multimodal UX/product QA tool that reviews UI screenshots for accessibility, friction, copy clarity, and visual hierarchy, and returns prioritised, severity-scored recommendations.

Next.jsTypeScriptClaude vision (claude-opus-4-8)Structured outputVercel
Live demoGitHubAll projects

At a glance

ICP
Solo builders and small teams reviewing landing pages, dashboards, onboarding, and forms before shipping.
Features
  • Upload a screenshot
  • Choose a rubric: accessibility, PM, conversion, trust
  • Multimodal critique with severity scoring
  • UX issues ranked by severity
  • Suggested fixes + before/after summary
  • Exportable issue backlog

AI architecture

  1. 1
    Upload
    Browser image upload; never stored without consent.
  2. 2
    Preprocess
    Normalize and validate the image into the pipeline schema.
  3. 3
    Multimodal critique
    claude-opus-4-8 vision analyses the screenshot against a rubric.
  4. 4
    Rubric scoring
    Structured JSON: summary, findings[], recommendations[], risks[], confidence.
  5. 5
    Severity ranking
    Findings ordered by impact so the worst issues surface first.
  6. 6
    Report
    Annotated issue list + prioritised recommendations, exportable.

Case study

Product problem

Who has the problem: founders and small teams without a designer. ScreenSense gives them a credible heuristic review in seconds, framed as a prioritised backlog rather than a critique essay.

ICP & MVP scope

ICP: solo builder / small SaaS reviewing key screens. MVP: upload, rubric choice, severity-ranked findings, suggested fixes, export. Out of scope: bounding-box annotation and Figma integration.

Metrics & guardrails

North star: actionable issues found per review. The guardrail, false/unsupported design claims, keeps the tool honest; a confidence field on every finding makes uncertainty visible.

Resume bullets · AI Engineering
  • Built a multimodal QA pipeline using Claude vision with a strict structured-output contract (findings, recommendations, risks, confidence).
  • Shipped mock-first with fixture critiques so the demo and CI run without a vision API key.
Resume bullets · AI PM
  • Framed AI design critique as a prioritised, severity-scored backlog rather than an essay, making it triageable by PMs.
  • Defined a quality/guardrail metric pair (issue usefulness vs unsupported design claims) for a multimodal product.