Framer 和其他人​​工智能工具如何帮助您构建自己的网站

如果您能想象出梦想中的网站,您就能把它变为现实。
AI-website builders like Framer allow you to create websites from text prompts.
使用人工智能构建网站无需您了解任何代码,甚至无需设计技能。David Nield/Popular Science 供稿

目前人工智能领域最热门的趋势是生成式人工智能,它可以通过简单的文本提示生成整篇文章逼真的图像。现在,您也可以利用这项技术来构建网站。

易于使用的网站构建器,无需任何编码,如今已是普遍现象,而这些由人工智能驱动的平台使得在网络上留下自己的印记变得更加容易。它们允许您跳过拖放的步骤,将您对网站外观的简要构思转化为一个功能齐全的网站。

在本指南中,我们将使用Framer,这是我们目前找到的最好的AI驱动的网站构建器之一。该平台还提供托管服务,对于带宽高达1GB、每月访客数量不超过1000人的网站,可以免费使用,但您可以付费订阅(每月5美元起)来移除这些限制。

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

通过提示词创建AI生成的网站

前往Framer注册一个免费账户。进入Framer的正确界面后,您会在屏幕中央看到一个“Start with AI”(开始使用AI)按钮,点击它即可开始构建您的网站。

在弹出的提示词框中提供的信息越详细,您获得的结果就越好。如果您在输入提示词前等待几秒钟,屏幕上会显示一些有用的示例,可以帮助您构思自己的提示词:包括网站的名称和目的、您想要的风格(例如“活泼”或“专业”)以及网站应包含的不同元素(例如作品集或注册表单)。

AI-generating tools like Framer can help you build websites with text prompts.
文本提示词越完整,AI生成的結果就越好。David Nield/Popular Science 供稿

在输入提示词时,您会看到输入框下方有一个进度条,它会确保您输入了足够的信息来生成页面。尝试在停止输入前将进度条填满,如果您想提供更多信息,可以继续输入。完成后,点击“Start”(开始)

平台将在您眼前构建您的网站,添加受您提示词启发的图形和文本。Framer生成的所有网站都是响应式的,这意味着它们可以自动适应不同尺寸的屏幕。如果您想查看您的网站在平板电脑或智能手机上的显示效果,可以通过滚动来查看这些不同的布局。如果您对生成的设计不满意,可以点击右侧的“Regenerate”(重新生成),或者如果您认为有必要,可以编辑您的提示词。

屏幕右侧,您可以选择各种调色板和字体来完善AI生成的设计。通过点击调色板按钮,您可以循环浏览不同的颜色,查看它们的外观。您也可以点击网站的某个特定部分,然后点击右侧的“AI button”(AI按钮)(显示两颗星的图标),以查看该特定部分的颜色选项。

点击齿轮图标(右上角)以编辑各种设置,包括网站名称和描述。在这里,您还可以设置在社交媒体上分享您的网站时显示的缩略图。如果您懂HTML并想直接在代码中添加所有这些细节,也可以在此访问。在界面的右上角,您会看到一个播放按钮,点击它可以预览您的网站在浏览器中的外观。

调整设计和添加内容

尽管Framer的AI引擎非常出色,但它不太可能将所有内容都完美地按照您的喜好呈现。要进行更改,只需点击图片或文本框即可调出布局和效果设置等选项。双击即可更改实际图片或输入您自己的文本。

右键点击您网站上的任何内容,还会出现更多选项。您可以删除、移动和复制块,还可以更改它们的对齐方式,以及编辑它们与其他块的链接,以便将它们作为一个组移动。您可以使用Ctrl+Z(Windows)或Cmd+Z(macOS)撤销任何错误。

The Framer interface allows you to edit any AI-generated website resulting from your prompt.
一旦AI生成的网站构建器呈现出您喜欢的结果,您就可以随心所欲地进行调整。David Nield/Popular Science 供稿

如果您想为网站添加全新的部分,请点击“Insert”(插入)(左上角):内容范围包括作品集页面、页眉和页脚,到网页表单。Framer将在每种情况下指导您完成创建过程。颜色和风格将与您网站的其余部分匹配,您可以点击并拖动来重新定位任何新元素,如果您需要的话。

Framer内置了一个CMS(内容管理系统):点击顶部的“CMS”,然后点击“Add Blog”(添加博客),将其附加到您的网站上,使用您已经确定的风格和颜色。您将看到博文的索引页(显示在您的主页上)以及每篇博文的单独页面,其中包含一些示例内容。要查看所有博文、添加新博文以及删除现有博文,请点击顶部的“CMS”

双击任何博文进行更改。您可以更改文本样式,添加链接、图片和视频,并通过子标题分割博文。Framer会自动保存您的所有更改,因此您无需担心丢失任何工作。同时,帮助也始终可用:从平台的初始屏幕,点击Framer图标(左上角),然后从菜单中选择“Help”(帮助),查看用户的常见问题解答。

在右上角,您会看到“Publish”(发布)按钮,它将使您的网站上线。您也可以稍后使用此按钮来应用您在网站上线后所做的任何未来更改。如果您免费使用Framer,您将获得一个framerm.ai域上的自定义URL,并且您的网站右下角会叠加一个小的Framer水印。

 

更多优惠、评测和购买指南

 
© .