Claude Artifacts + React: Profesor crea un minigolf para lecciones de ángulos en 20 minutos

Un profesor (u/cram213) usó Claude para construir rápidamente un juego de minigolf que enseña ángulos, sorteando las restricciones escolares al exportar desde Artifacts a HTML plano. Todo el flujo de trabajo — desde la solicitud por voz en un teléfono hasta un juego web publicado — tomó unos 20 minutos.

Flujo de trabajo

• Construcción inicial: Usando la función Artifact de Claude con React, el profesor creó un juego de minigolf interactivo para demostrar visualmente los ángulos. La escuela usa Gemini, por lo que las URLs de Artifacts publicados eran inaccesibles.
• Solución de exportación: El profesor pidió a Claude que convirtiera el Artifact en un archivo HTML independiente y luego lo alojó en un sitio web personal (constraintlayer.ai/educational-engines/golf.html).
• Iteración: El proceso implicó hablar al teléfono para dar indicaciones y luego dar retroalimentación a Claude tras probar el juego en la vista previa del Artifact.
• Extensión con estudiantes: Después de jugar, los estudiantes dibujaron sus propios diseños de recorridos en papel. El profesor subió cada dibujo a Claude, y en aproximadamente un minuto, la clase podía jugar sus recorridos personalizados.

Conclusión técnica clave

El profesor enfatiza pensar como un ingeniero de sistemas: describir el problema, planificar casos extremos ("cosas estúpidas que los estudiantes podrían hacer") y elegir el formato de salida adecuado para las restricciones de despliegue. Los Artifacts con React son excelentes para prototipar, pero exportar a HTML plano (sin dependencias externas) asegura que funcione en cualquier red escolar — sin necesidad de Gemini ni de la URL del Artifact de Claude.