📖 Step 4: Design - Research & Process#119 / 291

Avatar

Avatar

📖One-line summary

A circular image or initials that represents a user profile.

Example

Avatars of different shapes

DK
👩
?
A
B
C
D
+3

Vibe coding prompt examples

>_

Build a user profile avatar component. Show name initials when there is no image, and display a status badge (online/offline).

>_

Build an avatar group component. Overlap multiple avatars and show a '+3' style count when there are more than 5.

Try these prompts in your AI coding assistant!