如何用 ChatGPT 做网站：三种行之有效的方法

要用 ChatGPT 做网站，你可以请它编写网站的 HTML 和 CSS，然后自行把这些文件放到托管服务上；也可以用它规划页面、撰写文案，再到建站工具中搭建；还可以像 Mythex 那样，在 ChatGPT 中连接一个 AI 建站工具，直接在同一个对话里完成构建、托管和发布。第一种方法免费，适合单页网站；当网站需要保存数据的表单、登录功能或定期更新时，第三种更合适。本指南逐一展示每种方法的提示词，并说明各自的局限。

ChatGPT 自己能做什么，不能做什么

ChatGPT 很擅长写作：代码、标题、页面文案和规划都不在话下。但开箱即用时，它并不是一家托管公司。它不会为你的网站提供公开地址，不会运行数据库，也不会像建站工具那样在不同项目之间保存网站文件。下面每种方法，都是对这一差距的不同解决方案。

方法一：ChatGPT 写代码，你自己托管

这是经典做法，适合简单的静态网站，比如作品集、落地页或婚礼页面。

第 1 步：要求生成一个完整的单文件页面

请具体说明内容和版式：

请编写一个完整的单页网站，整个页面放在一个 HTML 文件中，CSS 写在 style 标签里。这是为阿曼的自由插画师 Maya Haddad 做的网站。包含以下板块：一个页头，显示她的名字和“为书籍与品牌作画”；一个由六张作品图片组成的网格（使用可替换的占位图片路径）；一段简短的个人简介；一份列出三项服务及起始价格的清单；以及一个联系板块，里面有她的邮箱（使用 mailto 链接）。风格干净现代，留白充足，适配手机。不要使用 JavaScript 框架。

要求只用一个文件，保存和上传都更简单。

第 2 步：保存并打开

把代码复制到文本编辑器，保存为 index.html，然后用浏览器打开。如果显示有问题，就直接告诉 ChatGPT，例如：“桌面端的图片网格只有一列，请在宽度超过 900px 时改为三列。”

第 3 步：替换占位内容

把占位图片换成你自己的图片，并替换 ChatGPT 编造的文字。仔细核对价格、邮箱和姓名，因为 AI 在填补空白时往往很自信，但并不准确。

第 4 步：上线

把文件上传到 GitHub Pages 之类的免费静态托管服务，或你已有的任何网站主机。你会得到一个公开地址。如果要使用自己的域名，请按托管服务的说明操作；我们的指南如何连接自定义域名解释了 DNS 的设置部分。

方法一的局限

• 保存数据的表单。 联系表单需要一个接收提交内容的地方，你需要表单服务或服务器。
• 登录和会员区。 这些功能需要后端和数据库。
• 页面较多。 在十个手动粘贴的文件中保持页眉和菜单一致，非常繁琐。
• 更新。 每次修改都要重新向 ChatGPT 索要代码、粘贴并再次上传。

方法二：ChatGPT 做规划，建站工具来搭建

在这种方法中，ChatGPT 负责思考和写作，建站工具负责搭建和托管。

第 1 步：与 ChatGPT 一起规划网站

我在曼彻斯特经营一家接受蛋糕订单的小型家庭烘焙店。请建议我的网站需要哪些页面，每个页面应该说什么，以及我希望访客在每个页面上完成的一个行动。页面请控制在五个以内。

第 2 步：撰写文案

请 ChatGPT 为每个页面写出文字，然后用你自己的语气改写。加入 ChatGPT 无法知道的真实细节：营业时间、价格、配送范围，以及你的蛋糕有什么不同。

第 3 步：在建站工具中搭建

把规划和文案粘贴到建站工具中。在拖放式工具里，你要把文字放进模板；在 AI 建站工具里，你可以用一条消息提交整个规划，由它搭建页面。例如在 Mythex 网站构建器中：

请根据以下规划和文案为曼彻斯特的一家家庭烘焙店搭建网站：[粘贴内容]。包含一个订单请求表单，每次提交都会保存（姓名、电话、蛋糕种类、需要的日期、留言），以便我在只有我能登录的管理页面中查看。风格温馨、家常，适配手机。

这里的订单表单会保存到真实的数据库中，这是粘贴的 HTML 文件做不到的。关于这条路线的更多内容，请参阅如何用 AI 做网站。

方法三：在 ChatGPT 内部构建并发布

最新的方式是把建站工具连接到 ChatGPT，让 ChatGPT 直接调用该工具的功能。你始终停留在 ChatGPT 对话中，项目、预览、数据库和托管都由建站工具提供。

Mythex 通过其 ChatGPT 应用（一个 MCP 连接器）实现这一点。你可以在 Mythex 的账户设置中完成连接；任何套餐都能连接，但运行项目沙盒的工具需要 Pro 套餐。连接之后，你可以这样对 ChatGPT 说：

请使用 Mythex 为我的烘焙店创建一个新网站，包含首页、一个列出蛋糕和价格的菜单页面，以及一个会保存到数据库的订单请求表单。请先给我看预览，我确认没问题后再发布。

随后，ChatGPT 会创建项目、编写代码、运行网站，并在你确认后将其发布到公开网址。之后的修改只需在同一个对话中继续发消息即可。同样的连接器方式也适用于 Claude、Cursor 和 Codex。关于其工作原理以及哪些建站工具支持该方式，请参阅支持 MCP 的 AI 应用构建器。

应该选哪种方法？

适用于任何方法的提示技巧

• 一开始就提供真实信息。 名称、所在地、服务、价格和联系方式。给出的虚构细节越少，后期需要清理的内容就越少。
• 描述访客和目标。 例如：“一位正在寻找生日蛋糕的家长，最终应该会提交一份订单请求。”
• 要求优先适配手机的版式。 大多数访客使用手机。
• 有了第一个版本后，每条消息只改一处。
• 明确要求基本的 SEO 内容： 每个页面有独特的标题和描述，使用真实的标题层级，图片有替代文本。参见 AI 生成网站的 SEO。

我们的指南为 AI 应用构建器编写提示词还收录了更多有效的写法。

常见问题与解决办法

• 设计看起来很千篇一律。 给出参考：“像一家安静的北欧风咖啡馆，大量留白，搭配一种低饱和的绿色。”
• 代码被截断了。 请 ChatGPT 从最后一行接着写，或者把页面拆分成几个板块，一次给你一个。
• 它编造了用户评价或统计数据。 请删除。虚假评价会损害信任，而且在许多地区违反消费者保护法规。
• 修改后网站出错。 粘贴新代码之前，先保留一份最近一次正常运行的版本。像 Mythex 这样的建站工具会保存检查点，方便你回退。

发布之前

通读每个页面上的每一句话。确认联系方式可以正常使用。在手机上打开网站。确保所有图片都是你自己的或已获得合法授权。然后发布，并分享到访客已经聚集的地方。如果你希望整个过程完全免费，如何免费做网站更详细地介绍了免费托管的选择。

常见问题