Introduction
I recently took on the challenge of modernizing the website for my parents' cram school in rural Japan.
As an IT professional specializing in cloud infrastructure, I wanted to see how far I could go by leveraging AI as my primary development partner.
Here is the story of how Claude, Gemini, and Codex helped me transform an outdated site into a modern web presence.
The AI Dream Team
I used three different AI models, each for a specific role:
- Gemini: My "Strategy Consultant." I used it to brainstorm the revamp plan and organize ideas for site structure.
- Claude: My "Lead Developer." It was incredibly fast and accurate with code generation.
- Codex: My "UI/UX Designer." While Claude was fast, Codex generated a design that perfectly appealed to our target audience—young mothers.
The Development Process
Phase 1: The One-Pager
Claude initially built a high-quality single-page site in seconds. It was impressive, but I needed more.
Phase 2: Designing for the Audience
Codex stepped in to refine the aesthetics. It created a design that felt much more approachable and modern for young parents.
Phase 3: The Biggest Challenge (The "Multi-Page" Wall)
The hardest part was splitting the site into seven distinct HTML pages. I spent 7 hours trying to get Codex to handle the linking and structure—I even took a nap while it processed—but it just couldn't cross the finish line.
The Breakthrough
I switched back to a combination of Claude and Gemini. Claude’s coding efficiency is unmatched; it handled the multi-page logic without breaking a sweat.
Key Takeaway: For pure coding speed and logic, Claude is currently king. It saves developers an incredible amount of time.
Feedback from my Parents (and Next Steps)
After showing the result to my parents, I received some "tough but fair" feedback, which I’m now addressing:
-
"Changing the old site is scary."
- Solution: They were worried about the transition. I'm considering a blue-green deployment or hosting both versions. Since they are worried about server costs, I’m looking into AWS (EC2/S3) or Google Cloud to optimize hosting for a lightweight static site.
-
"It looks a bit too much like AI-generated art."
- Solution: I am manually refining the fonts and CSS in VS Code to give it a more "human" and professional touch.
-
"We won't be able to edit it ourselves!"
- Solution: I'm setting up a simplified workflow (perhaps a headless CMS or a specific Git-based setup) so they can update information without needing to touch the raw code.
Conclusion
Building this was a reminder that AI is a powerful tool, but the "human in the loop" is essential for final adjustments and navigating complex site architectures.
Have you used AI to build projects for your family? I’d love to hear your experiences in the comments!
Top comments (0)