Apple Bento Grid
Problema
Criar gráficos de apresentação visualmente polidos normalmente exige ferramentas de design como Figma ou Keynote. Esta skill gera layouts bento grid de qualidade Apple como arquivos HTML autônomos que são capturados em imagens perfeitas — sem necessidade de ferramenta de design.
Visão Geral
Gere arquivos HTML autônomos que renderizam grades de cartões bento inspirados na Apple. Cada saída é um único arquivo HTML com CSS inline — sem dependências, exceto Google Fonts. Os cartões preenchem uma grade CSS compacta com espaços mínimos, prontos para exportação de captura de tela com Playwright em resolução 2x. Ambos os temas claro e escuro estão disponíveis.
Fluxo de Trabalho
- Leia o sistema de design seletivamente: Consulte
design-system.mdconforme necessário:- Sempre leia: Seção 2 (Grade Sem Espaços) + Seção 3 (Templates de Layout) — a base da grade
- Leia por tipo de cartão: Seções 5.1–5.7 conforme necessário para os cartões que você está usando
- Leia para o tema: Seção 1 (tokens claro) ou Seção 9 (tokens escuro)
- Leia uma vez para a primeira geração: Seção 8 (Esqueleto HTML) como ponto de partida estrutural
- Reúna o conteúdo do usuário — quais estatísticas, marcos, categorias e citações exibir
- Escolha um tema — sugira claro, escuro ou ambos com base no contexto (veja Seleção de Tema abaixo)
- Escolha um layout — escolha entre os 3 templates de layout com base na quantidade de cartões e orientação
- Componha os cartões — selecione os tipos de cartão e preencha com o conteúdo do usuário; priorize densidade (sem cartões com sensação de vazio)
- Pergunte sobre logotipos/imagens — se o usuário tiver um logotipo ou imagens, incorpore-os (veja Logotipos e Imagens abaixo)
- Gere o HTML — produza um único arquivo HTML autônomo
- Revisão visual — abra o HTML em um navegador e capture a tela para verificar problemas (veja Revisão Visual abaixo)
- Ofereça uma versão vertical — após gerar uma grade paisagem, pergunte: "Quer uma versão vertical (retrato) para redes sociais?" e gere uma adaptação do Template C se sim
- Captura de tela (opcional) — use o script Playwright para capturar PNGs em 2x
Revisão Visual
Após gerar o HTML, sempre visualize a saída para detectar problemas visuais antes de apresentar ao usuário. Use Playwright, ferramentas MCP do navegador ou open para renderizar o arquivo e verifique:
Linhas órfãs — Uma única tag pill ou palavra quebrando sozinha em uma nova linha. Corrija removendo uma pill para que as restantes preencham uniformemente, ou adicione pills suficientes para preencher duas linhas completas.
Espaço vazio — Cartões que parecem esparsos com muito espaço em branco. Corrija adicionando um subtítulo, badge ou texto de descrição extra para preencher o cartão.
Transbordamento de texto — Números ou rótulos muito longos para a largura do cartão. Corrija reduzindo o tamanho da fonte ou abreviando (ex.: "$2,4M" em vez de "$2.400.000").
Grade quebrada — Lacunas de linha visíveis ou cartões desalinhados. Verifique: sem align-items: start, gap exatamente 6px, todas as células da grade ocupadas.
Fallback de fonte — Texto renderizado em fontes do sistema em vez de Sora/DM Sans. Certifique-se de que o link do Google Fonts está presente e a página tem acesso à rede.
Corte na captura de tela — Bordas direita ou inferior dos cartões cortadas no PNG exportado. Corrija garantindo que a largura da viewport corresponda exatamente à largura CSS da grade e que o clipe use box.x/box.y de boundingBox(), não x: 0, y: 0.
Se algum problema for encontrado, corrija o HTML e verifique novamente. Não apresente ao usuário até que a saída passe na revisão visual.
Seleção de Tema
Sugira um tema com base no contexto. Quando não tiver certeza, gere ambos.
| Contexto | Tema Sugerido |
|---|---|
| Deck de slides / apresentação | Escuro — maior impacto visual em projetores |
| Mídia social / portfólio | Escuro — destaca-se em feeds |
| Relatório / documento incorporado | Claro — combina com fundos de página brancos |
| Impressão / PDF | Claro — economiza tinta, melhor legibilidade |
| Usuário diz "estilo Apple" | Claro — visual característico da Apple |
| Usuário diz "moderno" ou "elegante" | Escuro — sensação contemporânea |
| Nenhuma preferência declarada | Ambos — gere dois arquivos, deixe o usuário escolher |
Consulte o design-system.md Seção 9 para tokens completos do tema escuro, ou Seção 1 para tokens do tema claro.
Formato de Saída
Sempre produza um único arquivo HTML autônomo com:
<!DOCTYPE html>+<html lang="pt">- Tags
<link>do Google Fonts no<head> - Todo CSS em um único bloco
<style> - Todo conteúdo no
<body>— sem necessidade de JavaScript
Tipos de Cartão Disponíveis
| Cartão | Use Para | Característica Principal |
|---|---|---|
| Hero | Taglines, manchetes | Borda superior gradiente, ocupa 2 linhas |
| Stat | Números + rótulos | Destaque codificado por cor por categoria |
| Category | Itens agrupados (fases, equipes, trimestres) | Rótulo colorido + subtítulo + tags pill |
| Bar Chart | Crescimento / comparação ao longo do tempo | Barras gradientes, badge de cabeçalho |
| Badge | Atribuição de ferramenta, chamada em destaque | Pill de ícone + número de estatística |
| Quote | Declaração de missão, depoimento | Fundo escuro, texto branco, <em> verde |
| Highlight | Número de destaque (3x, 10x, 100%) | Fundo totalmente gradiente |
Templates de Layout
| Template | Colunas | Largura | Proporção | Melhor Para |
|---|---|---|---|---|
| A: Horizontal | 4 col | 1200px | 52/25 | 12-16 cartões, slides |
| B: Horizontal | 3 col | 1100px | 52/22 | 8-10 cartões, focado |
| C: Vertical | 2 col | 600px | nenhuma (conteúdo) | 8-14 cartões, social |
Crítico: Regras da Grade Sem Espaços
Estas 5 regras são obrigatórias para a aparência Apple. Veja design-system.md Seção 2 para detalhes.
- NUNCA defina
align-items: start— o padrãostretchpreenche as células - Use
aspect-ratioem layouts horizontais para travar a forma do contêiner - Linhas:
1frpara horizontal,autopara vertical - Gap:
6px(não 8px) - Toda célula da grade deve estar ocupada — sem células vazias
Exportação de Captura de Tela
Use o script Playwright em scripts/screenshot.mjs para capturar PNGs perfeitos.
cd scripts
npm install
npx playwright install chromium
node screenshot.mjs
Edite o array pages em screenshot.mjs para apontar para seus arquivos HTML. Cada entrada precisa: file (caminho HTML), output (caminho PNG), viewportWidth (corresponder à largura da grade).
Crítico: A viewport deve corresponder à largura da grade. Se a viewport for mais larga que a grade, a grade será centralizada e o clipe pode cortar a borda direita. Sempre defina viewportWidth para a largura CSS exata da grade (1200 para 4 col, 1100 para 3 col, 600 para 2 col).
Crítico: O clipe deve usar a posição do elemento. Ao recortar para o elemento da grade, use box.x e box.y de boundingBox(), não x: 0, y: 0. Se a grade estiver centralizada em uma viewport mais larga, x: 0 iniciará o clipe antes da grade e cortará o lado direito.
Após a captura de tela, sempre visualize a imagem de saída para verificar se nenhuma borda foi cortada. Verifique se os cartões mais à direita e mais abaixo estão totalmente visíveis com seu border-radius intacto.
Logotipos e Imagens
Os usuários podem adicionar seus próprios logotipos ou imagens aos cartões do bento grid. Pergunte ao usuário se eles têm algum logotipo ou imagem que gostariam de incluir.
Opções de posicionamento:
| Localização | Como | Melhor Para |
|---|---|---|
| Canto do cartão Hero | <img> com position: absolute; top: 20px; right: 20px; width: 40px; | Logotipo da empresa |
| Ícone do cartão Badge | Substitua o SVG em .badge-pill por uma tag <img> (width: 16px; height: 16px; border-radius: 4px;) | Logotipo de ferramenta/framework |
| Fundo completo do cartão | background-image: url(...) com gradiente sobreposto para legibilidade do texto | Capturas de tela de recursos |
| Cartão de imagem autônomo | <img> preenchendo o cartão com object-fit: cover; border-radius: 18px; | Fotos de produtos |
Diretrizes:
- Use
<img src="caminho/para/arquivo.png">com um caminho de arquivo local — o HTML é para exportação de captura de tela, não para hospedagem - Mantenha logotipos pequenos (24–48px) para que não dominem o cartão
- Para tema escuro, certifique-se de que os logotipos funcionem em fundos escuros (use versões brancas/claras)
- Sempre adicione texto
altpara acessibilidade
Adaptação de Conteúdo
| Dados do Usuário | Template Recomendado | Mix de Cartões |
|---|---|---|
| 3–5 estatísticas, sem categorias | C (2 col vertical) | 1 Hero + 3–5 Stats + 1 Quote |
| 6–8 estatísticas, 1–2 categorias | B (3 col horizontal) | 1 Hero + 4–6 Stats + 1–2 Categories + 1 Chart |
| 8–12 estatísticas, 3+ categorias | A (4 col horizontal) | Mix completo: Hero, Stats, Categories, Chart, Badge, Quote, Highlight |
| Formato social / retrato | C (2 col vertical) | Qualquer mix, fontes menores |
Regra de densidade: Cada cartão deve parecer completo. Se um cartão parecer esparso, adicione um subtítulo, badge ou tags pill. Se a grade tiver espaço vazio visível, estenda um cartão entre células ou adicione um cartão de suporte.
Lista de Verificação de Personalização
- Reúna conteúdo — estatísticas, categorias, marcos, citações
- Escolha tema — claro, escuro ou ambos
- Escolha layout — 4 col, 3 col ou 2 col
- Nomeie áreas da grade — nomes legíveis que correspondam ao conteúdo
- Selecione tipos de cartão — Hero, Stat, Category, Chart, Badge, Quote, Highlight
- Atribua cores de destaque — uma por categoria, máximo 3–4 destaques
- Defina dimensões — largura da viewport corresponde à largura da grade
- Trave a proporção — apenas para horizontal; omita para vertical
- Verifique densidade — sem cartões com sensação de vazio, sem células de grade não utilizadas, gap 6px
- Escale para orientação — vertical recebe fontes, padding e raio menores
- Capture tela — Playwright em 2x, viewport corresponde à largura da grade
Verificação
Após gerar um arquivo HTML do bento grid:
- Abra no Chrome ou Safari — verifique se todas as células da grade estão preenchidas sem lacunas de linha visíveis
- Verifique o carregamento de fontes — Sora e DM Sans devem renderizar (não fallback do sistema)
- Para tema escuro — verifique se os fundos dos cartões são #1a1a1a, não #fff
- Capture tela na largura de viewport correta (1200/1100/600) em resolução 2x
- Confirme densidade — nenhum cartão deve ter espaço em branco excessivo
Notas
- Google Fonts requer acesso à internet; as grades usam fallback para fontes do sistema offline
- A captura de tela com Playwright é opcional; os usuários podem fazer capturas manuais do navegador
aspect-ratioé apenas para layouts horizontais; layouts verticais fluem da altura do conteúdo- Máximo de 3–4 cores de destaque por grade para manter a contenção estilo Apple
- Esta skill produz HTML estático para exportação de captura de tela, não painéis interativos
- Para grades com menos de 6 pontos de dados, o Template C (2 col vertical) geralmente funciona melhor
Arquivos de Referência
design-system.md— Tokens de design completos (claro + escuro), CSS/HTML dos cartões, templates de layout e esqueletoscripts/screenshot.mjs— Script de captura de tela Playwright