以前我们用 AI 做网站，更多时候是让 ChatGPT 帮忙写代码、生成网页文案，或者做出一部分页面，然后剩下的工作还是要自己慢慢调整。

但现在随着 GPT-6 Astra + Codex + Elementor MCP 的出现，AI 建站的玩法已经有了很大的变化。

这次我们不是简单让 ChatGPT “写一个网页”，而是通过 Elementor MCP 把 AI 和 WordPress 真正连接起来。连接完成以后，你只需要告诉 AI：我要做什么类型的网站、什么设计风格、需要哪些页面，它就可以直接进入 Elementor 创建页面、调整布局、生成图片，甚至加入动画效果。

如果你准备跟着本文一起操作，可以先准备下面几个工具。

适合 WordPress 网站，比较看重速度、安全性、稳定性以及后期长期运营的朋友，可以优先考虑。

Elementor Pro 页面构建器
 https://bit.ly/4cuQ8IF

ChatGPT AI 会员代充 / AI账号平台：银河录像局
 https://nf.video/C1dxn

如果你在中国大陆，没有方便的海外付款方式，可以根据自己的实际情况选择第三方服务。使用任何第三方账号或代充服务前，建议自行确认账号安全、服务条款和售后规则。

提示词1：

我想为我的人形机器人科技公司 Windy 有风 搭建一个非常有创意、独特的科技感网站。有视觉冲击力、转化效果好的网站。
我希望网站使用创意分屏设计，并且当用户向下滚动页面时，人形机器人图片可以随着滚动进行切换、位移和动态展示，整体风格参考 Awwwards 上的高端创意科技网站。
网站主要使用黑色、深蓝色、银白色和科技蓝渐变，搭配高端、未来感的字体和按钮。
网站重点展示人形机器人产品、核心技术、应用场景、产品演示以及商务合作入口。
整体风格要体现 未来科技、人工智能、高端、专业、创新，不要做成普通企业官网或者常见 SaaS 模板风格。
文字、按钮和背景不要使用 CSS Class，方便我后期修改，CSS Class 只用于图片和图片动画。
请根据这些要求帮我生成一个建站提示词。

如果你在 AI 建站、WordPress、跨境独立站方面还有问题，也可以加入我的知识星球：

向有风咨询 / 加入知识星球
 https://t.zsxq.com/16QP9JP8b

本文部分链接属于推广链接。如果你通过链接购买相关服务，我可能会获得一定佣金，但不会增加你的购买价格。

一、GPT-6 Astra + Elementor MCP，到底和以前的 AI 建站有什么区别？

以前 ChatGPT 当然也可以帮我们做网站。

比如你可以让它生成 HTML、CSS、JavaScript，也可以让它帮你写 WordPress 代码。

但问题在于：

AI 能生成代码，不等于 AI 能真正进入你的网站帮你完成建站。

GPT-6 Astra 更适合这类复杂、多步骤的任务。OpenAI 官方也把计算机操作、软件工程、网站创建和前端 QA 等能力列为 Astra 的重点能力。

而 Elementor MCP 解决的，就是“AI 怎么真正操作 Elementor”这个问题。

2026 年 9 月，Elementor 正式加入 Elementor MCP，可以把 Codex、Claude、Cursor 等外部 AI 工具直接连接到 Elementor，让 AI 创建页面、编辑元素以及操作网站的设计系统。

所以你可以把这套流程简单理解成：

WordPress = 网站系统

Elementor = 可视化网页设计工具

GPT-6 Astra / Codex = 负责理解要求和执行任务的 AI

Elementor MCP = 把 AI 和 Elementor 连接起来的桥梁

连接完成以后，我们就可以直接用普通人说话的方式描述网站需求，然后让 Codex 在 Elementor 里面帮我们搭网站。

这才是现在 AI 建站真正有意思的地方。

二、第一步：准备一个 WordPress 主机

想要搭建 WordPress 网站，首先需要有一个地方存放网站文件，也就是我们平时说的“主机”或者“服务器”。

这次我主要使用的是：

SiteGround WordPress 主机

👉 点击进入 SiteGround

https://bit.ly/4yv1xSu

SiteGround 比较适合 WordPress 用户。

目前它的 WordPress 主机套餐包含免费 SSL、CDN、每日备份、邮箱、网站迁移等功能；GrowBig 等更高套餐还包含 Staging 暂存环境，可以先测试网站，再把修改应用到正式站点。

如果只是搭建普通企业网站、博客、B2B 网站或者个人网站，中间档套餐通常已经能够满足大部分需求。

如果你准备做 WooCommerce 电商网站，或者后期流量比较大，可以再根据自己的业务升级配置。

视频里的完整流程，也是先购买主机、注册域名，再安装 WordPress。

三、其他几个 WordPress 主机怎么选？

除了 SiteGround，我平时还会接触到 Hostinger 和 Kinsta。

不同主机其实适合不同用户。

Hostinger：适合预算有限的新手

Hostinger 主机
 https://bit.ly/3BysRqP

如果你是第一次做网站，希望前期成本低一些，Hostinger 是一个比较常见的选择。

比较适合：

个人网站、博客、小型企业网站、刚开始学习 WordPress 建站的新手。

Kinsta：适合高性能网站和电商独立站

Kinsta 主机
 https://bit.ly/4xqDO52

如果你搭建的是 WooCommerce 电商独立站、B2B 企业网站，或者网站流量比较大，对稳定性和服务器性能要求更高，可以看看 Kinsta。

简单理解：

新手、预算有限：Hostinger

普通 WordPress 网站：SiteGround

电商、高流量、高性能网站：Kinsta

根据自己的实际业务选择就可以了。

四、安装 WordPress

主机购买完成以后，下一步就是安装 WordPress。

以 SiteGround 为例，新建网站的时候选择：

WordPress

然后设置 WordPress 后台管理员的邮箱和密码。

这里一定要注意：

这个账号是以后登录 WordPress 网站后台使用的账号，并不是 SiteGround 主机后台的账号。

安装完成以后，就可以进入 WordPress 后台。

如果后台默认是英文，可以进入：

Settings → General → Site Language

把语言切换成：

简体中文

视频里也是按照这个流程完成 WordPress 安装，然后再进入 SiteGround 的 Site Tools 设置 HTTPS。

五、一定要把 HTTPS 配置好

网站刚安装完成以后，如果浏览器地址栏显示“不安全”，通常需要确认 SSL 是否已经正常启用。

HTTPS 的主要作用，是对浏览器和网站服务器之间的数据传输进行加密。

SiteGround 当前的主机套餐提供免费的 Let’s Encrypt SSL，并可以自动管理证书。

设置完成以后：

原来的：

http://你的域名.com

会变成：

https://你的域名.com

这一步不要忽略，尤其是后面准备做企业官网、电商网站或者需要用户提交表单的网站。

六、安装 Elementor

WordPress 准备完成以后，下一步安装 Elementor。

Elementor 是目前非常流行的 WordPress 可视化页面构建器。

以前做网页可能要自己写很多 CSS 和 HTML，而 Elementor 可以让我们通过拖拽组件的方式搭建网站。

比如：

标题、图片、按钮、菜单、表单、视频、图标、容器……

很多内容都可以直接拖到页面上。

Elementor 官方目前也支持直接从 WordPress 插件后台安装免费版。

如果以后想使用更多高级组件、Theme Builder 等功能，可以考虑 Elementor Pro。

👉 Elementor Pro

https://bit.ly/4cuQ8IF

视频里的目的并不是完全抛弃 Elementor。

恰恰相反：

先让 AI 帮我们完成大部分设计，然后最后再用 Elementor 自己修改。

这其实是目前我比较推荐的一种 AI 建站方式。

七、开启 Elementor MCP

Elementor 安装好以后，重点来了。

进入 WordPress 后台，找到：

Elementor → Elementor MCP

然后开启：

Enable MCP Access

Elementor 官方目前支持把 MCP 连接到包括 Codex、Claude Code、Claude Desktop、Cursor 等 AI 客户端。

开启以后，选择：

Codex

然后点击：

Generate Prompt

Elementor 会自动帮我们生成一段连接提示词。

接下来把这段提示词复制下来。

视频里的实际操作也是在 Elementor MCP 页面生成连接提示词，再交给 Codex 完成配置。

八、为什么这次我选择 GPT-6 Astra + Codex？

Claude、Codex 都可以通过 MCP 和 WordPress 配合使用。

但这次我主要选择：

GPT-6 Astra + Codex。

一个比较明显的优势，是整个工作流更加完整。

除了代码和页面结构以外，ChatGPT 本身还可以配合图片生成能力，所以制作网站时，很多视觉素材也可以直接交给 AI 处理。

视频实际测试的时候，我也是让 Codex 负责理解建站要求、操作 Elementor，然后让 ChatGPT 生成网站需要的图片。

对于不懂代码的新手来说，这种方式会更方便。

当然，复杂任务使用更强的模型通常也会消耗更多额度，所以并不是所有步骤都一定要把推理强度拉到最高。

可以先使用中等或者 High。

真正碰到复杂页面、动画或者比较难解决的问题，再提高模型强度。

九、中国大陆如何准备 ChatGPT 会员？

如果你本身有可以正常使用的支付方式，可以直接通过官方渠道订阅。

如果确实因为地区或支付方式不方便，也有人会选择第三方服务。

我视频里使用到的第三方平台是银河录像局：

👉 ChatGPT AI会员代充 / 银河录像局

https://nf.video/C1dxn

进入以后选择对应的 ChatGPT 服务，再根据平台提示操作即可。

不过这里也提醒一下：

第三方充值或账号服务并不是 OpenAI 官方服务，使用之前建议自己确认平台规则、账号安全以及售后政策。

十、把 Elementor MCP 连接到 Codex

接下来打开 ChatGPT / Codex。

把刚才 Elementor MCP 自动生成的连接 Prompt 粘贴进去。

然后告诉 Codex：

把 Elementor MCP 和我的 WordPress 网站连接起来。

第一次连接的时候，可能会要求相关权限。

根据自己的实际需求授权。

如果配置完成以后提示需要重启 Codex，就完全退出以后重新打开。

然后可以直接问：

“请检查 Elementor MCP 是否已经成功连接到我的 WordPress 网站。如果出现连接问题，请帮我检查原因并解决。”

如果 Codex 能够读取 WordPress 和 Elementor 的相关信息，基本就说明 MCP 已经连接成功。

Elementor 官方现在的连接方法也是：开启 MCP、选择 AI 客户端、生成 Prompt，再把连接脚本交给对应的 AI 工具。

十一、真正决定 AI 建站效果的，是提示词

连接成功以后，并不是马上输入一句：

“帮我做一个漂亮的网站。”

然后就结束了。

这种 Prompt 最大的问题就是：

几乎所有事情都交给 AI 自己猜。

AI 要猜：

你是什么公司？

目标客户是谁？

做几个页面？

网站使用什么颜色？

要什么设计风格？

使用什么图片？

有哪些功能？

一个好的 AI 建站 Prompt，应该更像一份完整的网站设计需求书。

视频里我的方法是：

先把自己的想法简单写出来，再让 GPT-6 Astra 帮我把这些想法整理成一份专业、完整的建站提示词。

比如这次我要制作的是一个人形机器人公司网站。

我会告诉 AI：

公司属于什么行业；

希望网站体现什么感觉；

参考什么类型的设计；

使用哪些品牌颜色；

需要哪些页面；

网站整体偏科技感还是商务感；

需不需要动画；

哪些部分允许使用 CSS；

哪些地方必须保留 Elementor 原生编辑能力。

然后最后加一句：

“请根据以上要求，帮我整理成一份完整、专业、可以直接交给 AI 执行的网站建设 Prompt。”

让 AI 自己帮你完善提示词。

视频里也是按照这种思路，把比较简单的网站需求交给 AI 二次增强，再拿增强后的 Prompt 真正生成网站。

十二、为什么不要让 AI 到处使用自定义 CSS？

这一点非常重要。

我们的目标并不是只要 AI 做出一个“看起来漂亮”的网站。

还要考虑：

以后自己能不能修改。

如果 AI 把大量文字、按钮、背景、布局全部写进自定义 CSS 或自定义代码里面，虽然网站看起来可能不错，但以后自己想修改会比较麻烦。

所以我会在 Prompt 里面明确告诉它：

文字、按钮、背景、基础布局尽量使用 Elementor 原生功能。

复杂图片动画、滚动动画等效果，可以适当使用 CSS。

这样能够在视觉效果和后期维护之间找到一个比较好的平衡。

以后修改文字的时候，只需要点一下对应的 Elementor 元素，就能直接在左边修改。

十三、一句话，让 AI 开始制作整个 WordPress 网站

Prompt 准备好以后，就可以真正开始了。

比如可以先输入：

“请使用 Elementor MCP，在我的 WordPress 网站上搭建下面这个网站。”

然后粘贴：

域名；

网站需求；

完整设计 Prompt。

接下来，Codex 就会开始调用 Elementor MCP 操作 WordPress。

它可以创建页面、添加 Elementor 元素、生成布局、放入图片，并根据要求处理网站样式。

Elementor 官方对 MCP 的定位也是让外部 AI Agent 能直接在 Elementor Canvas 中创建、设计和管理网站内容，而不是生成一堆代码以后再让用户手动复制进去。

十四、AI 建一个网站需要多久？

这个没有固定答案。

主要看你的网站复杂程度。

视频里这次测试，大概用了十几分钟生成首页。

如果只是非常简单的落地页，速度可能更快。

如果有很多：

动画、图片、复杂布局、多页面、交互效果……

自然会花更长时间。

这次实际测试中，AI 大约用了 15 分钟完成主要页面设计。

所以不要单纯追求“1分钟建站”。

真正有价值的是：

让 AI 替你完成以前可能需要几个小时甚至更久的重复工作。

十五、把 AI 生成的页面设置成 WordPress 首页

AI 创建完页面以后，有时候新页面还是“草稿”。

这个时候先进入：

页面 → 所有页面

找到 AI 刚才创建的页面。

使用 Elementor 打开以后点击：

发布

然后进入：

设置 → 阅读

选择：

一个静态页面

再把刚才 AI 创建的页面设置为：

主页

保存以后重新访问网站，就能看到 AI 创建的新首页。

视频里的演示也是先发布 AI 页面，再把它设为 WordPress 静态首页。

十六、AI 生成完以后，仍然可以自己用 Elementor 修改

这是我觉得 Elementor MCP 最大的价值之一。

AI 建完网站，并不意味着以后只能继续找 AI 改。

因为页面本身还是 Elementor 页面。

比如你想修改一段文字：

点击文字 → 左边直接修改。

想修改字体：

Style → Typography

想修改文字颜色：

Style → Text Color

想修改上下间距：

Advanced → Margin / Padding

想增加一个按钮：

直接从 Elementor 左边把 Button 拖进页面。

想换图片：

点击图片 → 选择新的媒体文件。

所以最终你得到的不是一个完全“黑盒”的 AI 网站。

你仍然可以继续用熟悉的 Elementor 可视化方式进行维护。

这对于不懂代码的新手非常重要。

十七、不满意的地方，直接截图给 AI 改

另外一个非常实用的方法就是：

截图修改。

比如你觉得网站某一个区域：

太高；

颜色不好看；

图片不合适；

按钮位置不对；

布局不舒服。

直接截图下来。

把截图发给 ChatGPT，然后告诉它：

“这个区域我不喜欢，请按照下面的要求修改，并直接通过 Elementor MCP 更新我的网站。”

这样会比你自己一点一点找参数快很多。

视频里也实际展示了这种后续修改方式。

十八、别忘了检查电脑、平板和手机端

现在做网站，手机端非常重要。

所以 AI 完成页面以后，一定要进入 Elementor 的响应式预览检查：

桌面端；

平板端；

手机端。

重点检查：

文字有没有超出去；

图片有没有变形；

按钮是不是太小；

菜单是否正常；

上下间距是否合理；

有没有出现横向滚动。

视频里的测试页面在平板和手机端都可以自动适配，但正式网站发布以前还是建议自己全部检查一遍。

十九、继续让 AI 做“关于我们”和“联系我们”

首页完成以后，不需要重新来一遍。

直接回到 Codex 告诉它：

“继续帮我创建一个关于我们页面和联系我们页面，并保持和现有首页完全一致的设计语言。”

如果联系我们页面需要：

电话；

邮箱；

地址；

WhatsApp；

微信；

社交媒体账号……

直接告诉 AI。

它就可以继续完成。

视频中也是通过同一个 MCP 工作流继续生成了“关于我们”和“联系我们”页面。

二十、网站菜单也可以继续完善

页面全部制作完成以后，可以继续创建 WordPress 菜单。

比如：

首页

关于我们

产品

解决方案

联系我们

你既可以让 AI 帮你处理，也可以自己进入：

外观 → 菜单

创建一个“主菜单”。

然后把相关页面加入进去。

如果需要 Mega Menu，也可以继续让 AI 帮你设计。

后面的网站 Header 和 Footer，同样可以使用 Elementor 或主题的 Header/Footer Builder 统一管理。

视频中最终也是把首页、关于我们、联系我们等页面加入菜单，再统一设置网站顶部区域。

二十一、Elementor Pro 值不值得买？

如果你只是跟着这篇教程体验 Elementor MCP，前期可以先从 Elementor 免费版开始。

但如果你准备长期做 WordPress 网站，尤其是：

企业官网；

跨境独立站；

营销落地页；

客户网站；

WooCommerce 商城；

需要高级表单和 Theme Builder 的项目；

那 Elementor Pro 会更加方便。

👉 Elementor Pro 官方产品推广链接

https://bit.ly/4cuQ8IF

前期先把网站做出来，再根据自己的需求决定要不要升级，不需要一开始把所有付费工具全部买齐。

二十二、如果自己不想处理英文，可以找 Fiverr 外包

做海外网站的时候，经常会遇到一个问题：

英文。

比如：

英文文案；

Logo；

产品图片；

网站设计；

配音；

翻译；

SEO；

WordPress 技术问题。

如果某个环节你自己确实不会，也可以直接找海外自由职业者协助。

👉 Fiverr 英文工作外包平台

https://bit.ly/4c9cttG

AI 能解决大部分基础工作，但真正做商业网站的时候，AI + 人工配合通常会更加稳妥。

二十三、不想用 WordPress，也可以尝试 Lovable

如果你的目标并不是做传统 WordPress 网站，而是：

AI 应用；

SaaS；

Web App；

后台系统；

产品原型；

带登录注册的网站应用；

也可以考虑 Lovable。

👉 Lovable AI网站 / Web App生成

http://bit.ly/4ob4naJ

所以工具没有绝对的好坏。

主要还是看你的项目。

内容网站、企业官网、SEO网站、WooCommerce：WordPress + Elementor

AI应用、SaaS、Web App、快速产品原型：Lovable

二十四、GPT-6 Astra + Elementor MCP 最适合哪些人？

我觉得目前特别适合下面几类人。

1. WordPress 新手

不会写代码，也不想从头研究网页设计。

直接把网站要求告诉 AI，让 AI 先搭，再自己调整。

2. 做外贸、跨境电商的人

需要快速做企业官网、品牌站、产品展示网站。

3. 网站设计师

以前一个页面可能要做几个小时，现在可以让 AI 先完成基础布局，然后自己做最后的精修。

4. 做客户网站的工作室

很多重复的页面布局、基础设计、内容填充都可以先交给 AI。

5. 内容创作者和个人品牌

想快速拥有一个属于自己的网站，同时又希望后面能自己维护。

二十五、AI 建站现在最大的优势是什么？

不是“完全不用人”。

而是：

AI 帮你做第一版，人负责最后20%的判断和优化。

以前我们可能要：

先找参考网站；

再做设计稿；

再搭 WordPress；

再拖 Elementor；

再找图片；

再调整手机版；

再反复修改。

现在可以先把需求告诉 GPT-6 Astra。

让它通过 Codex + Elementor MCP 把整个网站框架建立起来。

然后我们只需要：

检查页面；

替换真实文案；

修改图片；

调整品牌颜色；

检查手机端；

确认表单；

最后发布。

整个流程的效率会高很多。

二十六、这套 AI 建站方式有没有缺点？

当然有。

首先，越复杂的网站越消耗 AI 使用额度。

GPT-6 Astra 这类更强模型处理复杂任务时，用量也会比简单模型更高。OpenAI 官方目前也专门提供了 Astra 在 Work 和 Codex 中的用量说明。

其次：

AI 并不是每一次设计都完美。

有时候页面结构不够合理；

有时候会加入太多 CSS；

有时候菜单还需要自己设置；

有时候生成完页面以后，还需要自己设置成 WordPress 首页。

视频实际测试过程中，也出现了这些需要人工收尾的步骤。

所以目前最合理的用法仍然是：

AI负责效率，人负责质量。

二十七、完整 AI 建站流程总结

如果把整套流程压缩一下，其实就是：

第一步：准备 WordPress 主机和域名

写在最后

如果你以前已经用过 ChatGPT 做网站，那么 GPT-6 Astra + Elementor MCP 最大的变化，并不是“AI突然会做网站了”。

以前 AI 也会做。

真正的区别在于：

以前更多是 AI 帮你生成内容和代码，现在开始变成 AI 可以真正进入你的建站工具里执行任务。

Elementor MCP 就像一座桥。

它把 GPT-6 Astra / Codex 和 WordPress、Elementor 真正连接起来。

你负责告诉 AI：

“我要什么。”

AI负责：

“开始帮你做。”

最后你再进入 Elementor：

“检查和微调。”

我觉得这才是 AI 建站真正值得关注的方向。

如果你准备跟着本文一起操作，可以从下面几个工具开始：

有风知识星球

如果你在 AI 建站、WordPress、跨境独立站、AI工具这些方面遇到问题，也可以加入我的知识星球一起交流：

👉 向有风咨询 / 加入知识星球
 https://t.zsxq.com/16QP9JP8b