Design for AICantos squircle
Cantos squircle: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Superellipse corners
corner-shape: squircle where supported, plain rounded corners elsewhere.
CSS
.card-073 {
width: 280px;
padding: 24px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 28px;
font-family: system-ui,sans-serif;
color: #111827;
box-shadow: 0 8px 24px -8px rgba(0,0,0,.12);
transition: transform .2s
}
.card-073:hover {
transform: scale(1.02)
}
@supports (corner-shape:squircle) {
.card-073 {
corner-shape: squircle;
border-radius: 40px
}
}
.card-073 h3 {
margin: 0 0 6px;
font-size: 18px
}
.card-073 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #6b7280
}
HTML
<article class="card-073">
<h3>Superellipse corners</h3>
<p>corner-shape: squircle where supported, plain rounded corners elsewhere.</p>
</article>Prompt
Construa um card branco de 280px com borda de 1px #e5e7eb, padding de 24px, sombra suave 0 8px 24px -8px rgba(0,0,0,.12) e cantos em superelipse no estilo iOS: border-radius padrão de 28px como fallback, e dentro de @supports (corner-shape: squircle) defina corner-shape: squircle com border-radius de 40px. Título 18px, texto 14px #6b7280, e uma escala suave de 1.02 no hover.