Design for AIBloco bento pontilhado
Bloco bento pontilhado: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Build
Rebuilds in under a second
Save a file and the page is already there. No spinner to wait for.
CSS
.card-043 {
width: 300px;
padding: 18px;
background: #fafafa;
border: 1px solid #e4e4e7;
border-radius: 20px;
font-family: system-ui,sans-serif;
color: #18181b
}
.card-043__viz {
position: relative;
height: 140px;
margin-bottom: 16px;
border-radius: 12px;
background: radial-gradient(#d4d4d8 1.2px,transparent 1.3px) 0 0/14px 14px,#fff;
border: 1px solid #e4e4e7;
overflow: hidden
}
.card-043__viz span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 8px 16px;
border-radius: 999px;
background: #18181b;
color: #fff;
font-size: 13px;
font-weight: 600;
box-shadow: 0 0 0 8px rgba(24,24,27,.08),0 0 0 16px rgba(24,24,27,.04);
transition: box-shadow .3s
}
.card-043:hover .card-043__viz span {
box-shadow: 0 0 0 12px rgba(24,24,27,.1),0 0 0 24px rgba(24,24,27,.05)
}
.card-043 h3 {
margin: 0 0 6px;
font-size: 17px
}
.card-043 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #71717a
}
HTML
<article class="card-043">
<div class="card-043__viz"><span>Build</span></div>
<h3>Rebuilds in under a second</h3>
<p>Save a file and the page is already there. No spinner to wait for.</p>
</article>Prompt
Crie um bloco de recurso estilo bento de 300px: fundo #fafafa, borda de 1px #e4e4e7, raio de 20px, padding de 18px. Topo: um painel visual de 140px com padrão de grade de pontos (pontos radial-gradient #d4d4d8 com espaçamento de 14px sobre branco, raio de 12px) e uma pílula "Build" com dois anéis translúcidos concêntricos via box-shadow (8px e 16px, rgba(24,24,27,.08/.04)) que se alargam no hover. Abaixo: título 17px #18181b e texto 14px #71717a.