使用Midjourney、Figma和ChatGPT构建网站

HTML和CSS中的Carousel系统设计

• 首先在figma中构建Carousel系统，以便能够在各个数值之间进行过渡。

• 在HTML中构建Carousel系统。

• 在mid-journey生成的图像中，我们进行了UI UX界面设计，放置在一起，并使用了两个图像。

• 使用B hands dribble美丽的颜色创意应用市场进行界面设计，将质量设置为2，样式化为1000，并使用了第4版的模型。

• 打开figma并从mid-journey将图像导入其中，然后创建框架，因为这是移动UI，所以我们只需选择iPhone预设之一。

• 在界面上勾勒出一些UI，使用椭圆工具按住option和shift键可以从中心绘制出完美的圆形，然后复制每个圆形，确保它们均匀分布。

• 移动它们以便我们可以使用颜色选择器工具从每个圆形中提取渐变。

• 然后选择它们所有并应用阴影。

• 然后在界面上放置文本，将颜色、位置和字体进行匹配。

HTML和CSS中的Carousel系统设计

UI设计过程

• 我们需要调整UI中文本的大小，同时还需要追踪一些图形的形状、边框和线条。

• 在我们的框架中，我们首先要画一个矩形作为页眉，并使用渐变效果。

• 接下来，我们用另一个矩形在左侧创建渐变效果。

• 然后，我们需要修正这些主视觉图片，打开完整的图片并在Photoshop中进行调整。

• 将其中一张图片复制并粘贴到新文档中，然后对其进行放大处理。

• 使用Photoshop插件对图片进行稳定化处理，并设置宽度和高度为1024像素。

• 重复这些步骤，处理另一张主视觉图片。

UI设计过程

创建遮罩

• 首先，我们要创建一个遮罩，使其与我们的内容无缝衔接。

• 接下来，我们选择钢笔工具，绘制出我们想要清晰边缘的路径。

• 然后，右键点击路径，选择创建矢量遮罩。

• 在图层面板中，点击遮罩按钮，使用魔术棒工具选择图像边缘的内容。

• 接着，选择遮罩，使用画笔工具将其涂黑。

• 确保取消选择，然后选择遮罩图层，使用较大的画笔，围绕图像绘制渐变，使其与内容无缝衔接。

• 最后，以 PNG 格式保存图像。

• 将图像放置到 Figma 中，并调整位置。接着，我们开始制作我们的轮播。

• 将另一张图像放入轮播中，并向右偏移。

• 然后，简单复制我们的画框，选择这两个项目并将它们移回到左边，以便我们的新页眉图像出现在视野中。

• 选择第一个页眉图像，进入原型模式，添加一个交互，并设置拖动时导航到另一个画框，确保是智能动画。

• 对另一个页眉画框执行相同操作，只是方向相反。

创建遮罩

Figma原型的制作和HTML/CSS的构建

• 我们通过在两个标题图像之间进行轻扫操作来预览原型，然后需要在第二帧匹配另一个视图的所有颜色。

• 完成后，我们可以预览原型，由于我们使用了自动动画，它会自动在两个视图之间过渡颜色。

• 然后我们可以使用钢笔工具在背景中跟踪矢量形状，将其导出为SVG并引入HTML。

• 用AI工具来辅助制作HTML和CSS，通过请求ChatGPT创建HTML模板，然后粘贴到HTML文件中。

• 借助ChatGPT，我们可以请求生成CSS嵌入的脚本标签，然后将所有内容连接起来，在浏览器中进行测试。

Figma原型的制作和HTML/CSS的构建

创建并定制轮播图

• 使用chat GPT向调用Green Sock动画平台创建轮播图

• 将生成的HTML代码复制到HTML文档中，然后添加CSS样式

• 在JavaScript中编写代码

• 使用CSS样式对轮播图进行定制，使其在页面上呈现不同的样式

• 忘记导入Green Sock动画平台的脚本标签，需要chat GPT提供导入的脚本标签

• 生成了一个自动导航的轮播图，需要让用户可以进行交互操作，需要向chat GPT咨询如何实现用户可以在不同的轮播图项之间进行切换

• 最终确定了使用触摸事件和指针事件的代码，以适配桌面和移动端

• 将相关代码复制粘贴到JavaScript文件中，实现了左右滑动切换轮播图项的功能

• 替换HTML中的轮播项为主图像，并调整了部分CSS样式以确保页面布局和图片选中效果

创建并定制轮播图

更新页面样式

• 通过在body标签中添加一个基于当前轮播项的类，我们可以根据所在页面更新所有的样式。

• 在JavaScript中添加了相关代码，并对当前页面变量进行了一些调整以确保其正确运行。

• 需要在页面切换时和初始加载时调用这段代码，这样就能实现在切换页面时更新样式类。

• 接下来要做的是在Figma中复制页面背景的CSS渐变，并粘贴到各个单独页面的类中，这样在轮播切换时背景也会随之变化。

• 然后需要为另一个视图重复这个步骤，同时还会通过flexbox添加圆形项目，并复制粘贴figma中的渐变。

• 最后，根据Figma中的变量，调整CSS布局，创建标记，并将变量带回CSS中。

• 这样就能实现页面样式的更新，而且作者将所有源代码都放在了GitHub上。

更新页面样式

Conclusion:

本文详细介绍了如何使用Midjourney、Figma和ChatGPT构建网站，从HTML和CSS中的Carousel系统设计到UI设计过程，再到Figma原型的制作和HTML/CSS的构建，以及创建并定制轮播图以及更新页面样式。这些方法将帮助你打造出令人满意的网站。