ChatGPT: AI Chatbot That Helps You Design Websites

Last updated on February 13, 2023 by Cameron Sheppard

Along with talks of unidentified objects in the sky and natural disasters, AI chatbots have taken the spotlight in recent weeks. Famous for their ability to provide human-like text faster than a human ever could, it’s no wonder people try to utilize them for various purposes such as schoolwork and copywriting.

But today we shift the lens of AI’s involvement in publishing towards its involvement in the website design process. In this article, we’ll explore all things ChatGPT: what it is, how to use it, and even some prompts you can use to use it efficiently.

First off, what is ChatGPT?

ChatGPT is an artificial intelligence (AI) chatbot, in which you enter prompts and receive a response. For example, here’s how it responds when asked to describe itself in two sentences: “ChatGPT is a language model developed by OpenAI. It uses deep learning techniques to generate human-like responses to various topics.”

OpenAI is a San Fransisco startup that was co-founded in 2015 by Sam Altman and Elon Musk and has received investing from many big names like Microsoft.

The capabilities of ChatGPT in web design

Since ChatGPT will respond to anything you ask it, (with the exception of inappropriate requests) you can expect to receive information on the broadest topics to the most specific ones. To illustrate this, let’s start with the basics by asking it to outline some steps of the website design process:

As you can see, it provided eight steps and went into general detail about each one. Even though it’s basic, ChatGPT is already looking amazing. Plus, we got a response way quicker than we could by asking a human!

Say you are a bit more experienced and want to learn about some advanced web design topics. Well, ChatGPT can help you too. Take a look at its response when asked to go into detail about CSS preprocessors:

Look at that, it even included popular examples of CSS preprocessors and their advantages! I admire ChatGPT for going above and beyond always, while some of us designers admittedly do the bare minimum on our bad days.

How to get started with ChatGPT

To access the seemingly infinite knowledge that ChatGPT has to offer, you might think there is money involved. While OpenAI recently introduced a paid subscription for $20/month, most of the features still run at the four letters everyone loves to hear: free.

However, please note that you still have to create an account, and part of the verification process includes entering your phone number. Don’t fear though, because OpenAI only uses this information to ensure humans interact with its platform. Read more here.

With that out of the way, you can start by heading to chat.openai.com and clicking the green “Sign up” button. From there, you should see the sign up page with the heading, “Create your account.”

Enter your email address and click “Continue.” After that, enter a secure password that is at least eight characters in length. Click “Continue” again, and you should be sent to a page that notifies you to check your email, similar to the one below:

Find the email in your inbox, and if it’s not there, click the green “Resend email” text. Open it and click the button that says “Verify email address” (or link if the button isn’t there). You should be sent to a page asking for your first and last name:

Enter the information and click “Continue” again. Make sure you agree to their terms and you’re 18 years or older. Next, enter your phone number, following the format for your country. For some countries, you may also be able to send a code via WhatsApp. Click “Send code.”

Keep in mind that you cannot use a Voice Over Internet Protocol (VoIP) number, which is a fancy term for a virtual phone number like one provided by Google Voice.

You should receive the code by an SMS text message. Enter the code, click “Continue,” and you’re in!

You may have noticed earlier that there were two other sign-up options on the first page, “Continue with Google” and “Continue with Microsoft.” These options allow you to bypass the email verification, but you still need to provide your name and phone number.

Now that you’re in, you should see ChatGPT’s main page and UI:

Let’s break down what you see here. At the bottom of the page, there is a text entry field which is where you will enter prompts. At the top left, there is a “New chat” button which does what it says it does. ChatGPT allows you to have multiple chats running at one time and remembers them even when you close the tab.

The bottom left panel allows you to upgrade to Plus, toggle between light mode and dark mode, visit the OpenAI Discord, open the Updates & FAQ page, and log out. At the center of the page you should find some examples, capabilities, and limitations of ChatGPT.

Best ChatGPT prompts for web design

If you haven’t picked up on the idea already, prompts are chats you use to start a conversation or command a task with AI, in this case ChatGPT. As I go through each of the following prompts, I’ll maintain consistency by using one imaginary situation: you’re designing a website for a local business that provides wedding photography to high-playing clientele.

What are some pages I should include? Go into detail.

Using the aforementioned situation of a wedding photography business, here is the lengthy but detailed response we received from ChatGPT:

Although basic, this information is valuable and will save you time in the mindless back-and-forth of wondering where to start on a website. I think this is a good response, but let’s take it one step further with the Portfolio page.

What are the best plugins for ____?

One of the best things about ChatGPT is that it remembers what you previously said in the conversation. Using the website structure that the chatbot has recommended for our local wedding photography business, let’s ask it what the best WordPress plugins are for a solid Portfolio page:

Look at that! ChatGPT has given us five highly rated WordPress plugins and analyzed the unique benefits of each one. No more time spent searching, you can now use that mental energy on actually testing and implementing the plugin.

Write a mission statement for the About Us page.

Although it is technically copywriting, mission statements are a major piece in any website’s puzzle. But any designer that has written one of these can tell you it’s boring at best. Luckily, it’s 2023, and we can direct AI to hold our hand through the entire process.

When requesting that ChatGPT create written content, it’s important to be crystal clear. Include everything from the tone to the main idea, because otherwise you will receive copy without a soul. For example, we will use the following prompt to obtain our mission statement:

Write a mission statement for the About Us page with the following ideas in mind: a serious but funny tone, family-owned, started in 2014, a mission to capture lasting memories of special wedding days.

If you were a couple pondering which photographer to choose, wouldn’t this mission statement make it obvious? Throw in a few black-and-white photos of the perfect wedding day and you’ll have yourself an About Us page that checks everything off the list. Attention? Check. Emotions? Check. Desire? Check.

Code a form for the Contact page where clients can request photography services.

ChatGPT isn’t just limited to a brainstorming session or writing copy, it can also code. This can be anything from creating a simple HTML page or even optimizing Mario 64. But be warned, because its code can often contain errors.

With that being said, let’s use the following prompt to generate a contact form for the Contact page of our website:

Code a form for the Contact page where clients can request photography services. The form should have name, email, phone number, time & date, and length of wedding fields.

Of course, you would have to style the form on your own. But the most important thing is that it gets the job done.

One major downside: unhuman

With all the things it can do, ChatGPT seems too good to be true. With light, there has to be darkness, and with pros, there has to be cons. From that idea arises the only major downside I can find: the AI chatbot misses that human touch.

Text generated by ChatGPT lacks depth, which makes sense because it’s artificial intelligence, but it does so to the point where it’s just mediocre. In the business world and pretty much everywhere else, mediocre is definitely something you should try to avoid.

There are also AI detectors, which are becoming more and more accurate by the day in their efforts to identify content created by ChatGPT. Some experts worry that search engines will implement these tools and punish websites for using AI-created content.

ChatGPT is a good tool to have in your web design arsenal, but like everything in life, don’t overuse it. You may need it whenever you run out of ideas and just need some inspiration, but don’t use it to write an entire 1000-word blog post. Instead, follow my tutorial to write blog posts faster.

Final thoughts

ChatGPT can be a boon to your website design process, but it’s important to use it in the right ways. From me to you, make sure to stay human and have a good day.