AI prompts for Website Design

In this article, I will share some AI prompts for website design, which I use personally to save time. You could use the V0 ai tool, but since it does not support images. We will be using chatGPT.

 

Customization ChatGPT

Before diving into the prompt, you must do this setting for a better result.

 

Go to profile. Press on the Customize option. You will see the memory option if it has stored any previous command and cleared the memory for better response.

You could give custom coding commands also must say to ChatGPT to remember for future use.

 

Prompt Engineering with an Image

It is the most effective way to design a website layout, and you could also use any Figma image or screenshot to create a website design within minutes.

Let me take a screenshot of one of my website navbar. Also, it does have some icons. I’m using the Font Awesome icons on my website navbar.

 

Let's give it a shot. Add an image which you would like to copy the design from the website.

Prompt:- Create a layout similar to the image using NextJS while using module CSS/tailwind CSS, and you must use the react icon.

There we go, and that’s how you can create a website layout within a few minutes.

 

Prompt Engineering with Code

To get a better response, you must write a command effectively. Let me show you how to give a prompt with a code. Let me give you an example of code.

***import React from 'react'

const Contact = () => {
  return (
    <div>Contact</div>
  )
}

export default Contact***

If you see it in the code block, I have added three stars at the beginning and the end. That’s how you can give an AI a proper prompt for a better response.

Whether you’re debugging a code or want to add styling, this should work perfectly.