如何用 AI 制作网站：从第一条提示词到上线

要用 AI 制作网站，先写下网站的用途和需要哪些页面，用几句通俗的话把它描述给 AI 网站或应用构建器，然后让它生成第一个版本，并在实时预览中查看。接着修改文案、在手机上检查、补齐搜索引擎需要的基础设置，然后发布到一个域名。大多数小型网站（企业网站、作品集、落地页、简单博客）都可以在一次操作中从想法做到上线。

你要做的是哪种网站？

“网站”涵盖的范围差异很大，你选择的类型会改变你需要提出的要求：

如果你的网站属于最后一行，那么你实际上是在构建一个带营销前台的网页应用。这没问题，AI 应用构建器两种都能处理，但应用部分要单独规划。我们的如何用 AI 制作应用指南涵盖了这部分内容。

AI 网站构建器、模板与 AI 应用构建器

常见的路线有三种，各自适合不同的人。

• 带 AI 功能的模板式构建器（Wix、Squarespace、Framer 等）。你从一个设计好的模板开始，用可视化方式编辑；AI 帮助撰写文字或推荐布局。如果你想要经过验证的设计、可视化编辑器，以及博客或预约组件等内置功能，它们很合适。
• AI 应用构建器（Mythex、Lovable、Bolt 等）。你在聊天中描述网站，AI 从零开始编写代码，并在实时预览中运行。如果你想要量身定制的网站，希望通过对话而不是拖拽方块来修改，或者以后可能要添加应用功能，它们很合适。
• 手工制作或代理机构制作的网站。 对于内容流程复杂、品牌体系严格或每页都需要法律审核的大型网站，这仍然是正确的选择。

如果想并排了解具体工具，请参见最佳 AI 网站构建器。

第 1 步：在一页纸上规划网站

在打开任何工具之前，先回答以下五个问题。只需十分钟，却能省下数小时的反复沟通：

1. 访问者是谁，他们应该做什么？ “需要报价、会打电话咨询的本地房主”才是一个规划。“所有人”不是。
2. 需要哪些页面？ 把它们列出来。大多数小型网站需要四到五个页面。
3. 每个页面上有什么内容？ 每个页面用一两行来写，例如：“服务：三项服务，每项附简短说明和起步价。”
4. 哪些是真实的？ 收集你真实的企业名称、服务、价格、地址、营业时间、照片，以及你获准使用的客户评价。对于你没有提供的内容，AI 会填入占位内容。
5. 它应该给人什么感觉？ 两到三个词（“平静、干净、留白多”），或者一个你喜欢的网站链接。

第 2 步：写出第一条提示词

好的第一条提示词描述的是业务和页面，而不是代码：

为 Harbor Physio 制作一个网站，这是一家位于沿海小镇的理疗诊所。页面包括：首页（首屏带“预约评估”按钮、三条选择我们的理由、简短的客户评价板块）；服务（运动损伤、背痛、术后康复，每项都附一段说明和每次疗程的时长）；关于我们（两位理疗师，照片位置留作占位）；联系我们（地址、营业时间、电话和联系表单）。风格平静干净，搭配柔和的蓝色强调色。移动端优先。使用真实感的文案，不要 lorem ipsum，也不要编造评价或奖项。

最后一句很重要。AI 工具很乐意用编造的客户评价、“超过 10,000 名客户信赖”的横幅或虚假的奖项来填充空白。要告诉它不要这样做，之后仍然要检查。

如果你已有标志、品牌色或你喜欢的网站截图，可以一并附上。更多有效的写法，请参见如何为 AI 应用构建器编写提示词。

第 3 步：像访客一样审阅

第一个版本出现后，不要先去调字体。请像你的访客一样浏览：

• 你能否在五秒钟内看出这家企业是做什么的？
• 主按钮是否醒目，点击后是否能到达正确的地方？
• 菜单中的每个页面是否都存在，链接是否正确？
• 切换到手机尺寸的视图。大多数访客会用手机打开，拥挤的文字和过大的图片正是在这里暴露出来的。

然后每次只改一件事。“把首屏标题缩短，并把电话号码放到页眉”比“让它更好”效果更好。如果某次修改出了问题，请回退到较早的版本，而不是试图用对话来挽救。

第 4 步：用真实内容替换占位内容

第一稿会有占位图片和通用句子。请逐页处理：

• 文案。 粘贴你真实的服务说明、价格和营业时间。可以让 AI 帮你精简，但要确保事实仍然来自你自己。
• 图片。 在可能的情况下上传你自己的照片。背景可以使用图库图片；真实的作品、团队或场所照片更能建立信任。
• 证明。 只使用你能够证实的客户评价、标志和数字。
• 法律页面。 如果你通过表单收集任何个人数据，通常需要隐私政策。可以让 AI 生成一个页面，但要根据你所在地区的规定进行核对。生成的政策只是起点，不是法律意见。

第 5 步：表单、预约和其他“应用”部分

联系表单需要一个地方来接收提交的内容。从最简单到最复杂，选项如下：

如果你需要真正的预约或付款功能，请参见如何构建预约应用和如何为你的应用添加付款功能。

第 6 步：分享前的 SEO 基础

AI 可以写出很漂亮的页面，但搜索引擎可能几乎读不懂。上线前，请要求 AI 提供以下内容：

• 每个页面独特的标题和元描述
• 每个页面一个清晰的主标题，并有合理的副标题
• 图片的描述性替代文本（alt text）
• Open Graph 标签，使链接在社交媒体或消息中分享时显示正确
• 站点地图和 robots 文件

有一个技术要点值得了解。许多 AI 构建器生成的是单页应用，即由浏览器通过 JavaScript 渲染页面。搜索引擎可以索引这类页面，但对于需要排名的页面，静态或服务端渲染的 HTML 更可靠。如果搜索流量很重要，请要求生成静态网站，或使用在服务器上渲染页面的框架。我们的 AI 构建网站的 SEO 指南有更深入的说明。

第 7 步：发布并绑定域名

发布会把预览变成公开网站。大多数构建器会先提供免费子域名，适合测试和分享给朋友。如果是企业用途，请绑定你自己的域名：你可以通过构建器购买域名，也可以把你已有的域名通过 DNS 记录指向该网站。如何绑定自定义域名详细讲解了 DNS 部分。

上线后，请设置免费的 Google Search Console 账户，以便查看你的页面是否已被索引。

常见错误

• 一次性提出所有要求。 在一个提示词中包含十二个页面、一个博客、一个商店和一个会员区，结果每一部分都会很肤浅。应先构建核心页面。
• 发布占位文字。 上线前，在每个页面中搜索“Lorem”、“Your Company”以及编造的数字。
• 忽视移动端。 在手机宽度下检查每一个页面，而不只是首页。
• 行动号召含糊不清。 每个页面都应让下一步变得明确：打电话、预约、购买或联系我们。
• 忘记谁来更新。 如果有人每周都要编辑网站，请确保他们能够做到，要么通过与同一个构建器对话，要么选择带可视化编辑器的工具。

费用

用 AI 制作一个简单的网站，通常远比请人设计和开发便宜。需要规划的持续费用包括：

• 构建器。 大多数提供免费版用于体验，付费套餐则用于自定义域名和更多用量。
• 托管。 有时包含在套餐中，有时按用量计费。
• 域名。 每年的注册费用，取决于域名和后缀。
• 附加服务。 用于表单通知的邮件服务，或用于预约和电子报的付费工具。

什么时候模板式构建器更合适

请诚实地看待你的需求。如果你想要一个传统的宣传册式网站、一个便于非技术同事使用的可视化编辑器、一个支持定时发布的内置博客，或者一个由平台处理库存和配送的在线商店，那么基于模板的网站构建器或 Shopify 这类专门平台，可能比任何 AI 生成的代码都更适合你。当网站结构独特、经常变化，或者它是通往类应用功能的门户时，AI 应用构建器的优势才会明显体现出来。

用 Mythex 构建

Mythex 是一个 AI 应用构建器，而网站是人们用它构建最多的东西之一。你描述网站，它会在实时预览中（包括手机尺寸视图）构建出来，然后你发布到 yourname.mythex.app 地址；Pro 版允许你在 Mythex 中购买域名，或连接你已拥有的域名。如果搜索排名很重要，你可以要求生成普通的静态网站，而不是默认的 React 应用。参见静态网站和已发布应用的 SEO文档。

Mythex 不是内容管理系统（CMS）：营销团队没有单独的编辑登录入口，因此修改需要通过与构建器对话或直接编辑代码来完成。想跳过空白页面，可以从网站模板或作品集模板开始，每个模板都会打开一个带有预填初始提示词的新项目。

常见问题