Framer 和其他 AI 工具如何帮助你建立自己的网站

目前人工智能领域最热门的趋势是生成式人工智能，它可以根据文本提示生成整篇文章或逼真的图像。现在你也可以使用这项技术来构建网站。

易于使用且无需任何编码的网站构建器如今已非常常见，但这些由人工智能驱动的平台让您在网络上留下自己的印记变得更加容易。它们让您无需拖放，只需将网站外观的简要概述转变为功能齐全的内容。

在本指南中，我们使用 Framer，这是我们迄今为止发现的最好的 AI 网站构建器之一。该平台还提供托管服务，对于带宽最多为 1GB 且每月访客数为 1,000 的网站，它是免费使用的，但您可以付费订阅（每月 5 美元起）以消除这些限制。

留意其他类似的 AI 网络工具。未来可能会出现新的、更好的工具，同时成熟的网站创建服务也会添加自己的 AI 工具。

使用提示创建 AI 生成的网站

前往 Framer 获取免费帐户。进入正确的 Framer 界面后，您会在屏幕中间看到一个“使用 AI 启动”按钮 — 单击它即可开始构建您的网站。

您在弹出的提示框中提供的详细信息越多，您获得的结果就越好。如果您在输入提示之前等待片刻，您会看到屏幕上出现一些示例，这些示例将对您自己有用：包括网站的名称和目的、您想要的风格类型（如“有趣”或“专业”）以及网站应包含的不同元素（例如作品集或注册表单）。

在您输入提示时，输入框底部会出现一个进度条，用于确保您已输入足够的详细信息来生成页面。在停止输入之前，请尽量让进度条完全填满，如果您想提供更多信息，可以继续输入。完成后，点击“开始” 。

该平台将在您眼前构建您的网站，并根据您的提示添加图形和文本。Framer 制作的所有网站都是响应式的，这意味着它们会自动适应不同尺寸的屏幕。如果您想查看您的网站在平板电脑或智能手机上的外观，您可以滚动查看这些不同的布局。如果您对最终的设计不满意，请点击右侧的“重新生成”或编辑您的提示（如果您认为需要）。

在屏幕的右侧，您可以选择调色板和字体来完善 AI 生成的设计。您可以单击调色板按钮来循环显示颜色，以查看每种颜色的外观。您还可以单击网站的单个部分，然后单击右侧的AI 按钮（显示两个星号的图标）以查看该特定部分的颜色选项。

点击齿轮图标（右上角）可编辑各种设置，包括网站名称和说明。您还可以在此处设置在社交媒体上分享网站时显示的缩略图。如果您了解 HTML 并希望将所有这些详细信息直接添加到代码中，也可以在此处访问。在界面的右上角，您会看到一个播放按钮— 单击它可以预览您的网站在网络浏览器中的外观。

调整设计并添加内容

Framer 的 AI 引擎虽然令人印象深刻，但它不太可能让一切都完美地符合你的口味。例如，要进行更改，只需单击图像或文本框即可调出布局和效果设置。双击即可更改实际图像或输入自己的文本。

右键单击您网站上的任何内容，就会出现更多选项。您将能够删除、移动和复制块，以及更改它们的对齐方式并编辑它们链接到的其他块，以便将它们作为一个组移动。您可以使用Ctrl+Z （Windows）或Cmd+Z （macOS）撤消任何错误。

如果您想向网站添加全新的部分，请点击“插入” （左上角）：从作品集页面到页眉和页脚，再到 Web 表单，应有尽有。Framer 将指导您完成每种情况的创建过程。颜色和样式将与您网站的其他部分相匹配，您可以单击并拖动以重新定位任何新元素（如果需要）。

Framer 内置有 CMS（内容管理系统）：单击顶部的CMS ，然后单击添加博客，使用您已设置的样式和颜色将博客附加到您的网站。您将看到帖子的索引页（在您的主页上可见）和各个帖子页面本身，其中添加了一些示例内容。要查看所有帖子、添加新帖子和删除现有帖子，请单击顶部的CMS 。

双击任何博客文章即可进行更改。您可以更改文本样式、添加链接、图片和视频，以及使用副标题拆分帖子。Framer 将自动保存您的所有更改，因此您不必担心丢失任何工作。帮助也随时可用：在平台的正面屏幕上，单击 Framer 图标（左上角），然后从菜单中选择“帮助”以查看用户的常见问题。

在右上角，您会看到“发布”按钮，该按钮会将您的网站发布到互联网上。您也可以稍后使用此按钮应用您对网站所做的任何更改（一旦网站已经发布）。如果您免费使用 Framer，您将在 framer.ai 域上获得一个自定义 URL，并且您的网站右下角会叠加一个小的 Framer 水印。