Design for AIZentrierter Avatar
Zentrierter Avatar: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Baue eine 240px zentrierte Profil-Card: weiß, 1px #e5e7eb Rahmen, 18px Radius, 28px Padding oben. Ein 72px runder Avatar mit den Initialen "MK" in 22px bold weiß auf einem 135deg Gradient #fbcfe8 zu #a855f7, umringt von einem 4px weißen Abstand und einem 2px #e9d5ff Ring per box-shadow. Darunter: 17px Name #111827, 13px Rolle #6b7280 und ein schwarzer Pillen-Button "Follow" (#111827), der beim Hover zu Weiß mit schwarzem Text invertiert.