📖 Step 3: Design - UI Components & Patterns#61 / 291
Affordance
Affordance
📖One-line summary
When the design itself hints at how to use it.
✨Example
Affordances visually signal that an element is "actionable"
Link text
⚡Vibe coding prompt examples
>_
Give clear affordance that elements that look like buttons are clickable. Apply depth, cursor changes, and hover effects.
>_
Add affordance to draggable elements. Add a grip handle icon, change cursor to grab, and change background color on hover.
>_
Improve affordance on input fields. Use border, placeholder, and focus emphasis so users know they can type.
Try these prompts in your AI coding assistant!