AI建站完整教程：用Claude AI生成网站，并部署到Hostinger服务器

现在用 AI 做网站，真的已经越来越简单了。

尤其是最近非常火的 Claude AI 和 Claude Code，你只需要给它一段提示词，它就可以帮你生成一个看起来非常专业的网站。

页面设计、动画效果、布局风格、交互细节，很多时候一次性就能做出来。

我最近也测试了很多 AI 建站项目，说实话，现在 AI 做网站的效果已经非常夸张了。很多网页如果你不说是 AI 生成的，别人可能还以为是专业设计师和前端工程师团队做出来的。

另外，本期文章提到的工具链接，我也全部整理好了。

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

► Hostinger ：服务器、域名
https://bit.ly/3BysRqP

► 向有风咨询，加入我的知识星球圈子：
https://t.zsxq.com/16QP9JP8b

本期用到的工具：

► ChatGPT 会员代充、账号购买平台（各种AI会员代充平台）
https://nf.video/C1dxn

► Node.js
https://nodejs.org/zh-cn

► Git
https://git-scm.com/

► Claude 下载
https://claude.com/download

► GitHub
https://github.com/

► Supabase 数据库
https://supabase.com/

► 英文工作外包：Fiverr
https://bit.ly/4c9cttG

提示词1：

我想用 Next.js 创建一个现代风格的关于AI眼镜公司企业网站。

我希望网站整体风格要像 Awwwards 上那种高级、有设计感的网站。请帮我生成一段提示词，让 Claude Code 根据这个提示词来创建这个网站。

提示词2：

我希望你在开发过程中保持开发服务器运行，这样我就可以一边开发，一边实时查看应用程序的效果。

提示词3：

我想为这个项目初始化一个 Git 仓库。

提示词4：

只为这个仓库设置，告诉你要使用的姓名和邮箱，请通过 –local 只为这个仓库进行配置，然后再提交。不要修改全局 Git 配置。

提示词5：

使用以下命令，把它和线上仓库关联起来：

提示词6：

看起来不错，把它提交并推送到 GitHub。

提示词7：

我希望你运行下面这个命令：
npx skills add supabase/agent-skills

提示词8：

我想把 Supabase 集成到这个应用里，让这个 Next.js 项目变成动态网站。

目前我不需要用户认证功能。允许所有访问我们应用的用户都可以提交表单。

请确保安装下面这些库：

npm install @supabase/supabase-js @supabase/ssr

下面这些是本地连接数据库所需要的环境变量，这样我们后面就可以测试功能是否正常。请确保把这些变量添加到 .env 文件里。

NEXT_PUBLIC_SUPABASE_URL=https://hjkvkaybcdcnvxacibkp.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_QCfBFfq29DTek6WYtSuNsg_22W48QhB

提示词9：

提交这些修改，并把它推送到 GitHub 的 main 分支。

提示词10：

调整 .gitignore，允许提交 env.production 文件。

添加 env.production 文件，并在里面写入这两个变量。

然后提交并推送到 GitHub。

NEXT_PUBLIC_SUPABASE_URL=https://hjkvkaybcdcnvxacibkp.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_QCfBFfq29DTek6WYtSuNsg_22W48QhB

提示词11：

我们希望这个直接合并到 main 分支。

为什么现在很多人开始用 Claude AI 做网站？

因为真的太快了。

以前做一个企业官网，你可能需要：

• UI设计师
• 前端工程师
• 后端工程师
• 服务器运维

甚至一个网站搞几个月都不一定能上线。

但现在。

很多网站，你可能几分钟就能生成一个初稿。

而且最关键的是：

Claude Code 不只是“生成网页”。

它还能：

• 修改网站
• 修复错误
• 自动部署
• 自动同步更新
• 连接数据库
• 帮你调试代码

这其实已经非常接近真正的 AI 程序员了。

第一步：安装 Claude Code

首先你需要下载 Claude Desktop。

注意：

这里一定要下载桌面版。

因为网页版很多功能无法实现，比如：

• 本地项目运行
• 实时网站预览
• 自动部署
• 文件同步

Claude 下载地址：

► Claude Desktop 下载
https://claude.com/download

安装完成以后，打开 Claude。

你会看到三个选项：

• Chat
• Coworker
• Code

我们今天主要用的是第三个：

Claude Code。

不过这里有一点需要注意：

Claude 免费版是无法使用 Claude Code 的。

你至少需要升级到 Claude Pro。

第二步：安装 Node.js 和 Git

接下来，你还需要安装两个工具：

• Node.js
• Git

很多新手第一次看到这些名字会觉得复杂。

其实你可以简单理解：

Node.js 是让你的电脑可以运行 JavaScript 网站项目。

Git 则是帮你管理网站代码，并同步到 GitHub。

下载地址：

► Node.js
https://nodejs.org/zh-cn

► Git
https://git-scm.com/

这里也顺便帮大家纠正一下几个容易念错的专业术语：

错误说法：

• Node GS
• Next GS
• Get Hub
• Super Base

正确名称：

• Node.js
• Next.js
• GitHub
• Supabase

尤其是：

Next.js

这是目前非常流行的网站框架。

官网：

https://nextjs.org/

很多 AI 建站项目，其实底层都是用 Next.js 来生成的。

安装 Node.js 和 Git 非常简单。

一路“下一步”即可。

安装完成以后，你的电脑就已经具备 AI 建站开发环境了。