Design for AICentered avatar
Centered avatar: a CSS card. Copy the rules, or the prompt that rebuilds it.
MK
Mara Klein
Product designer, Berlin
CSS
.card-010 {
width: 240px;
padding: 28px 20px 24px;
text-align: center;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 18px;
font-family: system-ui,sans-serif;
color: #111827
}
.card-010__avatar {
width: 72px;
height: 72px;
margin: 0 auto 14px;
display: grid;
place-items: center;
border-radius: 50%;
background: linear-gradient(135deg,#fbcfe8,#a855f7);
color: #fff;
font-weight: 700;
font-size: 22px;
box-shadow: 0 0 0 4px #fff,0 0 0 6px #e9d5ff
}
.card-010 h3 {
margin: 0;
font-size: 17px
}
.card-010 p {
margin: 4px 0 16px;
font-size: 13px;
color: #6b7280
}
.card-010 button {
padding: 8px 22px;
border: 1px solid #111827;
border-radius: 999px;
background: #111827;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s,color .15s
}
.card-010 button:hover {
background: #fff;
color: #111827
}
.card-010 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-010">
<div class="card-010__avatar">MK</div>
<h3>Mara Klein</h3>
<p>Product designer, Berlin</p>
<button>Follow</button>
</article>Prompt
Build a 240px centered profile card: white, 1px #e5e7eb border, 18px radius, 28px top padding. A 72px circular avatar with initials "MK" in 22px bold white on a 135deg gradient #fbcfe8 to #a855f7, ringed by a 4px white gap and a 2px #e9d5ff ring via box-shadow. Below: 17px name #111827, 13px role #6b7280, and a black pill "Follow" button (#111827) that inverts to white with black text on hover.