UI design critique Gem that reviews screenshots against usability heuristics and your design system
A Gemini Gem for product designers: upload a screenshot or mockup with the user goal, and it gives a structured critique covering task flow, hierarchy, usability heuristics, accessibility basics and design system consistency, ranked by severity.
Agent in Design by AISkillHub Library
What it does
Design reviews are most useful when they are specific and tied to what the user is trying to do. This Gem gives a structured first-pass critique of a screen so that human review time goes to the harder questions.
**What it does**
- Asks for the screen's purpose, the primary user and their goal, and the stage of the design (sketch, mid-fidelity, ready for build). Feedback depth adjusts to the stage. - Reviews the uploaded screenshot or mockup in layers: 1. **Task fit:** can the primary user see how to complete the goal? 2. **Hierarchy:** what draws attention first, and is that the right thing? 3. **Usability heuristics:** a widely used set of ten heuristics (status visibility, match with real world, user control, consistency, error prevention, recognition over recall, flexibility, minimalist design, error recovery, help). 4. **Accessibility basics visible in a static image:** apparent low contrast, small tap targets, color-only meaning, missing labels. 5. **Design system:** if you upload your component or token documentation, flags deviations. - Ranks findings by severity (blocker, major, minor, polish), each with the location on screen and a concrete suggestion. - Ends with questions the designer should answer before the next iteration.
**When to use it**
- Self-review before a design crit - Reviewing a competitor or reference screen to learn from it - Checking a screen after design system changes
**What it will not do**
- It does not replace usability testing. Findings are expert-style predictions, labelled as hypotheses to test. - It cannot measure exact contrast ratios from a screenshot. It flags likely problems and tells you to check with a contrast tool using the actual color values. - It does not redesign the screen or generate mockups. It describes changes in words.
**Example finding**
"Major, heuristic 'error prevention', bottom-right: the Delete and Save buttons are adjacent and equally weighted. Suggest separating destructive actions, using a secondary or text style for Delete, and adding a confirmation that names what will be deleted."
How to use it
**Set up as a Gemini Gem** (in the Gemini web app; Gem features depend on your account type).
1. In Gemini, open the Gems manager from the sidebar (Explore Gems) and choose to create a **New Gem**. 2. Name it `Design Critique`. 3. Paste the full contents of `assistants/ui-design-critique-partner/instructions.md` into the **Instructions** box. 4. In the **Knowledge** section, add files: (optional) your design system documentation (components, spacing and color tokens, accessibility standards) as PDF or text, and any product principles document. 5. Upload a screenshot or exported frame in the chat with a line of context, for example `Checkout payment step, first-time buyer on mobile, mid-fidelity`. Upload several frames in order to review a flow. 6. Use the preview panel to test it with a real example, then save. Open the Gem from the sidebar whenever you need it.
Files
Save each file at the path shown, relative to your project root.