Critiquito: Design Critique
Created by Manuel Muñoz Solera
Review product screens and prioritize concrete fixes for clarity, usability, and accessibility.
Our developer take
Reviewing a UI before shipping
Show it the core screen of your application with a short description of the user's task. Ask for the three fixes most likely to help that task, then check the revised interface with actual users and your normal accessibility tooling.
A practical first workflow
How to use Critiquito: Design Critique
Get a ranked critique of one product screen, then review a revision.
An AI IDE List walkthrough based on the linked template. These are suggested tasks and review criteria, not results from a hands-on test.
First, add this Bot
Open the official Critiquito: Design Critique template, choose Import Bot, and finish adding it in the Grok Bot app. Open its conversation, then follow the workflow below. If you have not set up the app, follow our installation and connection guide.
What to prepare
- A screenshot, accessible Figma frame, or live page URL.
- The target user, primary action, and intended viewport.
- Known constraints, such as an existing design system or fixed content.
Submit one screen and its goal
Share the screen and explain what the user should do next. Specify mobile or desktop and any known usability problem.
Request a ranked critique
Ask for the highest-impact hierarchy, typography, color, copy, and accessibility observations, each tied to something visible.
Turn findings into edits
Pick two or three findings and request concrete layout or copy changes you can apply in your design or code.
Compare the revision
Upload the revised screen alongside the original. Ask which selected issues improved and whether the changes introduced new problems.
First-run example
Replace every [BRACKETED_VALUE] with your details, attach the required files, then send this in the Bot's conversation.
Critique the attached [SCREEN_FILENAME] for [TARGET_USER] on [VIEWPORT]. The primary action is [ACTION]. Constraints: [DESIGN_SYSTEM_OR_OTHER_LIMITS]. Rank the five most useful fixes. For each, identify the visible problem, explain its effect on the primary task, and propose a concrete change to layout or copy. Separate observations from assumptions. Finish with the two edits I should try first; I will supply a revision for comparison.
What you should get
Use this checklist to review the first result and request anything missing.
- A ranked critique tied to visible parts of the screen.
- Specific layout or copy edits for the most important issues.
- A useful comparison once you provide a revised version.
For the next run
Keep the same screen goal when comparing versions. Opt into the weekly open-fix check only if you maintain a fix list.
If the first run gets stuck
If the feedback is vague, specify the user and primary action. Supply missing interaction states separately; a single screenshot cannot show an entire flow.
What the template includes
Official sourceSummarized from the public listing. The labels below describe capabilities; exact installed skill and connector names are not always published.
Integrations & inputs
- Figma links
- Screenshots
- Live URLs
Skills & playbooks
Screen critique · Flow review · UI copy review · Accessibility pass
Routines
Optional weekly check of open design fixes; disabled by default.
What to consider
Visual review cannot prove keyboard behavior or screen-reader support. Validate interactive behavior separately.