[요약] AI03: 미드저니, 피그마, ChatGPT로 웹사이트 구축하기 :: with AI

> English Summary

 

[ 요약 ]

이 글에서 저자는 HTML과 CSS를 사용하여 캐러셀 시스템을 구축하는 방법을 설명합니다.
먼저, 저자는 Figma에서 인터페이스를 디자인하고, UI 요소를 추적하고, 텍스트를 추가하고, 그라디언트와 그림자를 적용합니다.
그런 다음 작성자는 iPhone 사전 설정 중 하나를 사용하여 프레임을 만들고 UI 요소를 삽입합니다.
마지막으로 작성자는 헤더에 직사각형을 추가합니다.
독자는 단계별 지침에 따라 자신만의 캐러셀 시스템을 만들 것을 권장합니다.
이 글에서 저자는 이미지 왼쪽에 그라디언트를 만들고, 영웅 이미지를 수정 및 확대하고, 안정성 포토샵 플러그인을 사용하고, 마스크를 만들어 Figm에 배치하는 방법을 설명합니다.
그라데이션을 만들기 위해 선형 그라데이션이 있는 직사각형을 그립니다.
그런 다음 포토샵의 안정성 플러그인을 사용하여 프롬프트를 생성하고 이미지 크기를 조정하여 영웅 이미지를 수정하고 확대하는 방법을 설명합니다.
그런 다음 이미지가 Figma의 콘텐츠와 매끄럽게 혼합되도록 마스크를 만드는 방법을 시연합니다.
마지막으로 이미지를 PNG로 저장하고 Figma에 배치하는 방법을 알려줍니다.
독자는 단계별 지침을 따라 원활하고 매끄러운 디자인 이미지를 성공적으로 만들어야 합니다.
이 글에서 저자는 Figma에서 캐러셀을 만든 다음 AI 도구를 사용하여 HTML 및 CSS로 내보내는 방법을 설명합니다.
먼저 캐러셀에 이미지를 배치하고 프로토타입 모드에서 스마트 애니메이션을 사용하여 이미지 사이를 이동하는 인터랙션을 추가합니다.
또한 자동 애니메이션을 사용하여 두 프레임 사이의 색상을 일치시킵니다.
마지막으로 펜 도구를 사용하여 배경의 벡터 모양을 추적하고 HTML에서 사용할 수 있도록 SVG로 내보냅니다.
HTML/CSS 코딩 프로세스를 쉽게 하기 위해 저자는 Chat GPT와 같은 AI 도구를 사용할 것을 제안합니다.
독자들은 이 단계를 따라 Figma에서 자신만의 캐러셀을 만들어 보시기 바랍니다.
이 문서에서는 Chat GPT를 사용하여 HTML, CSS 및 JavaScript용 상용구 코드를 생성하는 방법을 보여줍니다.
작성자는 GreenSock 애니메이션 플랫폼을 사용하여 캐러셀용 코드를 생성하는 방법과 캐러셀 항목의 스타일을 지정하기 위해 CSS를 적용하는 방법을 보여줍니다.
또한 Chat GPT를 사용하여 플랫폼 스크립트 태그를 가져오고 사용자가 터치 또는 포인터 이벤트를 사용하여 캐러셀 항목 사이를 스와이프할 수 있도록 합니다.
이 문서에서는 Chat GPT를 사용하여 캐러셀을 구성하는 방법에 대한 단계별 가이드를 제공하며 독자들이 직접 시도해 보도록 권장합니다.
독자들은 Chat GPT를 사용하여 다양한 기능을 실험해 볼 수 있습니다.
이 문서에서는 현재 보기에 있는 캐러셀 항목을 기반으로 본문 태그에 클래스를 추가하는 방법을 설명합니다.
이렇게 하면 특정 클래스를 기반으로 페이지 내의 모든 스타일을 업데이트할 수 있습니다.
또한 저자는 Figma에서 CSS 그라디언트를 복사하여 캐러셀 사이를 전환할 때 변경되는 각 개별 페이지의 클래스에 붙여넣는 방법도 보여줍니다.
마크업을 생성하고 CSS 레이아웃을 조정하는 과정, 플렉스박스를 사용하여 원형 항목을 추가하고 Figma의 변수를 CSS로 다시 가져오는 과정을 살펴봅니다.
저자는 GitHub에서 코드에 대한 링크를 제공합니다.
따라서 독자는 단계를 따라 웹 페이지에 캐러셀 항목과 CSS를 추가할 수 있습니다.

 

반응형

 

 

 

AI03: Build a Website with Midjourney, Figma & ChatGPT

https://www.youtube.com/watch?v=_A_Jpr9HkGA 

 

 

 

[ Summary ]

In this article, the author explains how to build a Carousel system using HTML and CSS.
First, the author designs the interface in Figma, tracing out the UI elements, adding text, and applying gradients and drop shadows.
Then, the author creates a frame using one of the iPhone presets and inserts the UI elements.
Finally, the author adds a rectangle for the header.
The reader is encouraged to follow the step-by-step instructions to create their own Carousel system.
In this article, the author explains how to create a gradient on the left side of an image, fix and enlarge hero images, use the stability Photoshop plugin, create a mask and position it in Figm.
To create the gradient, they draw a rectangle with a linear gradient.
They then explain how to fix and enlarge hero images by using Photoshop's stability plugin, creating a prompt and adjusting image size.
They then demonstrate how to create a mask for the image to smoothly blend with the content in Figma.
Finally, they advise saving the image as a PNG and positioning it in Figma.
The reader should follow the step-by-step instructions to successfully create a seamless and smooth image for their design.
In this article, the author explains how to create a carousel in Figma and then export it as HTML and CSS using an AI tool.
They start by placing the images in the carousel and adding an interaction in prototype mode to navigate between them using smart animate.
They also match the colors between the two frames using auto animate.
Finally, they use the pen tool to trace a vector shape in the background and export it as an SVG for use in the HTML.
To ease the HTML/CSS coding process, the author suggests using an AI tool like Chat GPT.
The reader is encouraged to follow these steps and try creating their own carousel in Figma.
The article demonstrates how to use Chat GPT to create boilerplate code for HTML, CSS, and JavaScript.
The author shows how to generate code for a carousel using the GreenSock animation platform, and applies CSS to style the carousel items.
They also use Chat GPT to import the platform script tag and allow the user to swipe between the carousel items using touch or pointer events.
The article offers a step-by-step guide on how to construct a carousel using Chat GPT, and encourages readers to try it out for themselves.
Readers are invited to experiment with different features and functionalities using Chat GPT.
In this article, the author explains how to add classes to the body tag based on the carousel item that's currently in view.
This allows you to update all the styles within the page based on that specific class.
The author also shows how to copy CSS gradients from Figma and paste them into classes for each of the separate pages, which changes when you transition between the carousel.
The author goes through the process of creating markup and adjusting the CSS layout, using flexbox to add circle items and bringing variables from Figma back into the CSS.
The author provides a link to the code on GitHub.
So, readers can follow the steps and add carousel items and CSS for their webpage.