Claude Artifacts + React: Teacher Builds Mini Golf Game for Angle Lessons in 20 Min

A teacher (u/cram213) used Claude to rapidly build a miniature golf game that teaches angles, bypassing school restrictions by exporting from Artifacts to raw HTML. The entire workflow — from voice prompting on a phone to a published web game — took about 20 minutes.

Workflow

• Initial build: Using Claude's Artifact feature with React, the teacher created a playable mini golf game to visually demonstrate angles. The school uses Gemini, so published Artifacts URLs were inaccessible.
• Export workaround: The teacher asked Claude to convert the Artifact into a standalone HTML file, then hosted it on a personal website (constraintlayer.ai/educational-engines/golf.html).
• Iteration: The process involved talking to the phone for prompts, then giving feedback to Claude after testing the game in the Artifact preview.
• Student extension: After playing, students drew their own course designs on paper. The teacher uploaded each drawing to Claude, and within about a minute, the class could play their custom courses.

Key technical takeaway

The teacher emphasizes thinking like a systems engineer: describe the problem, plan for edge cases ("stupid things students might do"), and choose the right output format for your deployment constraints. Artifacts with React are great for prototyping, but exporting to plain HTML (no external dependencies) ensures it works on any school network — no Gemini, no Claude Artifact URL needed.