我如何使用 AI（Claude、Gemini 和 Codex）改版本地补习班网站

Source: Dev.to

Introduction

我最近接受了一个挑战：为我父母在日本农村的补习学校网站进行现代化改造。

作为一名专注于云基础设施的 IT 专业人士，我想看看通过将 AI 作为主要开发伙伴，能够走多远。以下是 Claude、Gemini 和 Codex 如何帮助我将一个过时的网站转变为现代化网络形象的故事。

AI 梦想团队

我使用了三种不同的 AI 模型，每个模型负责特定角色：

Gemini – 战略顾问

我用它来头脑风暴改版计划并组织网站结构的想法。

Claude – 首席开发者

在代码生成方面速度极快且准确。

Codex – UI/UX 设计师

生成的设计完美契合我们的目标受众——年轻母亲。

开发过程

第1阶段：单页

Claude 最初在几秒钟内构建了一个高质量的单页站点。它令人印象深刻，但我需要更多。

第2阶段：为受众设计

Codex 对美感进行了精炼，打造出更亲切、现代的设计，适合年轻父母。

第3阶段：最大挑战（“多页”墙）

最难的部分是将站点拆分为七个独立的 HTML 页面。我花了 7 小时 让 Codex 处理链接和结构——在它处理时我打了个盹——但它仍未完成任务。

突破

我改回使用 Claude 和 Gemini 的组合。Claude 的编码效率无可匹敌；它轻松处理了多页逻辑，毫不费力。

关键要点

在纯编码速度和逻辑方面，Claude 目前是王者。它为开发者节省了惊人的时间。

来自我父母的反馈（以及后续计划）

• “更改旧网站令人害怕。”
  Solution: 他们担心迁移过程。我正在考虑蓝绿部署或同时托管两个版本。为了保持服务器成本低，我正在考虑使用 AWS (EC2/S3) 或 Google Cloud 来托管轻量级静态站点。

• “看起来有点像 AI 生成的艺术作品。”
  Solution: 我正在 VS Code 中手动优化 fonts and CSS，使其更具“人性化”和专业感。

• “我们将无法自行编辑！”
  Solution: 我正在搭建简化的工作流（可能是无头 CMS 或基于 Git 的方案），让他们无需直接修改代码即可更新信息。

结论

构建这个项目提醒我们，AI 是一个强大的工具，但“人在回路中”对于最终调整和处理复杂站点架构至关重要。

你有没有使用 AI 为家人构建项目？欢迎在评论中分享你的经验！