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.
📖 Lee la fuente completa: r/ClaudeAI
👀 Ver también

Desarrollador Usa Código Claude para Construir un Dongle USB que Ejecuta Automáticamente el Juego del Dinosaurio de Chrome
Un desarrollador construyó un dongle USB usando una placa ATtiny85 que automáticamente juega el juego Dino de Chrome detectando obstáculos con sensores de luz y enviando comandos de teclado. Claude Code ayudó con el desarrollo del firmware incluyendo integración V-USB, lógica de sensores y algoritmos de temporización adaptativa.

Agente OpenClaw Quemó $20 en Tokens de API Debido a la Inflación de Contexto por Web Scraping
Un desarrollador que construía un agente OpenClaw para monitorear sitios financieros consumió accidentalmente $20 en tokens de API en unas pocas horas al obtener páginas de Yahoo Finance que incluían 609,000 tokens de HTML superfluo como barras de navegación y banners de cookies en la ventana de contexto.

Usuario de OpenClaw propone 'Ciclo de Sueño' para compresión de memoria en agentes de IA
Un usuario de OpenClaw sin conocimientos de desarrollo describe la implementación de un enfoque de 'ciclo de sueño' para la gestión de memoria, inspirado en el olvido humano y la investigación en neurociencia sobre los sueños como compresión de memoria. El usuario enfrentó problemas con bases de datos en crecimiento, costos de tokens y contradicciones del agente.

Enfoque Híbrido Local+API Reduce los Costos de IA en un 79% en una Prueba de un Mes
Un desarrollador que ejecuta un asistente de IA 24/7 en un VPS de Hetzner redujo los costos mensuales de $288 a $60 al combinar estratégicamente modelos locales con llamadas a la API. La configuración utiliza nomic-embed-text para incrustaciones y Qwen2.5 7B para tareas en segundo plano, derivando el trabajo más complejo a modelos Claude.