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.
📖 Leia a fonte completa: r/ClaudeAI
👀 See Also
Desenvolvedor Usa Código do Claude para Construir Dongle USB que Executa Automaticamente o Jogo do Dinossauro do Chrome
Um desenvolvedor criou um dongle USB usando uma placa ATtiny85 que automaticamente joga o jogo Dino do Chrome detectando obstáculos com sensores de luz e enviando comandos de teclado. O Claude Code auxiliou no desenvolvimento do firmware incluindo integração V-USB, lógica dos sensores e algoritmos de temporização adaptativa.
Construindo o Drivesidekick: Um Aplicativo de Direção com Claude Code
Desenvolvedores estão usando o Claude Code para criar aplicativos móveis sem experiência em front-end. Um desenvolvedor de backend utilizou o Claude Code para criar o Drivesidekick, um aplicativo de aulas de direção que utiliza React Native/Expo.
Designer cria aplicativo nativo de Mac para marcação de fotos com Claude Code e modelo de visão local
Um designer sem experiência em Xcode usou o Claude Code para construir o Loupe, um aplicativo Mac em SwiftUI que analisa fotos com um modelo de visão local (minicpm-v via Ollama) e escreve metadados IPTC/XMP. O aplicativo inclui processamento paralelo, detecção automática de hardware e um sistema de aprendizado que se adapta ao estilo de marcação.
Desenvolvedor Compara a IA Claude a uma Calculadora Moderna para o Fluxo de Trabalho de Programação
Um desenvolvedor com 18 meses em um projeto serverless Angular/AWS SPA/PWA relata usar a Claude AI para 90% da programação assistida por IA, descrevendo-a como uma 'versão do século 21 de uma calculadora' que os torna 10 vezes mais produtivos, apesar de ocasionais resultados catastróficos.