Design for AI

Estilo Bento grid: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de bento grid. Também chamado de layout bento box, UI bento, grade de keynote da Apple, tiles de grade de recursos. 2022 em diante (slides de eventos da Apple, depois toda landing page SaaS em 2023).

Traços

  • uma grade retangular de tiles em tamanhos mistos (1x1, 2x1, 2x2) com gutters iguais
  • cada tile é um recurso autocontido: um título, um visual, uma estatística
  • raio uniforme (16-24px) e gap uniforme (12-16px) seguram a bagunça
  • os tiles alternam entre escuro, claro e um único preenchimento de acento
  • o conteúdo dentro dos tiles é grande e escasso: um número, um ícone, um recorte de screenshot
  • a grade é o hero; raramente há uma imagem hero separada
  • o hover eleva ou escala levemente um tile; nada mais se move

Paleta

#0b0b0f página (variante escura) ou #f5f5f7 (clara), #1c1c22 tile, #ffffff tile claro, #3b82f6 tile de acento, #a1a1aa texto atenuado, #fafafa texto

Tipografia

Geist ou Manrope; títulos dos tiles 600 a 20-24px, estatísticas grandes 700 a 48-72px com -0.03em, legendas 400 a 14px

Faça

  • desenhe a grade com 4 ou 6 colunas no desktop e colapse para 1-2 no mobile; mantenha a ordem dos tiles significativa
  • dê a cada tile exatamente uma mensagem; se precisar de duas, divida
  • use o mesmo raio, gap e padding em todo tile, sem exceção

Evite

  • não coloque tiles só de texto em todo lugar; pelo menos um terço precisa de um visual
  • não varie gutters nem raios entre tiles
  • não empilhe duas grades bento em sequência; uma por seção da página

Conhecido por: Páginas de produto da Apple, página de recursos do Linear, Vercel, navegador Arc

Semente CSS
:root {
  --bg: #0b0b0f;
   --fg: #fafafa;
   --muted: #a1a1aa;
   --tile: #1c1c22;
   --accent: #3b82f6;
   --radius: 20px;
   --gap: 14px;
   --font: 'Geist',sans-serif
}
Prompt

Construa a home como uma grade bento. Fundo da página #0b0b0f, texto #fafafa, atenuado #a1a1aa. Grade: CSS grid com 6 colunas e gap de 14px a 1200px, tiles ocupando células 2x1, 2x2, 3x1 e 1x1, colapsando para 2 colunas a 768px e 1 coluna a 480px. Cada tile: background #1c1c22, borda 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Faça um tile em #3b82f6 com texto branco e um tile branco puro com texto #0b0b0f para contraste. Conteúdo do tile: um título 20px 600, uma linha de legenda 14px e ou uma estatística 64px 700 (-0.03em) ou um screenshot/ilustração recortado ancorado no canto inferior direito e cortado pelo raio do tile. Fonte Geist em tudo. Hover: translateY(-2px) e a borda clareia para rgba(255,255,255,0.14), 180ms ease-out. Nenhuma outra seção pode reusar a grade; abaixo dela use seções de texto simples.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa a home como uma grade bento. Fundo da página #0b0b0f, texto #fafafa, atenuado #a1a1aa. Grade: CSS grid com 6 colunas e gap de 14px a 1200px, tiles ocupando células 2x1, 2x2, 3x1 e 1x1, colapsando para 2 colunas a 768px e 1 coluna a 480px. Cada tile: background #1c1c22, borda 1px rgba(255,255,255,0.06), border-radius 20px, padding 28px. Faça um tile em #3b82f6 com texto branco e um tile branco puro com texto #0b0b0f para contraste. Conteúdo do tile: um título 20px 600, uma linha de legenda 14px e ou uma estatística 64px 700 (-0.03em) ou um screenshot/ilustração recortado ancorado no canto inferior direito e cortado pelo raio do tile. Fonte Geist em tudo. Hover: translateY(-2px) e a borda clareia para rgba(255,255,255,0.14), 180ms ease-out. Nenhuma outra seção pode reusar a grade; abaixo dela use seções de texto simples.

## Tokens
:root { --bg:#0b0b0f; --fg:#fafafa; --muted:#a1a1aa; --tile:#1c1c22; --accent:#3b82f6; --radius:20px; --gap:14px; --font:'Geist',sans-serif }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.