UX Heuristic Audit with Claude Code

Audit NextWork's project flow using Nielsen's 10 Heuristics and Claude Code.

Introduction

30 Second Summary

Every app you use was designed by someone who made choices about buttons, menus, and flows. Some choices make things effortless. Others leave you confused and clicking in circles.

In this project, you will conduct a professional UX audit of NextWork's project flow using Nielsen's 10 Usability Heuristics. You'll capture screenshots as evidence, analyze them with Claude Code's vision capabilities, and compile everything into a polished HTML report you can submit directly to NextWork.

What You'll Build

You open your browser and see a completed audit report you built from scratch: your own screenshots embedded as evidence, color-coded severity badges next to each finding, and a prioritized recommendation list that tells NextWork exactly what to fix first.

By the end of this project, you'll have:

A browser-ready HTML report with color-coded severity badges, embedded screenshots, and actionable recommendations for every finding.
Working knowledge of Nielsen's 10 Usability Heuristics and how to apply them to evaluate any digital product.
A new Claude Code vision workflow for analyzing screenshots and generating visual deliverables.
Secret Mission: Add a Quick Wins dashboard that visualizes severity distribution and identifies high-impact, low-effort fixes.

Do I need anything before starting?

You need Claude Code installed and working inside Cursor with an active Claude Max subscription. You should also be comfortable running basic commands in Claude Code's terminal interface.

Before We Start

Before We Start...

Before we dive in, let's lock in what you're about to build and why it matters.

Set Up Your Project Workspace

Before you can critique a user experience, you need two things: a place to store your evidence and a tool that can actually see what you see.

In this step, you will create your project workspace, confirm that Claude Code can analyze screenshots using its vision capabilities, and set up a structured template for recording your findings.

In this step, get ready to:

Create a project folder with a screenshots directory for storing your evidence.
Verify Claude Code can describe what it sees in an image you provide.
Set up a findings template file with a repeatable structure for documenting UX issues.

Create the project folder and launch Claude Code

Your audit needs a dedicated workspace on your Desktop so you can find it easily later.

In Cursor, open the integrated terminal by pressing Ctrl+` (backtick key, top-left of your keyboard).
Move to your Desktop by running this command:

cd ~/Desktop

Create the project folder with a screenshots subfolder inside it by running these commands:

mkdir -p nextwork-ux-audit/screenshots
cd nextwork-ux-audit

Confirm both folders exist by running:

ls

You should see screenshots listed in the output.

Launch Claude Code by running:

claude

Claude Code starts up and shows a welcome message with a prompt ready for your input.

Not seeing Claude Code start?

Make sure you have Claude Code installed and are signed in with your Claude Max subscription. If you see command not found, Claude Code is not installed on your machine.

help me troubleshoot launching Claude Code in my terminal

Take a test screenshot and verify Claude Code vision

Claude Code can analyze images you provide, which is the core capability powering your audit. You will feed it screenshots of NextWork's interface and have it identify potential UX issues.

Press Cmd+Shift+5 to open the macOS screenshot toolbar.
Click Options in the toolbar that appears at the bottom of your screen.
Under Save to, click Other Location and navigate to Desktop > nextwork-ux-audit > screenshots.
Click Choose to set this as your save location.
Capture any portion of your screen (Cursor, your browser, anything visible).
Open Finder and navigate to Desktop > nextwork-ux-audit > screenshots to confirm the screenshot file is there.
Rename the file to test.png so it is easy to reference.

Why rename the screenshot?

macOS names screenshots with a timestamp like Screenshot 2026-07-24 at 10.30.00.png. Renaming to test.png keeps the file path short and easy to type or drag.

Now you will test whether Claude Code can actually see and describe the contents of your screenshot.

Switch back to the Claude Code session in Cursor's terminal.
Drag the test.png file from Finder directly into the Claude Code terminal, then type your prompt asking Claude to describe what it sees in the image.

How to pass images to Claude Code

The easiest method on macOS is drag and drop. Drag the image file from Finder into your terminal window. Claude Code accepts PNG, JPEG, GIF, and WebP formats up to 5MB per image.

Alternatively, you can reference the file path directly in your prompt, like: Look at ./screenshots/test.png and describe what you see.

Before you hit Enter, what do you think Claude Code will respond with? Will it describe the visual content, or will it say it cannot process images?

Claude Code responds with a detailed description of what it sees in your screenshot. It names colors, UI elements, text, and layout. This confirms vision is working.

Claude Code not describing your image?

Make sure the file path is correct. If you dragged the file in, check that the path appeared in your prompt text.

Confirm the file is a supported format (PNG, JPEG, GIF, or WebP) and under 5MB.

help me get Claude Code to analyze my screenshot

Create the findings template file

You need a consistent structure for recording each UX issue you find. A template ensures every finding has the same fields, making your final report systematic and professional.

In Claude Code, ask it to create a findings.md file with a structured template for documenting UX audit findings. Tell Claude Code the file should include:

Audit metadata (auditor name, date, scope, methodology).
A severity scale from 0 to 4.
Five finding entries, each with fields for: screenshot path, location on screen, heuristic violated, severity score, problem description, recommendation, and effort level.

What is this template for?

This is where you will record your structured analysis in the next steps. Each finding entry maps to one specific UX issue you observe in NextWork's interface.

The effort field (Low / Medium / High) helps prioritize which fixes are quick wins versus long-term improvements.

After Claude Code creates the file, verify it exists by asking Claude Code to show you the contents of findings.md.

You should see a markdown file with the metadata section at the top, the severity scale definitions, and five finding entries each containing all seven fields.

Missing fields in the template?

If Claude Code left out any fields (like Effort), ask it to update the file. Tell it specifically which fields each finding entry needs: Screenshot, Location, Heuristic Violated, Severity, Problem, Recommendation, and Effort.

help me fix my findings.md template structure

✔️ Awesome, I've got everything!

Great. Make sure you have saved findings.md in the root of your nextwork-ux-audit folder (not inside screenshots/).

ⓧ I'd like to double check the full template

Open findings.md and verify it has these sections in order:

An Audit Metadata section with fields for Auditor, Date, Scope, and Methodology.
A Severity Scale section listing levels 0 through 4 with descriptions (0: Not a usability problem, up to 4: Usability catastrophe).
A Findings section with 5 entries (Finding 1 through Finding 5).
Each finding has all 7 fields: Screenshot, Location, Heuristic Violated, Severity, Problem, Recommendation, and Effort.
Screenshot paths reference the ./screenshots/ folder with descriptive filenames like 01-project-overview.png.

If anything is missing, ask Claude Code to update the file with the missing pieces.

Your workspace is ready. You have a project folder, a working screenshot pipeline into Claude Code's vision, and a structured template waiting for real findings. Next up, you will walk through NextWork's project flow and start capturing evidence.

Capture and Analyze the NextWork Project Flow

Your workspace is set up and Claude Code can see images. Now you need the raw material for your audit: real evidence of the user experience, captured as screenshots.

In this step, you'll walk through a NextWork project as a real user, capture what you see at each stage, and have Claude Code analyze those screenshots for potential UX issues. You'll combine the AI's observations with your own firsthand experience into a single raw findings list.

In this step, get ready to:

Walk through a NextWork project flow and capture 5-7 screenshots as evidence.
Feed your screenshots to Claude Code for AI-assisted UX analysis.
Combine Claude's observations with your own firsthand experience into a raw findings file.

Walk through and screenshot the NextWork project flow

Every finding in a professional UX audit needs evidence. Screenshots are that evidence. You're going to walk through a real NextWork project from start to finish and capture what you see at each distinct stage.

Open your web browser and navigate to a NextWork project you have not yet completed.
Press Cmd+Shift+5 to open the macOS screenshot toolbar.
Click Options in the screenshot toolbar and set the save location to your screenshots/ folder inside nextwork-ux-audit on your Desktop.

Setting a save location

After pressing Cmd+Shift+5, the toolbar appears at the bottom of your screen. Click Options, then Other Location... to choose your screenshots/ folder. All future screenshots will save there automatically.

Now walk through the project flow and capture a screenshot at each distinct stage. You need 5-7 screenshots covering the full journey.

Capture the project overview/landing page. Save it as 01-project-overview.png.
Capture the track selector screen. Save it as 02-track-selector.png.
Capture the first set of project instructions. Save it as 03-instructions.png.
Capture a mid-project guidance screen. Save it as 04-mid-project.png.
Capture the completion/submission interface. Save it as 05-completion.png.

What if my screenshots save with different names?

macOS names screenshots automatically (like Screenshot 2026-07-24 at 10.30.00.png). Rename each file after you take it to match the descriptive naming pattern above. Right-click the file in Finder and select Rename.

You can also take more than 5 screenshots if you spot interesting moments. Aim for 5-7 total.

Confirm your screenshots are saved by running this in Claude Code:

ls screenshots/

You should see your 5-7 PNG files listed with their descriptive names.

Don't see your screenshots?

Make sure you set the save location to the screenshots/ folder inside nextwork-ux-audit on your Desktop. If they saved elsewhere, move them into the screenshots/ folder now.

Also confirm the files are PNG format. Claude Code supports JPEG, PNG, GIF, and WebP images.

Why aren't my screenshots appearing in the correct folder?

Feed all screenshots to Claude Code for initial UX analysis

You have evidence. Now you need a second pair of eyes. Claude Code's vision capabilities let it look at your screenshots and spot potential usability issues you might have missed.

In Claude Code, type the following prompt to have it analyze all of your screenshots at once:

Look at these screenshots in ./screenshots/ of a learning platform's project flow (from project page through completion). Identify any potential usability issues, confusing elements, or friction points you notice. Be specific about what you see and where.

What does this prompt do?

Claude Code reads every image file in your screenshots/ folder and analyzes the UI elements, layout, text, and interactions visible in each one. By asking it to be specific about "what" and "where," you get observations tied to exact locations on screen rather than vague generalities.

Before you press Enter, take a moment. What kinds of UX issues do you think Claude Code will spot that you might not have noticed yourself?

Press Enter to send the prompt.
Read through the list of observations Claude Code returns.

Claude Code responds with a list of potential issues it spotted across your screenshots. Some will be things you noticed too. Others might surprise you.

Drag-and-drop works too

If Claude Code does not pick up the screenshots from the file path, you can drag and drop individual image files from Finder directly into the Claude Code terminal. This is the most reliable method for image input on macOS.

Claude Code not recognizing your images?

Make sure your images are under 5MB each and in PNG format. If Claude Code says it cannot access the files, try referencing a single file by its full path first (e.g., Look at ./screenshots/01-project-overview.png and describe what you see).

Help me get Claude Code to analyze my screenshot files

Add your own observations from experiencing the flow

Claude Code can analyze pixels, but YOU walked through the experience. You felt the confusion, the hesitation, the moments of delight. Those firsthand observations are just as valuable as the AI's analysis.

Think about your experience walking through the NextWork project flow. What confused you? What felt slow? Where did you hesitate? What actually delighted you?
Share your firsthand observations with Claude Code and ask it to combine everything into a single file by typing this prompt:

Here are my own observations from walking through the flow as a real user:

- [Share what confused you]
- [Share what felt slow or frustrating]
- [Share where you hesitated]
- [Share what delighted you or worked well]

Combine your earlier analysis with my observations into a single raw findings list. Save it to raw-observations.md in the project root.

Why combine both perspectives?

AI analysis catches visual inconsistencies and accessibility issues that a user might overlook. Your firsthand experience catches emotional friction, confusing workflows, and moments of uncertainty that a pixel-level analysis misses. Together, they create a more complete picture.

Replace the bracketed placeholders with your actual observations before pressing Enter.
Confirm the file was created by running:

ls raw-observations.md

You should see raw-observations.md listed in the output.

Read through your combined findings by asking Claude Code to show you the file contents:

cat raw-observations.md

You now have a combined list of UX observations. Take a moment to read through it.

File is empty or missing your observations?

If Claude Code created the file but it only contains the AI observations without yours, ask it again: "Add my observations to the existing raw-observations.md file" and re-share your bullet points. Claude Code sometimes needs a direct instruction to append rather than overwrite.

Help me get Claude Code to save both AI and human observations into one file

Look at your raw observations list. You have a collection of potential UX issues spotted by both you and Claude Code. Could you hand this list to the NextWork team right now and expect them to act on it?

Probably not. The observations are exciting, but they are just opinions. There is no severity ranking, no categorization, and no clear priority. A product team receiving this list would not know what to fix first or why each issue matters.

You have raw evidence and raw observations. Next up, you'll transform this dump of opinions into a structured, professional-grade critique using the industry-standard framework that UX consultancies have relied on for three decades.

Structure Your Findings with Nielsen's 10 Heuristics

You now have a list of raw observations from Claude Code and from your own experience. They're interesting, but right now they're just opinions.

If you submitted these as-is, NextWork couldn't act on them. They wouldn't know which issues are critical, which are cosmetic, or what principle each one violates. Nielsen's 10 Usability Heuristics are the industry-standard framework that transforms vague "this feels off" observations into defensible, professional-grade critique any UX team can prioritize.

In this step, get ready to:

Learn all 10 of Nielsen's Usability Heuristics with examples.
Categorize each raw observation by heuristic and severity score.
Compile your structured findings into a professional audit document.

Learn the framework

Before you can label anything, you need to understand the 10 lenses you'll evaluate through. Each heuristic captures a different dimension of usability.

Ask Claude Code to teach you all 10 heuristics by typing this prompt in your terminal:

Teach me Nielsen's 10 Usability Heuristics. For each one, give me the name, a one-sentence explanation, and one example of a violation on a typical website.

What are the 10 heuristics?

Claude Code will return all 10. Here's a quick reference so you know what to expect:

H1: Visibility of System Status (keep users informed about what's happening).
H2: Match Between System and the Real World (use language and concepts users already know).
H3: User Control and Freedom (provide clear undo and exit options).
H4: Consistency and Standards (don't make users wonder whether different words or actions mean the same thing).
H5: Error Prevention (eliminate error-prone conditions before they happen).
H6: Recognition Rather Than Recall (minimize memory load by making options visible).
H7: Flexibility and Efficiency of Use (provide shortcuts for expert users).
H8: Aesthetic and Minimalist Design (only show information that's relevant right now).
H9: Help Users Recognize, Diagnose, and Recover from Errors (error messages should explain the problem and suggest a fix).
H10: Help and Documentation (provide easy-to-search help that's focused on the user's task).

Read through Claude Code's full explanation of all 10 heuristics and their examples.
Pay attention to the violation examples. These are the patterns you'll look for in your own observations.

Keep the heuristics visible

You don't need to memorize all 10 right now. Claude Code's response stays in your terminal scroll history, so you can scroll up to reference the list as you work through the next substep.

Categorize your raw findings

Now you'll apply those 10 lenses to the observations you already captured. For each one, you need to identify which heuristic it violates, how severe it is, and what should be done about it.

Ask Claude Code to help you categorize your raw observations by running this prompt:

Read raw-observations.md. For each observation, help me identify: which of Nielsen's 10 Heuristics it violates (use H1-H10 labels), a severity score from 0 to 4 using Nielsen's severity scale, and a concrete actionable recommendation for how to fix it. Work through them one at a time so I can push back or adjust.

What does the severity scale mean?

Nielsen's severity scale runs from 0 to 4. Use these definitions when deciding how to rate each finding:

0: Not a usability problem.
1: Cosmetic problem only. Fix if time allows.
2: Minor usability problem. Fixing has low priority.
3: Major usability problem. Important to fix, high priority.
4: Usability catastrophe. Imperative to fix before release.

Work through each observation Claude Code presents. For each one, review its suggested heuristic label and severity score.
Push back if you disagree. You walked through the flow firsthand. If Claude rates something a 1 but it genuinely blocked you, tell it why you'd rate it higher.
Make sure each observation has a specific, actionable recommendation. "Make it better" is not actionable. "Add a progress indicator showing step 3 of 7" is.

Claude Code giving vague recommendations?

If the recommendations feel generic ("improve the UI", "make it clearer"), ask Claude Code to be more specific. Try: "That recommendation is too vague. What exact UI element would you change, and what would the new version look like?"

help me get more specific recommendations from Claude Code for my UX findings

Write the structured findings document

Your categorized observations are now ready to be compiled into the findings.md template you created in Setup. Each finding entry will get the full professional treatment: screenshot reference, heuristic label, severity justification, and actionable fix.

Have Claude Code compile your categorized findings into the template by running this prompt:

Now compile all our categorized findings into the findings.md template. For each finding, fill in: the screenshot it references (from the ./screenshots/ folder), the specific location on screen, which heuristic (H1-H10 with the full name) is violated, the severity score with a brief justification after it, a clear problem description including its impact on the user, a specific actionable recommendation, and an effort estimate (Low / Medium / High) for how hard the fix would be to implement. Make sure there are at least 5 strong findings.

What does the effort estimate mean?

The effort estimate helps prioritize fixes. Think about it from a development team's perspective:

Low: A text change, color swap, or adding a single UI element. Could ship in a day.
Medium: Reworking a component's layout or adding a new interactive feature. A few days of work.
High: Redesigning a full flow or building new infrastructure. A week or more.

Review what Claude Code wrote to findings.md. Check that each finding has a real heuristic label (not just a generic category), a justified severity score, and a recommendation specific enough that a developer could act on it.
If any finding feels weak or duplicates another, ask Claude Code to replace it with a stronger observation from your raw notes.

Before you check the file, how many unique heuristics (H1-H10) do you think your findings cover? Do you expect most of them to cluster around one or two heuristics, or spread across many?

Verify your structured document by asking Claude Code to read it back to you:

Read findings.md and give me a summary: how many findings total, which heuristics are represented, and the severity distribution (how many at each level 0-4).

You should see at least 5 findings, each with a specific heuristic label (H1-H10), a severity score (0-4), and a concrete recommendation. If any are missing or incomplete, ask Claude Code to fill them in now.

Fewer than 5 findings?

If you ended up with fewer than 5, go back to your screenshots. Ask Claude Code to look at a specific screenshot again and identify issues you might have missed: "Look at ./screenshots/03-instructions.png again. Are there any usability issues we didn't catch the first time?"

help me find more UX issues in my screenshots

Your observations have graduated from opinions to professional critique. Each finding now carries the weight of an industry-standard framework, a justified severity score, and a clear fix. Next up, you'll turn this structured data into a visual HTML report that looks as professional as the methodology behind it.

Build the Visual HTML Report

Your structured findings in findings.md are professionally categorized and scored. But a markdown file is not a deliverable you can proudly submit or share.

In this step, you will transform your findings into a visual, interactive HTML report. Claude Code will read your structured data and generate a polished single-page report that you can open in any browser.

In this step, get ready to:

Generate a professional HTML report from your structured findings.
Review and refine the report in your browser.
Add personal commentary to make the report authentically yours.

Generate the HTML report

Claude Code can read your structured findings and generate a complete, styled HTML page from them. The prompt needs to describe the report structure you want so Claude Code produces the right layout.

In Claude Code, ask it to generate your report by entering this prompt:

Read my findings.md file and generate a single-page index.html report.
Build a professional UX audit report as a single HTML file with
embedded CSS. It should have: an executive summary at the top with
the total number of findings by severity, a methodology section
explaining Nielsen's Heuristics and the 0-4 severity scale, then a
findings section where each finding is a visual card showing the
referenced screenshot, the heuristic violated, a colored severity
badge, the problem description, and the recommendation. Use a clean,
minimal design with a professional color palette. Reference
screenshots from the ./screenshots/ folder.

What does this prompt ask for?

The prompt tells Claude Code to read your existing findings and build a structured HTML page with three key sections:

An executive summary with severity counts displayed as a grid of cards.
A methodology section explaining the heuristic framework and severity scale to anyone reading the report.
A findings section where each finding gets its own visual card with the screenshot, problem description, severity badge, and recommendation.

Wait for Claude Code to finish generating the file. Then confirm it was created by running:

ls index.html

You should see index.html listed in the output.

Don't see index.html?

Make sure Claude Code finished generating the file before you ran ls. Check that you are still inside the nextwork-ux-audit folder by running pwd.

If Claude Code created the file in a subfolder, ask it to move the file to the project root.Why wasn't index.html created in my project folder?

Review and refine the report in your browser

The generated HTML needs to be checked visually. Screenshots need to load correctly, severity badges need the right colors, and the layout needs to be readable.

Open the report in your browser by running:

open index.html

Check that your screenshots appear as images inside each finding card (not as broken image icons).
Check that severity badges show different colors for different severity levels.
Check that the executive summary at the top shows the correct count of findings at each severity level.

What should I see?

Your report should have a header with the audit title, five color-coded severity count cards in a row, a methodology section, and then individual finding cards. Each card shows the screenshot image, the heuristic violated, a colored badge, and the recommendation in a green-highlighted box.

If anything looks broken (images not loading, layout issues, missing sections), tell Claude Code exactly what you see and ask it to fix the issue. For example:

My screenshots aren't loading in the report. The image paths
need to point to ./screenshots/ relative to the index.html file.
Please fix the image src attributes.

After each fix, refresh your browser to confirm the change took effect.

Screenshots showing as broken images?

This usually means the image paths in the HTML do not match your actual file names. Check that the filenames in your screenshots/ folder match what the HTML references. File names are case-sensitive.

Run ls screenshots/ to see your actual file names, then ask Claude Code to update the HTML to match.Why aren't my screenshots loading in the HTML report?

Add your personal commentary

A report that reads like it was entirely AI-generated loses credibility. Your personal voice and perspective are what make this audit authentic and valuable.

Ask Claude Code to add a personal introduction and methodology note by entering this prompt:

In index.html, add an 'About This Audit' section near the top
(after the header) with a placeholder for me to write 2-3 sentences
about who I am and why I conducted this audit. Also update the
methodology section to include a note explaining that I conducted
this audit as an actual user of the platform, combining firsthand
experience with AI-assisted analysis and Nielsen's heuristic
framework.

Why does personal commentary matter?

Professional UX audits always include an auditor's perspective. The methodology note establishes credibility by showing you experienced the flow firsthand, not just ran it through an AI. The intro paragraph tells the reader who you are and what motivated the audit.

After Claude Code updates the file, open the "About This Audit" section in Cursor and replace the placeholder text with your own words. Write 2-3 sentences about who you are and why you did this audit.
Save index.html.

Before you refresh the browser, what do you expect to see at the top of your report now?

Refresh the browser to see your final report.

You should see the full report with your personal intro near the top, the executive summary grid, the methodology section, and all your finding cards with embedded screenshots and color-coded severity badges.

Edit the executive summary too

The executive summary counts were generated by Claude Code based on your findings. Double-check they match your actual severity distribution. If they are off, ask Claude Code to update the numbers or edit them directly in Cursor.

✔️ Awesome, my report looks great!

Your HTML report is complete. Confirm that you can see all five sections: header, personal intro, executive summary, methodology, and findings cards.

ⓧ Something still looks off

Describe exactly what looks wrong to Claude Code. Common fixes:

If the layout is cramped or overlapping, ask Claude Code to increase padding and margins.
If colors look wrong on severity badges, ask it to use red for severity 4, orange for severity 3, yellow for severity 2, blue for severity 1, and gray for severity 0.
If a section is missing entirely, ask Claude Code to add it and describe what should go there.

After each fix, refresh your browser. Repeat until you are satisfied with the report.

Secret mission

Add a Quick Wins Dashboard

A real UX audit does not just list problems. It tells the team what to fix FIRST. Add a Priority Dashboard that visualizes severity distribution and highlights the high-impact, low-effort fixes that deliver the most value fastest.

Clean Up Your Resources

This project runs entirely locally, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

The nextwork-ux-audit project folder on your Desktop (contains index.html, findings.md, raw-observations.md, and the screenshots/ folder).

Keep everything running

No action needed. Choose this if you plan to refine your audit, submit it to NextWork, or use it as a portfolio piece.

Your nextwork-ux-audit folder with the HTML report and screenshots stays on your Desktop.
You can open index.html in any browser to view or share your report at any time.
If you want to tidy up, you can delete raw-observations.md since the structured findings are already captured in your final report.

Pause - I'll come back to this later

Since everything is local files, there is nothing to pause or shut down. Your report stays exactly where it is until you come back.

Your project folder remains on your Desktop with no running processes to stop.
To pick up where you left off, open Cursor and navigate back to the nextwork-ux-audit folder.

Delete - I don't want to use this again

Remove all project files from your machine. This cannot be undone.

Delete the entire project folder by running this command in your terminal:

rm -rf ~/Desktop/nextwork-ux-audit

Confirm the folder is gone by running:

ls ~/Desktop | grep nextwork

You should see no output, confirming the folder has been removed.

Nice Work!

You just built a professional UX heuristic audit report from scratch using Claude Code. Your report evaluates a real product with the same methodology used by professional UX consultancies.

You learned how to:

Apply Nielsen's 10 Usability Heuristics to evaluate a real digital product, transforming vague observations into structured, defensible critique with severity scores.
Use Claude Code's vision capabilities to analyze screenshots, identify UX issues, and generate a polished interactive HTML report.
Structure evidence-based findings with heuristic labels, severity ratings, and actionable recommendations that a product team can prioritize and act on.
Secret Mission: Added a Quick Wins dashboard that visualizes severity distribution and highlights high-impact, low-effort fixes for immediate action.

Ready to quiz yourself?