Today I got access to GPT vision. Being a frontend web designer by trade I decided to see if I could build a semi functional website homepage concept just using Midjourney and GPT4. The results are a game changer for frontend web designers like myself.
For those who have been living under a rock for the past week, or are just not as enthusiastic about AI as me, GPT4 now has the power to see. To get this functionality you will need to be on the paid GPT plus subscription. What it allows you to do is upload any image of your choice and GPT4 will be able to see what you have uploaded, and describe it back to you. This functionality opens up so many doors, and will become a powerful tool in your content creation toolbox. I wanted to see if it could help me with my job as a front and web designer. So let me show you what I did and how you can do it too.
STEP 1: UX/UI homepage wireframe concept in Midjourney
I am a huge fan of Midjourney and have a had some great success using it to inspire me with wireframe concepts, that I use as a starting block in my creative design cycle. Here is how to prompt in Midjourney for a wireframe concept:
/imagine: ux/ui website homepage wireframe for a [CONCEPT DESCRIPTION]
For this article I used the following simple prompt…
/imagine: ux/ui website homepage wireframe for a t-shirt selling business
Here is the result I selected…
When you go through this process you will need to refine and reiterate your prompt until you get the result that you want. You can then take this idea and use it to inspire your own wireframe design or if you are in a hurry and just want to build something quickly, you just take the image from Midjourney and upload it straight to GPT4. Which is what I did for this example. Let me show you how to do this next.
STEP 2: Show GPT4 your wireframe and get it to build for you
Here are the exact steps, and prompts, that I used to get GPT4 to understand my wireframe and turn it into code that can be quickly deployed.
Step 2.1: Upload your wireframe and get GPT4 to describe it
In the chat GPT message bar you will see a + icon to the far left. If you don’t see it, you will need to go into settings / beta features and turn on the ‘advance data analysis’ feature. Once you can see the + icon you will need to click it. This will let you upload a file of your choice. We want GPT to see our wireframe so select that file and upload it. You should then see the file in your message bar. Before you click enter to send this file to GPT4, you will want to give it some instruction. To avoid GPT crashing from giving it too much instruction at once we break what we need it to do into manageable parts.
So the initial prompt you want to enter to accompany your wireframe is ‘Please outline the primary components you can identify in this wireframe of a website homepage design’. GPT4 will then describe to you what it sees.
Watch the example:
Step 2.2: Get GPT4 to build the HTML
You now want GPT4 to build the basic HTML for your wireframe. So the prompt you could enter is ‘Please can you now just build the HTML for this design’. For this article I am trying to keep the process as simple as possible, but obviously you can adjust these prompts and add as much extra detail as you like to get the results you want.
Watch the example:
Step 2.3: Get GPT4 to build the CSS
Now you have the basic HTML laid out for you in what should be clearly defined sections you want to get GPT4 to build the CSS. But from experience if you ask GPT4 to do this all in one go, it is likely to crash before finishing. This will no doubt improve in future, but for now it is best to do this in chunks to avoid frustration.
So for each section in the HTML you will ask GPT4 to build the CSS. Start with the header and repeat the prompt until it has completed the footer. This is an example of the prompt you can use. ‘Please can you write the CSS for the [SECTION] only’. (You will now be noticing that I use ‘please’ and ‘thank you’ when talking to GPT, I can’t help it, I am from the UK).
Watch the example:
Step 2.4 and onwards: Test the code, refine and keep building
Once GPT4 has finished building the initial CSS for each section of your home page, you will now have all the basic code you need to plonk it in your favorite editor and take a peek at the results.
The result will hopefully be a basic web version of the wireframe that you uploaded to GPT4. Of course it will be basic, some things will likely not be right but all the components that GPT4 has recognised should roughly be where you want them. Of course it won’t be responsive yet, things will be missing and only be using placeholders for images etc. But the foundations are now in place for you to continue this process with GPT4 and just keep building!
Here is a vid of the results I got:
Conclusion
With GPT-4 at your side, you can seamlessly refine your CSS, enhance JavaScript functions, integrate PHP, craft an SQL database, polish your HTML, and even engage in coffee break chats. The future looks promising with this advanced teammate. The exciting part? You’ll accomplish tasks in a fraction of your usual time.
While AI isn’t replacing your frontend web role anytime soon, it’s set to become an invaluable asset to your creative toolkit.