Claude Artifacts + React: Professor cria jogo de mini golfe para aulas de ângulos em 20 minutos

Um professor (u/cram213) usou o Claude para criar rapidamente um jogo de minigolfe que ensina ângulos, contornando restrições escolares ao exportar de Artifacts para HTML puro. Todo o fluxo de trabalho — desde comandos de voz no celular até um jogo web publicado — levou cerca de 20 minutos.

Fluxo de trabalho

• Construção inicial: Usando o recurso Artifact do Claude com React, o professor criou um jogo de minigolfe jogável para demonstrar ângulos visualmente. A escola usa Gemini, então os URLs dos Artifacts publicados estavam inacessíveis.
• Solução de exportação: O professor pediu ao Claude que convertesse o Artifact em um arquivo HTML independente e o hospedou em um site pessoal (constraintlayer.ai/educational-engines/golf.html).
• Iteração: O processo envolveu falar ao telefone para dar comandos e, em seguida, fornecer feedback ao Claude após testar o jogo na prévia do Artifact.
• Extensão com alunos: Após jogar, os alunos desenharam seus próprios percursos no papel. O professor enviou cada desenho ao Claude e, em cerca de um minuto, a turma podia jogar seus percursos personalizados.

Principal lição técnica

O professor enfatiza pensar como um engenheiro de sistemas: descreva o problema, planeje para casos extremos ("coisas estúpidas que os alunos podem fazer") e escolha o formato de saída certo para suas restrições de implantação. Artifacts com React são ótimos para prototipagem, mas exportar para HTML puro (sem dependências externas) garante que funcione em qualquer rede escolar — sem necessidade de Gemini, nem de URL do Artifact do Claude.