使用7种AI工具设计网站... (Relume AI, MidJourney, ChatGPT等)

AI 网站建设工具使用

• 今天我打算利用各种人工智能来设计一个网站，看看最终效果如何

• 首先我将使用 relum 进行网站的线框设计，他们为像素设计师和 webflow 开发者提供了很多工具

• 我给它提供了公司描述，然后点击生成，让 AI 进行操作

• AI 迅速生成了网站的基本站点地图，我们甚至可以自定义每个部分，从而更多地控制结果

• 在顶部，我们可以切换至线框模式，它会根据站点地图生成线框

AI 网站建设工具使用

设计与开发

• 使用relum库为webflow和figma创建部分和组件，加快设计和开发速度。

• 在继续使用relum之前，我会先到dribble制作心情板，收集一些项目灵感。

• 制作心情板并没有确切的科学方法，只是在寻找我喜欢的东西，比如颜色、部分的运用以及产品展示方式。

• 收集完灵感后，我会审查线框图，根据收集的灵感和想法进行调整，确保它看起来符合我的预期。

• 例如，如果我只需选择主视觉部分，就可以选择替换组件，并从他们的库中选择适合这个设计的不同主视觉部分。

• 一旦做出选择，relum的另一个AI工具relum ipsum还会根据我的公司描述生成文字内容。

• 如果你想自己尝试relum ipsum，我在描述中放了我的会员链接。

设计与开发

项目设计和品牌建设

• 他们有一个不错的插件，可以直接在设计文件中运行，并生成一些好的文字内容，所以一定要去了解一下。

• 通过不断在站点地图和线框图之间来回切换，调整各个部分，使它们更加连贯，我们完成了线框图。现在我要导出，我要将它导出到 Figma。在 Figma 中，我只需选择我的项目，添加我的线框图。如果你想尝试这个功能，需要注意的是，我相信将其导入到 Figma 是一项付费功能，使用 starter 或 Pro 计划将允许你这样做。

• 借助人工智能的力量，我们在 Figma 中得到了我们的线框网页。它带有一个移动版本，但我将其放到了阴影领域，因为我们在这个视频中不会使用它，我把它放在了另一页。

• 接下来，让我们创建品牌形象。我们需要一些颜色，所以我们将前往 aicolors.com。我会给它一个描述性的提示，超轻的有机绿色搭配桃粉色，这样我们就得到了我们的调色板。最后，对于品牌，我们需要一个标志，所以我会去 Mid Journey 找。对于提示，我选择了现代简约的莲花标志，黑白自然花卉，然后我给了一个可选参数，即无色彩。

项目设计和品牌建设

设计流程概述

• 通过vectorizer.ai进行矢量化处理，使用chatGPT生成公司名称并结合字体和配色方案制作logo。

• 优化线框图，调整尺寸、按钮和样式，确保设计看起来像实际设计。

• 添加产品图片和使用场景照片，使整体页面视觉上更吸引人。

• 注重保持视觉吸引力和内容的一致性，调整配色方案和字体大小。

• 设计中心部分为产品照片，两侧添加使用场景照片，突出对比。

• 中心部分背景色将选择较亮的颜色，增强对比度。

设计流程概述

布局设计和视觉元素

• 布局设计中添加了几个不同的突出元素，其中我特别喜欢这些分块部分的美学，它们并非全宽，并且有这些漂亮的圆角。

• 我们使用了Ai来制作线框图，然后稍作修改。对于视觉元素的设计，我喜欢在整体布局中增加突出的绿色，给人一种清新的感觉。

• 我把标题的字体换成了Cabinet grotesque，并把所有按钮的权重从普通调整为中等。虽然还没有完全达到预期，但整体已经显得更加时尚。

• 除了布局和视觉设计，产品也是品牌建设中不可或缺的部分。我们前往Mid Journey生成了一些产品，最终选择了一款白色背景、极简风格的护肤品图片，经过处理后放置在场景中。

• 通过不断调整，现在我们的网页看起来更加清新、时尚，并且产品也融入其中，整体形象更加完整。

布局设计和视觉元素

AI工具在设计中的应用

• 通过使用AI工具，完成了有机护肤公司的首页设计，包括更新产品照片、调整页面布局和添加细节设计。

• 总共使用了七种AI工具，包括relum AI生成线框图、relum ipsum创建文案、mid journey设计logo和产品照片、vectorizer进行logo向量化、chat GPT提供公司名称、AI colors确定配色方案，以及photoshop AI进行产品照片处理。

• 作者强调实际客户项目与使用AI工具设计的过程不同，大部分工具和资源更适合用于灵感和参考，而不是在设计过程中大量使用。

AI工具在设计中的应用

Conclusion:

通过这篇文章，了解了利用人工智能工具进行网站设计的全过程，包括线框设计、品牌建设、项目设计、网站布局和视觉元素设计等。AI工具的应用加速了设计和开发速度，提供了许多灵感和参考，但在实际项目中需谨慎使用。