AI UX PlaygroundNewsletterJoin 2K+ AI designers and PMs on Substack. New teardowns, patterns, and prompts as they drop.

Visual design

Visual states pass on a Make file

Add hover, focus, pressed, disabled, and selected states, and check contrast.

Prompt

Add the missing visual states on this Figma Make screen. Do not change the layout.

For each interactive element, show:
- Hover
- Focus, including a visible focus ring
- Pressed
- Disabled
- Selected, if the control can be selected

Check contrast for text, icons, and the focus ring on each state.
Use the attached library styles if they exist. Do not invent a new color.
If a state is already correct, say so and skip it.

How to use

  1. 01

    Run this after the critique, not instead of it.

  2. 02

    Name the controls if Make is restyling the whole screen.

  3. 03

    Use point-and-edit for a single color that fails contrast.