Apple Bento Grid

Problema

Crear gráficos de presentación visualmente pulidos normalmente requiere herramientas de diseño como Figma o Keynote. Esta habilidad genera diseños de cuadrícula bento de calidad Apple como archivos HTML independientes que se convierten en imágenes perfectas mediante captura de pantalla, sin necesidad de herramientas de diseño.

Descripción general

Genera archivos HTML independientes que renderizan cuadrículas de tarjetas bento inspiradas en Apple. Cada salida es un único archivo HTML con CSS en línea, sin dependencias aparte de Google Fonts. Las tarjetas llenan una cuadrícula CSS ajustada con espacios mínimos, lista para exportar como captura de pantalla con Playwright a resolución 2x. Están disponibles temas claro y oscuro.

Flujo de trabajo

Lee el sistema de diseño de forma selectiva: Consulta design-system.md según sea necesario:
- Lee siempre: Sección 2 (Cuadrícula sin espacios) + Sección 3 (Plantillas de diseño) — la base de la cuadrícula
- Lee según el tipo de tarjeta: Secciones 5.1–5.7 según las tarjetas que estés usando
- Lee para el tema: Sección 1 (tokens claro) o Sección 9 (tokens oscuro)
- Lee una vez para la primera generación: Sección 8 (Esqueleto HTML) como punto de partida estructural
Recopila el contenido del usuario — qué estadísticas, hitos, categorías y citas mostrar
Elige un tema — sugiere claro, oscuro o ambos según el contexto (consulta Selección de tema más abajo)
Elige un diseño — selecciona entre las 3 plantillas según la cantidad de tarjetas y la orientación
Compón las tarjetas — selecciona tipos de tarjeta y completa con el contenido del usuario; prioriza la densidad (sin tarjetas que se sientan vacías)
Pregunta por logotipos/imágenes — si el usuario tiene un logotipo o imágenes, intégralos (consulta Logotipos e imágenes más abajo)
Genera el HTML — produce un único archivo HTML independiente
Revisión visual — abre el HTML en un navegador y haz una captura de pantalla para verificar si hay problemas (consulta Revisión visual más abajo)
Ofrece una versión vertical — después de generar una cuadrícula horizontal, pregunta: "¿Quieres una versión vertical (retrato) para redes sociales?" y genera una adaptación de la Plantilla C si la respuesta es afirmativa
Captura de pantalla (opcional) — usa el script de Playwright para capturar PNG a 2x

Revisión visual

Después de generar el HTML, visualiza siempre la salida para detectar problemas visuales antes de presentarla al usuario. Usa Playwright, herramientas MCP del navegador o open para renderizar el archivo, luego verifica lo siguiente:

Líneas huérfanas — Una sola etiqueta tipo píldora o palabra que envuelve sola a una nueva fila. Solución: elimina una píldora para que las restantes llenen la fila de manera uniforme, o agrega suficientes píldoras para llenar dos filas completas.

Espacio vacío — Tarjetas que se ven dispersas con demasiado espacio en blanco. Solución: agrega un subtítulo, una insignia o texto de descripción adicional para llenar la tarjeta.

Desbordamiento de texto — Números o etiquetas demasiado largos para el ancho de la tarjeta. Solución: reduce el tamaño de fuente o abrevia (ej., "$2.4M" en lugar de "$2,400,000").

Cuadrícula rota — Espacios entre filas visibles o tarjetas desalineadas. Verifica: no hay align-items: start, el espacio es exactamente 6px, todas las celdas de la cuadrícula están ocupadas.

Fuente de respaldo — Texto renderizado con fuentes del sistema en lugar de Sora/DM Sans. Asegúrate de que el enlace de Google Fonts esté presente y la página tenga acceso a la red.

Recorte en la captura — Bordes derecho o inferior de las tarjetas cortados en el PNG exportado. Solución: asegúrate de que el ancho de la ventana gráfica coincida exactamente con el ancho CSS de la cuadrícula y que el recorte use box.x/box.y de boundingBox(), no x: 0, y: 0.

Si se encuentra algún problema, corrige el HTML y vuelve a verificar. No presentes el resultado al usuario hasta que la salida pase la revisión visual.

Selección de tema

Sugiere un tema según el contexto. Si no estás seguro, genera ambos.

Contexto	Tema sugerido
Presentación de diapositivas	Oscuro — mayor impacto visual en proyectores
Redes sociales / portafolio	Oscuro — destaca en los feeds
Informe / documento incrustado	Claro — combina con fondos de página blancos
Impresión / PDF	Claro — ahorra tinta, mejor legibilidad
El usuario dice "estilo Apple"	Claro — el aspecto característico de Apple
El usuario dice "moderno" o "elegante"	Oscuro — sensación contemporánea
Sin preferencia declarada	Ambos — genera dos archivos, deja que el usuario elija

Consulta la Sección 9 de design-system.md para los tokens completos del tema oscuro, o la Sección 1 para los tokens del tema claro.

Formato de salida

Produce siempre un único archivo HTML independiente con:

<!DOCTYPE html> + <html lang="en">
Etiquetas <link> de Google Fonts en <head>
Todo el CSS en un único bloque <style>
Todo el contenido en <body> — no se necesita JavaScript

Tipos de tarjeta disponibles

Tarjeta	Úsalo para	Característica clave
Hero	Eslóganes, titulares	Borde superior degradado, abarca 2 filas
Estadística	Números + etiquetas	Acento de color por categoría
Categoría	Elementos agrupados (fases, equipos, trimestres)	Etiqueta de color + subtítulo + píldoras
Gráfico de barras	Crecimiento / comparación a lo largo del tiempo	Barras degradadas, insignia de encabezado
Insignia	Atribución de herramientas, llamada destacada	Píldora de icono + número de estadística
Cita	Declaración de misión, testimonio	Fondo oscuro, texto blanco, `<em>` verde
Destacado	Número heroico (3x, 10x, 100%)	Fondo de degradado completo

Plantillas de diseño

Plantilla	Columnas	Ancho	Relación de aspecto	Mejor para
A: Horizontal	4 columnas	1200px	52/25	12-16 tarjetas, diapositivas
B: Horizontal	3 columnas	1100px	52/22	8-10 tarjetas, enfocado
C: Vertical	2 columnas	600px	ninguna (contenido)	8-14 tarjetas, redes sociales

Crítico: Reglas de cuadrícula sin espacios

Estas 5 reglas son obligatorias para lograr una apariencia similar a Apple. Consulta la Sección 2 de design-system.md para obtener más detalles.

NUNCA establezcas align-items: start — el valor predeterminado stretch llena las celdas
Usa aspect-ratio en diseños horizontales para fijar la forma del contenedor
Filas: 1fr para horizontal, auto para vertical
Espacio: 6px (no 8px)
Cada celda de la cuadrícula debe estar ocupada, sin celdas vacías

Exportación de captura de pantalla

Usa el script de Playwright en scripts/screenshot.mjs para capturar PNG perfectos.

cd scripts
npm install
npx playwright install chromium
node screenshot.mjs

Edita el array pages en screenshot.mjs para apuntar a tus archivos HTML. Cada entrada necesita: file (ruta HTML), output (ruta PNG), viewportWidth (coincide con el ancho de la cuadrícula).

Crítico: La ventana gráfica debe coincidir con el ancho de la cuadrícula. Si la ventana gráfica es más ancha que la cuadrícula, la cuadrícula se centra y el recorte puede cortar el borde derecho. Siempre establece viewportWidth al ancho CSS exacto de la cuadrícula (1200 para 4 columnas, 1100 para 3 columnas, 600 para 2 columnas).

Crítico: El recorte debe usar la posición del elemento. Al recortar el elemento de la cuadrícula, usa box.x y box.y de boundingBox(), no x: 0, y: 0. Si la cuadrícula está centrada en una ventana gráfica más ancha, x: 0 iniciará el recorte antes de la cuadrícula y cortará el lado derecho.

Después de la captura, revisa siempre la imagen de salida para verificar que no se hayan recortado los bordes. Comprueba que las tarjetas más a la derecha y más abajo sean completamente visibles con su border-radius intacto.

Logotipos e imágenes

Los usuarios pueden agregar sus propios logotipos o imágenes a las tarjetas de la cuadrícula bento. Pregunta al usuario si tiene algún logotipo o imagen que desee incluir.

Opciones de colocación:

Ubicación	Cómo	Mejor para
Esquina de tarjeta Hero	`<img>` con `position: absolute; top: 20px; right: 20px; width: 40px;`	Logotipo de empresa
Icono de tarjeta Insignia	Reemplaza el SVG en `.badge-pill` con una etiqueta `<img>` (`width: 16px; height: 16px; border-radius: 4px;`)	Logotipo de herramienta/framework
Fondo de tarjeta completo	`background-image: url(...)` con degradado superpuesto para legibilidad del texto	Capturas de pantalla de funciones
Tarjeta de imagen independiente	`<img>` llenando la tarjeta con `object-fit: cover; border-radius: 18px;`	Fotos de productos

Directrices:

Usa <img src="ruta/al/archivo.png"> con una ruta de archivo local: el HTML es para exportación de captura de pantalla, no para alojamiento
Mantén los logotipos pequeños (24–48px) para que no dominen la tarjeta
Para el tema oscuro, asegúrate de que los logotipos funcionen sobre fondos oscuros (usa versiones blancas/claras)
Agrega siempre texto alt para accesibilidad

Adaptación de contenido

Datos del usuario	Plantilla recomendada	Combinación de tarjetas
3–5 estadísticas, sin categorías	C (2 columnas vertical)	1 Hero + 3–5 Estadísticas + 1 Cita
6–8 estadísticas, 1–2 categorías	B (3 columnas horizontal)	1 Hero + 4–6 Estadísticas + 1–2 Categorías + 1 Gráfico
8–12 estadísticas, 3+ categorías	A (4 columnas horizontal)	Combinación completa: Hero, Estadísticas, Categorías, Gráfico, Insignia, Cita, Destacado
Redes sociales / formato retrato	C (2 columnas vertical)	Cualquier combinación, fuentes más pequeñas

Regla de densidad: Cada tarjeta debe sentirse llena. Si una tarjeta se ve dispersa, agrega un subtítulo, insignia o píldoras. Si la cuadrícula tiene espacio vacío visible, extiende una tarjeta a través de las celdas o agrega una tarjeta de apoyo.

Lista de verificación de personalización

Recopila contenido — estadísticas, categorías, hitos, citas
Elige tema — claro, oscuro o ambos
Elige diseño — 4 columnas, 3 columnas o 2 columnas
Nombra áreas de la cuadrícula — nombres legibles que coincidan con el contenido
Selecciona tipos de tarjeta — Hero, Estadística, Categoría, Gráfico, Insignia, Cita, Destacado
Asigna colores de acento — uno por categoría, máximo 3–4 acentos
Establece dimensiones — el ancho de la ventana gráfica coincide con el ancho de la cuadrícula
Bloquea la relación de aspecto — solo horizontal; omítelo para vertical
Verifica densidad — sin tarjetas que se sientan vacías, sin celdas de cuadrícula sin usar, espacio 6px
Escala para orientación — vertical obtiene fuentes, padding y radio más pequeños
Captura de pantalla — Playwright a 2x, ventana gráfica coincide con el ancho de la cuadrícula

Verificación

Después de generar un archivo HTML de cuadrícula bento:

Abre en Chrome o Safari — verifica que todas las celdas de la cuadrícula estén llenas sin espacios de fila visibles
Verifica la carga de fuentes — Sora y DM Sans deben renderizarse (no la fuente de respaldo del sistema)
Para tema oscuro — verifica que los fondos de las tarjetas sean #1a1a1a, no #fff
Captura de pantalla con el ancho de ventana gráfica correcto (1200/1100/600) a resolución 2x
Confirma densidad — ninguna tarjeta debe tener espacio en blanco excesivo

Notas

Google Fonts requiere acceso a internet; las cuadrículas usan fuentes del sistema sin conexión
La captura de pantalla con Playwright es opcional; los usuarios pueden tomar capturas manuales del navegador
aspect-ratio es solo para diseños horizontales; los diseños verticales fluyen según la altura del contenido
Máximo 3–4 colores de acento por cuadrícula para mantener la moderación similar a Apple
Esta habilidad produce HTML estático para exportación de captura de pantalla, no paneles interactivos
Para cuadrículas con menos de 6 puntos de datos, la Plantilla C (2 columnas vertical) suele funcionar mejor

Archivos de referencia

design-system.md — Tokens de diseño completos (claro + oscuro), CSS/HTML de tarjetas, plantillas de diseño y esqueleto
scripts/screenshot.mjs — Script de captura de pantalla con Playwright

hubeiqiao/apple-bento-grid

¿Qué es apple-bento-grid?

Preguntar en tu IA favorita

Vista previa

Documentación