Qué vas a conseguir
Crea este mismo widget interactivo para aprender vocabulario en varios idiomas usando Claude. Se generará una pequeña aplicación educativa con tres modos de aprendizaje: tarjetas de vocabulario, un quiz de preguntas y un juego para emparejar palabras con sus traducciones.
Cómo hacerlo
En este caso vamos a pedirle a Claude que genere un pequeño widget interactivo dentro una conversación cualquiera.
El resultado es una herramienta visual que permite practicar vocabulario básico en distintos idiomas directamente desde el navegador. Además, el widget incluye un botón para probar nuevas palabras, que genera automáticamente un nuevo conjunto de vocabulario para seguir practicando.
Paso 1 – Pide a Claude que genere el widget interactivo
Abre Claude y pídele que genere un widget interactivo. Cuando Claude crea interfaces visuales suele mostrarlas dentro de Artifacts. Esto permite ver el resultado inmediatamente y probar la herramienta directamente desde la conversación.
Este sistema es muy útil para crear pequeñas aplicaciones educativas o herramientas visuales sin necesidad de programar.
Aun así, no necesitas entrar en artefactos, sólo basta con abrir una conversación y escribir el prompt que vamos a trabajar aquí. Ya que los artefactos se pueden hacer públicos.
Paso 2 – Usa un prompt para crear el widget de aprendizaje de idiomas
Ahora pídele a Claude que genere el widget completo.
Puedes usar un prompt como este:
El widget debe permitir practicar vocabulario básico del día a día en varios idiomas.
Idiomas incluidos:
Inglés
Francés
Alemán
Italiano
Español
El widget debe tener tres modos de aprendizaje:
Tarjetas
Quiz
Empareja
Modo Tarjetas:
Mostrar tarjetas con emoji, palabra y categoría.
Al tocar la tarjeta debe mostrarse la traducción.
Debe haber un contador de tarjetas descubiertas.
Modo Quiz:
Mostrar una palabra y cuatro opciones de respuesta.
El usuario debe elegir la traducción correcta.
El quiz debe tener varias preguntas y mostrar el número de aciertos.
Modo Empareja:
Mostrar palabras en una columna y traducciones en otra.
El usuario debe emparejar cada palabra con su equivalente.
Cada idioma debe tener un color visual diferente.
Usa tarjetas grandes con bordes redondeados y un diseño moderno.
Incluye un botón llamado “Probar otras palabras” que genere nuevas palabras aleatorias y reinicie la actividad.
Genera todo el widget en un único archivo HTML con CSS y JavaScript integrados.
Claude generará automáticamente el código y mostrará el widget funcionando dentro de Artifacts.
Paso 3 – Explora los modos de aprendizaje y genera nuevas palabras
Prueba los distintos modos del widget. Te vamos a dejar también un vídeo para que veas cómo funciona. Pero antes, en esto consisten los modos de aprendizaje de este widget:
- En el modo Tarjetas puedes tocar cada tarjeta para ver la traducción de la palabra. El contador indica cuántas tarjetas se han descubierto.
- En el modo Quiz Claude muestra una palabra en el idioma elegido y debes seleccionar la traducción correcta entre varias opciones.
- En el modo Empareja debes relacionar cada palabra con su traducción correspondiente.
También encontrarás un botón llamado Probar otras palabras, que genera automáticamente un nuevo conjunto de vocabulario y reinicia la actividad para seguir practicando.
Así puedes usarlo
Practicar vocabulario básico
Este widget permite repasar palabras comunes en diferentes idiomas de forma rápida y visual. Las tarjetas, los quizzes y los juegos de emparejar ayudan a memorizar vocabulario de forma más dinámica que leyendo listas de palabras.
Crear recursos educativos
También puedes usar este sistema para generar actividades rápidas para estudiantes o clases de idiomas. Claude puede crear ejercicios visuales en segundos que luego puedes usar como material educativo.
Este tipo de widgets también sirve para crear mini juegos educativos que pueden compartirse con otras personas para practicar idiomas.
Mejoras
Añadir más vocabulario
Puedes ampliar fácilmente el número de palabras que utiliza el widget.
Por ejemplo puedes pedirle a Claude algo como esto:
Agrupa las palabras por categorías como comida, viajes, emociones o acciones cotidianas.
Mantén los tres modos de aprendizaje: tarjetas, quiz y empareja.
De esta forma puedes convertir el widget en una pequeña aplicación para practicar vocabulario con muchos más términos.