Code Smarter with AI: Use ChatGPT for Front-End Dev

Improve your front-end development with ChatGPT, an AI tool that helps with visual design, scripting, copywriting, and customization. Learn how to use ChatGPT in this tutorial to build better websites.

TL;DR

In this post we will learn how to use ChatGPT to do front-end development. My entire website is improved with the help of AIs, so I hope that after reading this article on how to build a front-end using AIs, you will start to see them as a tool that can extend you rather than replace you. Before we start, it is important that you know what a front-end is. Basically, the front-end is the visible side of the website, the part that the end user sees and interacts with. This includes things like the graphical user interface (GUI) and the visual design of the website.

Before starting with this tutorial I would like to thank @calummoore (CTO of Polybase) for giving me the idea to write this post, this post wouldn't be possible if it wasn't for his questions about the topic, thanks!

How to use ChatGPT to do front-end developent?

So how do we use ChatGPT to improve the front-end? ChatGPT can be used to help in a variety of front-end areas, such as:

  1. Visual Design: ChatGPT can be used to generate visual designs for websites. This includes user interface layouts, web page elements such as buttons, forms and input fields.
  2. Scripts and Logic: AIs can also be used to write all kinds of functions and functionalities (this is how I got the quantum moon effect that rotates in the second section of the home page of this site). This includes JavaScript scripts and other languages to enhance user interaction with the website.
  3. Copywriting: ChatGPT can also be used to generate content for the website. This is a useful way to improve the content of your website. This includes content such as titles, descriptions or even the texts that can go inside buttons. I love code but I'm not a big fan of all the black magic that needs to be done to optimize texts for good SEO.
  4. Whatever you want: You can use ChatGPT to make final adjustments before publishing any content, or to create a greeting for your 85-year-old grandfather as my roommate very cleverly did.

As you can see, ChatGPT offers a wealth of tools to improve the front-end of any website. If you are looking to improve your website, or even learn to code, AIs can help you achieve your goals, just remember: They will give you as much as you can get out of AIs.

Building a Front-end Component with IAs: The Cyberpunk Way

For this exercise we are going to use (of course) our beloved AI ChatGPT. As everything in this life the pen does not make the poet nor the lead the plumber, so to get the most potential out of this tool we will have to play a lot with it, which is good news!

For the sake of brevity we are going to style a component of this website, the banner with consistently large text and glitch effect. We're going to make the component go from this:

To something more cyberpunk and cool like this:

Instructing ChatGPT to Style a Front-end: The Importance of Context.

AIs are very good at listening and very bad at guessing things, so the most important thing when giving instructions to the AI is to be clear with what we want and give them all the necessary context, it is also very important to say please and thank you, it does not change the result but you should never lose good manners.

So let's start by giving it some context about the situation. This website is built using Nuxt and Tailwind for the styles, so let's give it all that information to help us.

Now our ChatGPT thread has more context about what we're going to work on, plus he seems to be happy to help us (that's because we were nice). As we can see thanks to telling him that the style will be cyberpunk he has given us back some aesthetic suggestions on color, he suggests neon green and purple colors, like Rebecca from Cyberpunk2077: Edgerunners (the waifu that broke our hearts 💔).

Now that we have some guidance let's give ChatGPT some code and ask it to describe what this component is doing.

The AI's response reveals that it does indeed know what is going on with this component:

With this prepared, let's get to work, we are going to ask for the text to be about 8x bigger and to have a glitch effect.

As you can see, ChatGPT has returned the title of the component with a style applied by tailwind, in addition to having created some CSS classes to apply a Glitch effect to the text. Here we can see the effect in action:

But this still doesn't look very cyberpunk, so let's give it more color. For this task we are going to ask it to change the color and the typography of the texts, also we will give a different color to the background.

Once we have applied the suggested changes, these would be the results:

We will make the title heavier using bold, give it a little more space and make the title 9x bigger on desktop and 8x bigger by default. We will modify the description to make the text white, make the text small and give it a lighter font (and we will use this same paragraph as input for the AI).

We apply the results and we modify it applying py-6 instead of mt-4. Once applied all the necessary changes this would be the result:

At this point it would only be left to style the buttons...but I don't want to take away the opportunity for you to play with the AI and feel like a kid with new toys again ✨

Conclusion

As we have been able to see AI can be a great tool when it comes to code, you just need to know what exactly you are doing, what you want to achieve and how you want to achieve it, because AI is an extension of our own capabilities, plus it can take care of the boring parts while we can focus on creating!

I hope this article has helped you to start working with AI in your work, or to start doing web development using ChatGPT's ability to bring another dimension to your work. If you have any questions or comments contact me, I'm always happy to advise more people about the tech world.

This has been written by a human, but are you a human too?

Send me a greeting on any of my networks to know that not only AIs are reading this content, and above all: For the human kind! ✊🏽