Hace poco hemos creado una nueva sección de ‘recursos’ en la web. Algunos de ellos son juegos interactivos para mejorar el conocimiento sobre IA generativa. Para poder programarlos, sería necesario un mínimo de conocimiento sobre programación web, pero en Paréntesis MEDia lo hemos hecho gracias a Claude 3.5 Sonnet. Te explicamos los prompts y las posibilidades de esta nueva versión del modelo de lenguaje de Anthropic.
La clave de todo es la nueva funcionalidad ‘Artifacts‘, que permite previsualizar el código directamente en el chatbot. A diferencia de ChatGPT, que muestra el código pero no su ejecución en tiempo real, Claude es un banco de pruebas ideal para pequeñas tareas de programación.
Prompt para crear un juego interactivo
Una de las primeras ideas fue crear un juego para que los usuarios jugaran a distinguir imágenes generadas con IA de otras reales. Para hacerlo, comenzamos con un prompt muy sencillo:
Actúa como un programador profesional y crea un código usando JavaScript, CSS y HTML para WordPress que consista en un juego. Se pueden indexar imágenes generadas con IA y otras reales. El juego consiste en que el usuario diga cuál es real. Debes crear 5 preguntas. Al final, debe salir un resumen con los aciertos y fallos. El estilo debe ser moderno.
En menos de 20 segundos, Claude hará un primer borrador con el juego y la función ‘Artifacts’ permitirá previsualizarlo. Como se trata de un juego que debe tener unas imágenes indexadas, la previsualización se hará a ciegas, ya que se deben copiar las URL de las fotografías a posteriori para que funcione.
Pero ya en este primer borrador, Claude generó el esqueleto del juego, incluyendo instrucciones, título, página final… A continuación solo hacía falta ir puliendo mediante órdenes sencillas aquello que queríamos mejorar.
Haz que las imágenes sean más pequeñas, pero haz que su contenido (imagen) ocupe todo el espacio, independientemente de las dimensiones, para que las cartas sean iguales. Haz que el juego sea vertical en móvil y horizontal en ordenador.
Luego le añadimos una animación a modo de color verde o rojo para indicar si la respuesta era correcta o no.
Crear variaciones de un mismo código
Otra de las funcionalidades consiste en aprovechar un código ya generado para crear diferentes juegos. Tomando como referencia el caso anterior, pegando el código del juego en un nuevo chat de Claude, podríamos pedirle que creara otro juego en el que, por ejemplo, el usuario pueda medir sus conocimientos sobre herramientas de IA.
De igual forma, la aplicación tomará como referencia el contenido que ya has ido mejorando como punto de partida, por lo que ya no será necesario pedirle que haga todas esas modificaciones.
Toda revolución necesita sus cronistas. Suscríbete a nuestra newsletter y ponte al día en tecnología, IA y medios de comunicación.
