How I Revamped a Local Cram School Website Using AI (Claude, Gemini, and Codex)

我是如何利用 AI（Claude、Gemini 和 Codex）重构一家地方补习班网站的

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.

引言最近，我接受了一项挑战：为我父母在日本乡村经营的补习班进行网站现代化改造。作为一名专注于云基础设施的 IT 专业人士，我想看看以 AI 作为主要开发伙伴，究竟能走多远。以下是 Claude、Gemini 和 Codex 如何帮助我将一个过时的网站转变为现代化网络门面的故事。

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.

AI 梦之队 我使用了三种不同的 AI 模型，每种模型各司其职：

Gemini： 我的“战略顾问”。我用它来头脑风暴改版计划，并整理网站结构的构思。
Claude： 我的“首席开发人员”。它在代码生成方面速度极快且非常精准。
Codex： 我的“UI/UX 设计师”。虽然 Claude 速度很快，但 Codex 生成的设计完美契合了我们的目标受众——年轻妈妈们。

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.

开发过程

第一阶段：单页网站 Claude 最初在几秒钟内就构建了一个高质量的单页网站。这令人印象深刻，但我需要更多功能。
第二阶段：针对受众进行设计 Codex 介入并优化了美学设计。它创造出的设计让年轻家长感到更加亲切和现代。
第三阶段：最大的挑战（“多页面”瓶颈） 最困难的部分是将网站拆分为七个独立的 HTML 页面。我花了 7 个小时试图让 Codex 处理链接和结构——甚至在它处理时我还小睡了一会儿——但它始终无法完成任务。

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.

突破我转而重新使用 Claude 和 Gemini 的组合。Claude 的编码效率是无与伦比的；它毫不费力地处理了多页面逻辑。核心结论：在纯粹的编码速度和逻辑方面，Claude 目前是王者。它为开发者节省了大量时间。

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.

父母的反馈（及后续步骤） 在向父母展示成果后，我收到了一些“严厉但中肯”的反馈，我目前正在解决这些问题：

“改变旧网站让人害怕。” 解决方案：他们担心过渡问题。我正在考虑采用蓝绿部署或同时托管两个版本。由于他们担心服务器成本，我正在研究 AWS (EC2/S3) 或 Google Cloud，以优化轻量级静态网站的托管。
“看起来太像 AI 生成的艺术品了。” 解决方案：我正在 VS Code 中手动优化字体和 CSS，赋予它更多“人味”和专业感。
“我们自己没法编辑！” 解决方案：我正在建立一个简化的工作流程（可能是无头 CMS 或特定的基于 Git 的设置），这样他们无需接触原始代码就能更新信息。

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!

结论这次开发经历提醒我，AI 是一个强大的工具，但“人在回路”对于最终调整和处理复杂的网站架构至关重要。你是否也曾使用 AI 为家人构建过项目？我很乐意在评论区听到你的经历！