Crear un panel visual como este, con HTML y CSS es más fácil de lo que parece.
Aquí te dejo el paso a paso que he seguido usando Copilot Chat, sin tocar código manualmente.
✅ Paso 1: Escribe el prompt y genera el código
Copilot lo hace todo si le das un prompt claro.
Este fue el que utilicé para generar el HTML + CSS del bingo en formato 4 x 4:
👁️ Paso 2: Escoge la vista previa
Una vez Copilot genera el código, puedes elegir entre “Código”, “Vista previa” o “Dividir vista”.
Selecciona “Vista previa” para comprobar cómo quedará tu panel en un navegador.
Y así se verá la visualización:
💡 Paso 3: Puedes copiar o descargar el archivo
En este menú, puedes copiar el código completo o descargarlo como archivo .png para compartirlo, incrustarlo o editarlo si lo necesitas:
🚀 Próximamente: agente personalizado para generar Flashcards
Estoy preparando un vídeo para enseñarte cómo crear un agente Copilot que genere estos paneles de forma automática a partir de un contenido
Inspirado en este post de Juan Vicente García Manjon, la idea es facilitar aún más la creación de contenidos interactivos y visuales.
¿Te animas a crear el tuyo?
Cuéntame qué frases pondrías en tu IA Bingo 🧠✨