自从去年 11 月 ChatGPT 发布以来，互联网上就一直在热烈讨论人工智能网页设计工具的可能性。
一些人吹捧它能够轻松地吐出网站文案并提出图像创意，以此简化流程并让设计师腾出时间来完成工作中更需要大脑和创造性的部分。但其他人则更持怀疑态度：人工智能生成的结果可能存在偏见、不准确，甚至抄袭。
目前还很难说它会对设计界产生什么影响。但对如何使用它们的基本了解是一个很好的起点。本文探讨了如何使用人工智能工具来协助您的网页设计过程，以便您可以自己测试该过程并权衡其利弊。
以下是有关如何使用图像生成器Midjourney和文本生成器ChatGPT等 AI 工具创建网站的分步指南。
人工智能如何应用于网页设计？
许多网页设计师将人工智能工具视为创意助手，可以帮助日常操作并协助日常网络活动。人工智能可以帮助完成许多网络任务
创作者每天都会面临这样的问题：
建议网页设计想法。
ChatGPT 是一个文本到文本工具，这意味着它接受文本作为输入，并根据它生成输出。您可以向 ChatGPT 询问“为销售鞋子的促销页面提出想法”之类的问题，您将看到为您生成的想法列表。
生成图像。
Midjourney 和Dalle-2等工具可以生成网页设计师可以使用的视觉效果，而不是库存图像。值得注意的是，虽然这些工具非常适合生成抽象背景，但在描绘人类时它们有一些缺点：它们可能会在人手上添加额外的手指，添加额外的腿，以及不正确的属性。因此结果通常需要人工审查和改进。
生成真实副本。
网页设计师可以要求 OpenAI 的 ChatGPT 使用“写出好运动鞋的关键特征”等提示来生成相关文本，而不是使用 Lorem Ipsum 占位符文本。一些设计师更喜欢通用的 lorem ipsum 填充副本，但拥有真实的副本对于网页设计过程非常重要。它允许您充分对齐内容块并创建更相关的页面视觉层次结构。
编写代码。
ChatGPT 可以为各个 Web 元素生成不错的代码示例。与图像类似，人工智能生成的代码样本也需要审核和细化。
关于如何使用 AI 工具制作网站的视频，由 Codex 制作，Codex 是一个“致力于网站设计和开发的未来”的 YouTube 频道。截至发布时已有 190 万次浏览。
如何使用人工智能工具创建网站
使用人工智能工具创建网站在进入编辑器之前需要两个额外的步骤。第一步是使用 Midjourney 生成页面结构。然后，您将使用 ChatGPT 生成内容，最后将设计和内容组合到 Web 布局中。
1. 创建网页布局
您需要做的第一件事是以高保真度为您的未来页面创建布局，文本到图像人工智能生成器 Midjourney 可以帮助您完成此任务。用户提交文本提示并收到由 Midjourney 生成的可视化想法。很多人使用此工具来生成填充网站的图像，但您也可以使用它来创建网页布局。
要生成图像，您需要在聊天中键入命令“/imagine [您想看到的内容]”。在我们的例子中，我们需要提供像“/想象一个漂亮的鞋子网站”这样的提示来查看人工智能生成的网页设计。正如您所看到的，Midjourney 能够为我们生成英雄部分的一些变体。有些比其他更有用。
我们在提示中表达的意图越好，中途为我们生成正确的可视化的机会就越大。由于我们想要为网站创建设计，因此最好在提示中明确提及“UX”、“UI”等关键字，以便该工具能够理解我们想要查看网页布局。
/想象一下关于鞋子、ui、ux、ui/ux 的漂亮网站”
中途还允许您添加视觉参考以及文本提示。例如，您可以在 Pinterest、Dribbble 或 Behance 等资源上找到您喜欢的网页设计，并将其作为输入信号与文本提示一起提供给 Midjourney。该工具会将文本提示与您添加的图像进行匹配，并且更有可能为您生成相关图像。有时，人工智能工具会创建与您提供的图像非常接近的副本作为参考，因此调整系统提供的输出非常重要，以避免复制其他设计师的作品及其潜在的法律影响。
您可以在中途提示中添加一些关键字，以获得更贴近您特定需求的更高质量的视觉设计。例如，您可以在提示中添加关键字“HQ”和“4K”，该工具将理解您希望看到高质量的网页布局可视化：
/想象一下关于鞋子、ui、ux、ui/ux、HQ、4K 的美丽网站”
中途有一些严重的缺点。例如，您可能注意到该工具生成的图像上的文本是乱码。中途还经常给图像添加视觉噪音，例如额外的、不必要的图形细节（例如前面提到的额外手指，或背景上的额外装饰细节）。因此，在网页设计中使用此输出之前，您可能需要在照片编辑器中对其进行一些润色。
2. 为网站撰写内容
精心制作的文案直接影响访问者对您网站设计的看法。在设计网页布局时，网页设计师经常使用 Lorem ipsum 占位符文本而不是实际副本，但OpenAI 的 Chat GPT 等人工智能工具通过生成人工智能生成的网站内容提供了一种新的替代方案。
ChatGPT 可用于执行您不想自己完成的各种任务，例如编写营销文案、产品描述，甚至是网页的整个文案。我使用 ChatGPT 生成登陆页面的完整内容，包括访问者操作的错误和成功消息。尽管我必须验证副本并在某些方面进行返工，但总体结果非常好，因为该工具有助于加快我的设计过程。
与中途类似，您在提示中表达得越好，响应就越相关。您需要指定足够的详细信息，以便该工具准确理解您想要查看的内容。例如，您可以说“为宣传运动鞋的着陆页提供内容。英雄和产品功能部分的内容。” 如您所见，我们在提示中提到的部分与 Midjourney 生成的设计中的部分相匹配。
ChatGPT 倾向于生成长文本，因此您可能需要在将其添加到实际设计之前调整其输出。但 Chat GPT 的伟大之处在于，您可以提出后续问题以获得更相关的回复。假设该工具为号召性用语按钮生成了文本，而您不喜欢它。您可以创建后续提示，让该工具生成更接近您想法的复制替代方案，例如“为号召性用语按钮生成更多文本示例”。
3. 将我们的设计变成一个功能齐全的网站
获得页面设计和内容后，将它们用作创建网页的参考。
定义页面结构后，您可以复制并粘贴视觉元素，例如 Midjourney 生成的鞋子图像，并使用 ChatGPT 生成的文本填写内容块。
人工智能工具在网页设计过程中的作用
很多设计界人士都关心人工智能工具，以及人工智能是否会取代平面设计师。
这是有原因的。人工智能工具正在导致创造和复制之间的界限变得模糊。艺术家们对 Midjourney、Stability AI 和 Stable Diffusion提起集体诉讼，指控他们在未经同意的情况下使用从互联网上抓取的艺术家图像来训练他们的工具。一些有影响力的人将这项技术定位为快速致富的一种方式，出售其潜在的产出数量，而不是可靠的质量。在某些情况下，客户实际上选择人工智能工具而不是雇用创意人员，就像英国 Studio AAA 最近发生的情况一样。
但如果使用得当，人工智能工具的主要目标是提高使用者的效率。人工智能工具可以使设计过程更加高效，并被定位为将网页设计师从日常操作（例如编写真实的副本）中解放出来的一种方式，让他们有更多的时间来尝试设计并寻找非常规的解决方案。一些工作室，如奥美巴黎，使用这些工具来启动创意活动。
掌握人工智能工具的网页设计师可能比其他设计师拥有显着的竞争优势，因为他们能够更快地从构思到最终设计。最终，人工智能网页设计是关于共同创造，而不是共同选择。
