Will ChatGPT Vision Replace Frontend Developers?

-- Today, I'm going to test out the brand new ChatGPT Vision to see just how well it can take 3 different UI design mockups, and translate them to the browser with HTML, CSS, and even JavaScript.

0:00 - Intro
0:33 - Layout 1 (Simple Card)
2:26 - Layout 1 Results
3:10 - Layout 2 (Responsive List)
4:52 - Layout 2 Results
6:31 - Layout 2 Follow-up Results
7:16 - Layout 3 (Full layout)
9:34 - Layout 3 Results
10:28 - Final Thoughts

Let's get started!

#ai #chatgpt #frontend

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

I personally can't wait until AI can take care of frontend. The goal is to speed up development so that we can focus on the product and customers.

[slrd]

I'm a frontend dev myself and I use chatgpt sometimes. If it's gonna replace anybody it won't replace the developer, it'll replace Stack Overflow. It's actually already happening

[Anselm]

When prompting especially something as complex as the last example. A good prompt would be to ask gpt “To explain in detail what does it see in the image”, once it gives you an answer, correct gpt on where it made mistakes and then ask it to write the code.

[chidoziechukwugbo]

Even ChatGPT can't do CSS. I feel better about myself now

[XxbankerboomxX]

I tried asking it "Replicate it exactly as in the photo in code" and it came out pretty well

[DustinWillis]

As a frontend dev, a part of me was happy that it didn't knock it out of the park on the first try. But I am excited to see what it can do in the future.

I am in the camp that believes AI is a tool that will make our jobs easier and get products across the finish line faster if used correctly and not as a full replacement of everyone involved from start to finish.

[tonybombski]

It's impressive that it gets the overall structure pretty well and created working javascript for the timer as well. As a front end dev, i don't think AI is quite there yet, but it's getting closer and closer.

[Envision_]

Gosh, what a relief. I'm learning JavaScript right now, intensively, and for a second, after reading the title, I thought "ugh, damn"

[thailonlucasart]

We don’t need to be scared. When chatgpt give us a wrong answer, we need to be frontend to fix it 🤷🏻‍♂️

[koyotegambit]

By reading the comments, my I suggest like a tiny series on prompts. Looking at how different prompts would solve different designs.

[crazy_hardcore_gaming]

Yeah, I was dealing with a similar issues with chatGPT. It can help but it definitely has trouble making a final product or doing abstract things. I just wasted an hour and a half trying to get the AI to help me out with displaying a 3D object in a web page. A .glb 3D object.

[thokozanimanqoba]

ChatGPT is like working with someone who understands what you want, if you gonna tell it using basic explanation, you except basic results, you can't expect super results with basic prompting, everything depends on your prompting

[Graphics.DesignFix]

Absolutely, the advancement of AI in frontend development holds great potential for speeding up the process. It allows us to shift our focus towards enhancing the product and addressing customer needs more efficiently. Exciting times ahead!

[mcrwebdev]

It's great for javascript and anything that relies on calculations, but with design led things, I think it's harder work to speak to it correctly than actually code it yourself. It still works as a great developer helper whilst I do the senior work ha

[CoryTheSimmons]

As someone who definitely doesn't ask ChatGPT weird stuff, you might want to clear or hide your chats before recording (click your face > Settings).
I am anxious every time you post a ChatGPT vid.😬

[surfacei]

One thing that I have noticed when using chat GPT is it. Sometimes you have to kind of be rude to it. It'll forget stuff and sometimes it won't write the code the right way because it will forget a block. So sometimes you have to say "Hey you forgot stuff. Can you go back and check and see if you miss something" And usually if I do that it will say oh sorry and give me the correct result.

[curious_one]

The prompts will have to be chained. First focusing on the overall structure, and then on the specific modifiable parts of it.

[artemu]

what is live server you just used? is it something built in in VSCode ?

[usernamediv]

And even if your prompt engineering sucks (I wouldn't know because I don't have the best prompt skills either 🤣) it seems like it starts to almost be just as much work prompting to just code the thing! With tailwindcss we can have this design up in running before any one is done prompting and re-prompting chaptGPT. Not quite there but I am sure it will get better with time!

[mistercakes]

You'll get much better results if you edit your prompt and resubmit than if you try to steer it. I usually add things like, I tried this before but it did xyz.