{ "schema": "aiblocks-page/1", "id": "new-screen-design-reviewer", "type": "agent", "name": "Screen usability reviewer", "summary": "Review a screen against its task and design rules. Get likely usability problems, ranked fixes and questions for real user tests.", "headline": "Screen usability reviewer", "subhead": "Share a screen as a mockup, page or code, plus the task people must complete. It selects suitable design checks, compares your rules and tracks recurring issues. You get a ready, fix-first or rethink recommendation with evidence. The review does not replace user testing or approve a release.", "job": { "id": "design-work", "name": "Design things people love" }, "level": "intermediate", "thinking": "medium", "tested": true, "updated": "2026-10-28", "first_published": "2026-10-21", "inputs": [ { "type": "question", "required": true, "label": "Question", "what": "the problem, decision or piece of work you want help with, and what a good outcome looks like" }, { "type": "design_file", "required": false, "label": "Design file", "what": "a design in a design tool, such as a Figma file, with its parts and styles" }, { "type": "web_page", "required": false, "label": "Web page", "what": "a built or live web page, as a URL or saved HTML" }, { "type": "codebase", "required": false, "label": "Codebase", "what": "a project's code, in a folder or repo the AI can open" }, { "type": "design_direction", "required": false, "label": "Design direction", "what": "a page's visual direction: type, colour, layout rules and what to avoid" } ], "outputs": [ { "type": "audit_report", "required": true, "label": "Audit report", "what": "findings with evidence, severity, missing inputs and next actions" }, { "type": "feedback_notes", "required": true, "label": "Feedback notes", "what": "a person's notes on an output: what to keep, change or drop" } ], "you_give": [ "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)" ], "you_get": [ "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" ], "use_when": [ "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." ], "skip_when": [ "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." ], "output_sample": { "input": [ "The screen, as a Figma link, a live page address or the screen's code", "What the person is there to do on it, in one line", "Your design rules (optional)", "Where it is used, such as phone or desktop (optional)" ], "prerequisites": [ "An AI that can read your code or files, such as Claude Code, to write your design rules and keep the review folder", "The skills it calls, such as the Usability heuristic reviewer, installed or readable from the library" ], "output": [ { "name": "The call", "contains": "Ready, fix first or rethink, with the usability score, the other scores and the working." }, { "name": "The task", "contains": "One line on what the person is there to do and what finished looks like." }, { "name": "Fix list", "contains": "Up to 12 fixes, highest harm first, each with screen part, harm, size and the step that found it." }, { "name": "Off the rules", "contains": "Each value on the screen that is not in your design rules, with the nearest value that is." }, { "name": "Keeps coming back", "contains": "Problems seen on 3 or more screens, with a rule that would stop them." }, { "name": "Needs a real test", "contains": "Each doubt a review cannot settle, and the test that would settle it." }, { "name": "Files and MISSING", "contains": "Each step's saved file, then every MISSING line in one list." } ] }, "output_shape": "THE CALL\n | usability / 100 | \n\nTHE TASK\n \n\nFIX LIST (highest harm first)\n 1. | where: | harm: | size: | from: \n\nOFF THE RULES\n | nearest in rules: \n\nKEEPS COMING BACK\n | seen on screens | suggested rule: \n\nNEEDS A REAL TEST\n | test: \n\nFILES AND MISSING\n | MISSING: ", "how_to_use": [ "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." ], "checks": [ "Every finding ties back to the task and names the part of the screen.", "The call follows the stated limits, and the working is shown.", "A screen with a high-cost break is not called ready, whatever its score.", "Skipped checks are named with the reason.", "Nothing in your design, your code or your tools was changed without your clear yes." ], "steps": [ { "position": 1, "id": "design-rules-file-writer", "name": "Project design rules writer", "summary": "Share your project. Document the colours, type, spacing and components it uses in a DESIGN.md file, with conflicts left as open questions.", "url": "https://useaiblocks.com/skills/design-rules-file-writer" }, { "position": 2, "id": "usability-heuristic-reviewer", "name": "Website usability reviewer", "summary": "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.", "url": "https://useaiblocks.com/skills/usability-heuristic-reviewer" }, { "position": 3, "id": "design-feedback-giver", "name": "Design feedback reviewer", "summary": "Share a design, audience and goal. Get specific usability notes, reading-order feedback, strengths and fixes ranked by importance.", "url": "https://useaiblocks.com/skills/design-feedback-giver" }, { "position": 4, "id": "page-design-standards-checker", "name": "Page design standards checker", "summary": "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.", "url": "https://useaiblocks.com/skills/page-design-standards-checker" }, { "position": 5, "id": "ai-look-design-reviewer", "name": "UI design consistency reviewer", "summary": "Share your interface code. Get a StyleSeed design score, line-linked issues and a ranked fix list. It reviews without changing files.", "url": "https://useaiblocks.com/skills/ai-look-design-reviewer" }, { "position": 6, "id": "colour-contrast-checker", "name": "Colour contrast checker", "summary": "Share your colour tokens. Get light and dark theme pairs checked for readability, with the closest passing colours.", "url": "https://useaiblocks.com/skills/colour-contrast-checker" }, { "position": 7, "id": "visual-hierarchy-fixer", "name": "Visual hierarchy fixer", "summary": "Share a web page or screen. Get fixes for spacing, color, type and depth so it looks professional.", "url": "https://useaiblocks.com/skills/visual-hierarchy-fixer" } ], "next": [ { "name": "Small usability test planner", "url": "https://useaiblocks.com/skills/small-usability-test-planner", "why": "Design it" }, { "name": "Feature cutting planner", "url": "https://useaiblocks.com/skills/feature-cutting-planner", "why": "Design it" } ], "source": null, "credits": [], "files": [], "links": { "page": "https://useaiblocks.com/agents/new-screen-design-reviewer", "markdown": "https://useaiblocks.com/agents/new-screen-design-reviewer.md", "json": "https://useaiblocks.com/agents/new-screen-design-reviewer.json", "instructions": "https://useaiblocks.com/skills/new-screen-design-reviewer/SKILL.md", "api_item": "https://useaiblocks.com/api/v1/items/new-screen-design-reviewer", "api_document": "https://useaiblocks.com/api/v1/documents/agent/new-screen-design-reviewer", "mcp": "https://useaiblocks.com/mcp" } }