Hire an AI screen usability reviewer

Everything it can hand back

Your task sets the actual outputs. The specialist picks the methods that cover them.

• A call of ready, fix first or rethink, with the working
• A ranked fix list, each with the harm and the size of the fix
• Values on the screen that are not in your design rules
• Problems that keep coming back, with a rule that would stop them

How it does the job well

• Start from the user's task and the content, then the layout. Decoration comes last.
• Design every state: empty, loading, error, long text and mobile.
• Keep one visual system. Reuse spacing, type and colour tokens instead of one-off values.
• Check text contrast (at least 4.5:1 for body text) and keyboard focus as you go.

Mistakes it avoids

• Calling a screen ready from a score alone. A score of 85 with one high-cost break is not ready.
• Findings that say "feels off" with no rule or step.
• Judging taste. Review use, clarity and consistency with the rules.
• Re-raising a break the owner chose to accept, unless the screen changed.
• Treating this review as a user test. It finds likely breaks, and it flags what real people must try.
• Designing only the happy path at desktop width.

What a good result looks like

An example, not your task: You ship new screens often and want each one reviewed the same way before it goes out.

• The call. Ready, fix first or rethink, with the usability score, the other scores and the working.
• The task. One line on what the person is there to do and what finished looks like.
• Fix list. Up to 12 fixes, highest harm first, each with screen part, harm, size and the step that found it.
• Off the rules. Each value on the screen that is not in your design rules, with the nearest value that is.
• Keeps coming back. Problems seen on 3 or more screens, with a rule that would stop them.
• Needs a real test. Each doubt a review cannot settle, and the test that would settle it.

How the work is checked

• Every finding ties back to the task and names the screen part.
• The call follows the limits in step 6, and the working is shown.
• Problems the owner accepted before are not raised again.
• Checks that were skipped are named, with the reason.
• States which checks passed, failed or could not run, and names missing inputs.

These checks have not been run against a model yet. Your AI uses them to check its own work.

A second opinion

Before it hands back, your AI reviews the draft the way Don Norman and Jakob Nielsen would. This is a way of reviewing the work. It does not mean they wrote or endorse it.

Capabilities

• Load the memory. Reads your design rules, the problems you chose to accept and the problems seen on earlier screens.
• Name the task. Writes what the person is there to do. Every finding has to tie back to it.
• Review for use. Walks the screen as a newcomer against ten usability rules and scores it out of 100.
• Choose the visual checks. Picks the design feedback, the page standards check, the generic-look check, the contrast check or the hierarchy fix, based on what you gave it.
• Measure and make the call. Compares the screen with your rules and calls it ready, fix first or rethink, using clear limits.
• Check for repeats and hand back. Counts problems that return, suggests a rule when one appears on three screens, and stops for your decision.

How the role works

1. Checks your task, context and available tools.
2. Picks the methods needed and prepares a work plan.
3. Carries out supported tasks, with each method's limits and review gates.
4. Checks the real deliverables and corrects supported faults.
5. Hands back files, evidence and unresolved gaps.

Your specialist's working setup

Download the base specialist without a task form or account. README.md and SETUP.md explain how to use the folder. SOUL.md defines its scope. INTAKE.md asks missing questions inside your AI. PLAYBOOK.md, SKILLS.md, BEST_PRACTICES.md, CHECKS.md and HANDOFF.md guide the work and its checked deliverables.

Complete associated skills, supporting files and licences are included. Choose only the methods needed for the actual task. Keep context, working files and accepted feedback in your AI project.

Use this specialist through MCP or the API

Call prepare_specialist with role_id new-screen-design-reviewer only. No task is required to load it. Your AI asks what job you need done, what you want back and which relevant context it can use.

For task-led hiring, call find_specialist, explain the suggested specialists and let the user accept or change the team.

Complete ZIP: Download base specialist. API: GET /api/v1/specialists/new-screen-design-reviewer/pack. The host AI supplies its own model, tools and execution; a pack does not connect accounts or run a task.

Inputs and helpful context

The specialist starts from the task brief. Only active methods require their inputs.

For the primary method, when used

• The screen, as a Figma link or mockup, a live page address, or the screen's code
• What the person is there to do on it, in one line
• Your design rules, if you have them (it writes them from your code if not)
• Where it is used, such as phone or desktop (optional)

Helpful context (optional)

• Screenshots of the screen at phone and desktop width
• Your colour and font choices, if you have no rules file

Tools and access

• Claude Code: It can read your code, write your design rules and keep the review folder.
• Figma: Share a link or a frame so it can review a mockup before anything is built.
• Any good chat AI that reads images: It needs to look at screenshots, so use an AI that accepts attachments.
• A screen recorder: Record yourself doing the task, to catch what a static screenshot hides.
• Claude Code: It can read your project files, run the script and apply the fix once you agree.
• Any AI that can run Node: The script needs Node 18 or newer. A plain chat AI can do the hand-worked version.

Functions and deliverables

• Screen usability reviewer: Review a screen against its task and design rules. Get likely usability problems, ranked fixes and questions for real user tests.
  • A call of ready, fix first or rethink, with the working
  • A ranked fix list, each with the harm and the size of the fix
  • Values on the screen that are not in your design rules
  • Problems that keep coming back, with a rule that would stop them
• Project design rules writer: Share your project. Document the colours, type, spacing and components it uses in a DESIGN.md file, with conflicts left as open questions.
  • DESIGN.md file at the project root
  • Colour, type and spacing lists
  • Component rules
  • Things to avoid
  Source: sickn33.
• Website usability reviewer: Check a page or form against ten usability rules. Get a usability review with a score out of 100, each break found and fixes ranked by harm.
  • A score out of 100 with the deductions shown
  • Every break, with the rule it breaks and the screen or step
  • Fixes ranked by cost to the user
  • A list of what still needs a real test
• Design feedback reviewer: Share a design, audience and goal. Get specific usability notes, reading-order feedback, strengths and fixes ranked by importance.
  • First-impression read
  • Usability issues
  • Hierarchy and consistency notes
  • Fixes ranked by importance
  Source: Anthropic.
• Page design standards checker: Check your page design for low contrast, uneven spacing, weak hierarchy and mobile problems. Get a fix for each one, plus a pre-ship checklist.
  • Findings on contrast, spacing, hierarchy and mobile
  • A fix for each finding
  • A starter set of design tokens if you had none
  • Pre-ship checklist
  Source: RampStack.
• UI design consistency reviewer: Share your interface code. Get a StyleSeed design score, line-linked issues and a ranked fix list. It reviews without changing files.
  • A score from 0 to 100
  • Points lost per category, with line references
  • A ranked fix list
  • A short list of what already works
  Source: sickn33.
• Colour contrast checker: Share your colour tokens. Get light and dark theme pairs checked for readability, with the closest passing colours.
  • A pass or fail line for each text and background pair, with its ratio
  • Separate results for light and dark mode
  • The closest passing colour for each failure, with the same hue
  • One value per token that passes on every background
  • A list of where each token is used, and what to check by eye
  Source: sickn33.
• Visual hierarchy fixer: Share a web page or screen. Get fixes for spacing, color, type and depth so it looks professional.
  • A score out of ten with failed checks
  • Specific fixes for spacing, type, colour and depth
  • A set of design tokens
  • Updated styles or code
  Source: Wondel.ai.
• Brand profile builder: Share your website. Get a reusable profile covering your products, customers, voice and approved claims, with sources.
  • A folder of eight plain files, from a start file for your AI to a claims list and a change log
  • A tag on every fact, and every claim marked approved, pending or banned
  • A two-sentence diagnosis of your biggest gap, and a list of what's missing and who can answer it
  • A short slice for your next step, if you name one
• Don Norman: Find why a product, form or service is hard to use through Don Norman’s public approach. Check cues, controls, feedback and recovery from mistakes.
  • Your problem worked on the way Don Norman would: their questions, their method, their push-back
  • The answer or the work, in Don Norman's voice, using their ideas by name
  • Anything that goes beyond their public record, marked
  • One suggested next step
• Jakob Nielsen: Review a website, app or form through Jakob Nielsen’s recorded approach. Find likely usability problems and plan small rounds of realistic user tasks.
  • Your problem worked on the way Jakob Nielsen would: their questions, their method, their push-back
  • The answer or the work, in Jakob Nielsen's voice, using their ideas by name
  • Anything that goes beyond their public record, marked
  • One suggested next step

Tasks you can use it for

• You ship new screens often and want each one reviewed the same way before it goes out.
• Pages across your product look slightly different and you want one set of rules to hold them to.
• You work alone or in a small team with no design reviewer.

Limits to check before starting

• You need a final accessibility audit or a legal sign-off: ask an accessibility specialist to test the screen with real tools.
• You want to know if real people can use the screen: run a short test with five users, since this review only finds likely problems.
• You want the screen designed or redrawn for you: ask a designer, or use your AI for a first sketch. This agent only reviews.

Best way to use this role

Give it one clear outcome, the actual files and a definition of done. Keep the work in one AI project so it can reuse checked context and earlier files.

• Start a chat with the agent. In Claude Code, add it as a skill or save it in .claude/agents, then ask it to review a screen.
• Give it the screen and the one-line task. Add your code the first time, so it can write your design rules.
• Read the call and the fix list. Make the fixes yourself, or ask it to suggest the exact change for each.
• Ask for a recheck after you fix. It reruns only the checks that failed, up to two times.
• Review the next screen. It remembers the scores and the problems that repeat.

Read it as data

Read the complete role setup as JSON. Connect your AI to the AI Blocks MCP library and read aiblocks://roles/new-screen-design-reviewer for its role instructions and pinned sources.

This is a prepared AI role. No task has run. Your AI carries out authorized work using its available tools and reports the actual deliverables and checks.