Training your eye
Bad UI vs Good UI
When vibe coding, ask the AI to improve hierarchy, spacing, states, and responsiveness. These visual pairs show what to look for.
Weak hierarchy
Everything is same size
Save
Delete
Cancel
Hard to scan. Actions compete with each other.
Clear hierarchy
Project Settings
Manage name, status, and permissions.
Main action is obvious. Supporting text is quieter.
No states
Users do not know whether the app is loading, empty, or broken.
Helpful empty state
No invoices yet
Create your first invoice to start tracking payments.
The next useful action is clear.
Reusable prompt
Prompt From A Visual Pattern
I want to build a screen using these UI patterns: - [component name] - [component name] - [component name] Goal: [what the user should accomplish] Behavior: [what happens when users click, type, submit, open, close, filter, or save] States: Include loading, empty, error, success, hover, focus-visible, disabled, and mobile states where relevant. Please use semantic HTML, accessible labels, responsive layout, and clear visual hierarchy.