One of the main goals for my sabbatical was to gain more experience with agentic programming. I’ve recently listened to a bunch of podcasts (e.g., “Can AI Already Do Your Job” from the Daily) about how easy it is to build a website from scratch using only natural-language prompts.
For the past month or so, I’ve been using OpenAI’s Codex as a collaborator on a big project (more details coming soon…). It continues to blow my mind every day, whether it’s generative AI helping me refactor a major database schema, developing a dashboard to monitor and interact with web scrapers, or pulling together five former repos on GitHub into one magical monorepo.
But the other day I was in the process of switching from OpenAI’s Codex to Anthropic’s Claude Code for obvious reasons; see At the Pentagon, OpenAI is In, and Anthropic is Out from Hard Fork. I was looking for a quick warm-up exercise and wanted to spend an hour building and deploying a website fromthe perspective of a non-technical college student. (I will be teaching a freshman-level course on “Vibe Coding with Gen AI” in the fall.) My self-imposed rules were that I did not want to write a single line of computer code or draw on much of my knowledge of web programming,
So here is what I built…
Sugar Speed Soccer
My kids are pretty good at soccer, but both need to improve their agility and speed. At the same time, I read a terrifying article about “Why Are So Many Teen Girls Still Tearing Their A.C.L.s?” where something like 1/6 of female soccer players tear their ACLs before graduating from high school.
Here was my initial prompt:
“Can you create me a really simple webpage for my son (11 years old) and daughter (14 years old) who want to get faster at running for soccer. Maybe you could have a series of useful YouTube videos embedded into the page. It should be a single-page app.”
With the help of my wife, we “collaborated” with Claude code through a few more interactions (summarized here):
- Add a warm-up section (hip mobility + hamstrings) and a section on running form.
- Add FIFA 11+ ACL prevention exercises + weekly schedule
- We have a small 15×11-foot basement with turf. Please add sections for basement training and outdoor training.
- Here are a few pictures of our family dog Sugar. Can you incorporate these images into the design?
Finally, I asked how to host the page on GitHub and point a subdomain I already own to it. It gave me simple instructions, handled the Git commands (init, commit, push), and walked me through how to create a CNAME record for the new subdomain.
The result can be found at http://sugarspeedsoccer.dougturnbull.org/
The Result
This website is amazing both in terms of aesthetics and functionality (UI/UX design), and the value of the content it pulled together. I did an informal user test with each of my kids and they both loved it. And more importantly, it saved me a ton of time digging through speed training websites and YouTube videos. I’m sure it is not as good as working with a personalized trainer, but it gives the basics in a user experience that my kids can follow.
Here are a couple of screenshots. The first is a nicely laid-out section of embedded YouTube videos, with text descriptions of each exercise.
Here are a few proposed daily workouts:
And here is the best part – a description of our workout mascot, Sugar:
The most amazing thing about these vibe-coded projects is that I did not include any information about these four pictures. That is, Claude Code conducted the image analysis and developed the competitive training narrative for our dog Sugar.
Claude Code is really impressive. It changes how we should teach our web programming courses. This is something that I plan to explore over the next few months.