The best AI Coding tool for webdesign ChatGPT vs Claude vs Gemini vs DeepSeek

[00:00] I'm going to show you how I created a

[00:02] website for a company using four popular

[00:04] AI coding tools and at the end and

[00:06] according to my experience I will tell

[00:08] you my opinion about the best AI coding

[00:10] tools to create a website. These tools

[00:13] are free to use and you can have the

[00:15] source codes and you can sell it or host

[00:17] them in any server or whatever. Here we

[00:20] have chatgpt claude gemini and deepseek.

[00:25] I've opened them in separate spaces so

[00:27] you can get clear idea about user

[00:29] experience of each tool. Before we start

[00:31] building our website, we need to figure

[00:33] out what content we want to include.

[00:35] Company information has been provided by

[00:37] the client and I am going to use it to

[00:39] generate SEO friendly content needed to

[00:42] build the website using chat GPT. Here I

[00:45] have defined the role and given all the

[00:48] information about the company and about

[00:49] what should be included

[00:51] at the end. And I've asked for a SEO

[00:53] friendly well ststructured professional

[00:55] content. I am not going to create

[00:58] content using each model because of my

[01:00] goal is to find out best model for web

[01:03] development not for content writing. If

[01:06] we generate content using all of those

[01:08] definitely they're going to be

[01:09] difference between each other. Then we

[01:12] cannot compare websites fairly. Okay.

[01:15] Now we have the content. Let's get into

[01:17] writing the prompt.

[01:20] I want you to act like a professional

[01:21] web developer. Create a both

[01:24] professionallook and modernl looking

[01:25] website for a company using the

[01:27] following content. Use a decent color

[01:30] theme, hover effects, ear effects, and

[01:34] animations to keep the visitors engaged.

[01:37] You can use HTML, CSS,JS,

[01:40] libraries, frameworks as you wish, but

[01:43] you're not supposed to change the given

[01:44] content below. Better the prompt, the

[01:47] better results. That is my strategy.

[01:51] Okay. Now we have both the prompt and

[01:53] the content. Let's give this prompt and

[01:56] content for each AI model. First let's

[01:59] try with chat GPT.

[02:04] Okay. Next, let's give the prompt and

[02:06] the content to Claude. It looks like

[02:08] Claude accepted content a bit different.

[02:10] Cool way.

[02:12] Interesting.

[02:14] Next, we have Gemini. Mostly the same

[02:16] generating animation like Claude, but I

[02:19] think this is a little bit better.

[02:23] At last, Deep Seek Basic Generating

[02:27] Experience.

[02:31] Let's check on other models until these

[02:33] are finished. It looks like the first

[02:35] model we used, Claude and Chat GPT, are

[02:38] finished with the generation.

[02:42] I've opened separate VS Code and file

[02:44] manager windows for each model so we can

[02:46] compare them easily. First, let's review

[02:49] the code chat GPT generated. Unlike some

[02:53] other models, chat GPT haven't provided

[02:55] a built-in canvas to preview the code

[02:58] right here on the page. So, let me just

[03:01] create a new HTML file and open it in VS

[03:04] Code and paste the code chat GPT gave

[03:07] me. All right, let's open this HTML file

[03:11] using a browser and see the results. On

[03:13] the first look, we can see good loading

[03:15] effects, appear effects, hover effects,

[03:18] and scrolling effects on the page as

[03:21] instructed.

[03:23] Now, let's see what Claude had

[03:25] generated. Claude had provided with a

[03:27] built-in canvas for previewing codes.

[03:30] Let's have a look at this. Just like

[03:32] instructed Claude 2 have added hover,

[03:35] scroll, appear, and other effects to

[03:37] enhance user experience. Even though

[03:40] this page looks mobile responsive on the

[03:42] surface, some functions like this menu

[03:44] button does not seems to be working.

[03:47] Let's download this and open edited in a

[03:50] separate browser window for a maximum

[03:52] experience.

[03:56] Claude indeed have followed the

[03:58] instructions and created something

[03:59] beautiful for sure. Look at these

[04:01] navigation button functions. Claude have

[04:04] added scroll effects to navigation

[04:06] between sections.

[04:11] Let's again have a look at the design

[04:13] chat GPT created. Chat GPT also have

[04:17] added a likewise effect for navigating

[04:19] between sections but it is not as smooth

[04:22] as the one Claudia designed. Let's check

[04:25] the mobile responsibility of the design

[04:27] chat GPT gave. It looks like chat GPD

[04:30] have not gave much thought about mobile

[04:32] devices. Let's see how Claude had done.

[04:35] It seems even though the menu button is

[04:37] not working properly, design itself is

[04:40] not breaking on mobile devices. That's

[04:42] another point compared to chat GPT.

[04:47] Let's move on to the next model, Gemini.

[04:51] The design Gemini provided feels much

[04:54] lighter and smooth, and the effects are

[04:56] also much like the previous two design.

[04:59] which chat GPT and Claude provided

[05:03] the menu button in this design works

[05:05] without any further modifications but it

[05:07] does not feels any smooth Gemini have

[05:10] offered this add Gemini features button

[05:12] let's see what it will do to the design

[05:15] until then let's check on deepseek oops

[05:19] looks like the session expired for

[05:21] deepseek no worries we can just continue

[05:24] from there until it is finished let's go

[05:27] back to chat GPT and ask it to improve

[05:30] the design.

[05:33] Website should be mobile responsive.

[05:36] Please update the code.

[05:41] While we are at it, let's also mention

[05:43] to Claude that the menu button on the

[05:46] design is not working properly.

[05:51] In the mobile devices, your menu is not

[05:54] working even if user clicked.

[05:59] Look at that. Unlike other models, Cluid

[06:02] can just fix or add the part that is

[06:04] needed to add or missing to the existing

[06:07] code without rewriting the whole code

[06:09] again, which saves us a lot of time.

[06:15] Now, the menu button works just fine and

[06:19] smoothly, just how I like it.

[06:24] Since Gemini is also finished with the

[06:26] design, let me copy this code into a

[06:28] HTML file and open it in a new window.

[06:34] New design and effects are not much

[06:36] different from the previous designs, but

[06:39] Gemini features thing have definitely

[06:41] has done something.

[06:45] A major different we can see in this

[06:47] design is that Gemini feature has added

[06:50] this AI advisor section. I don't think

[06:53] this will work without proper API

[06:55] integration, but let's check it out just

[06:57] for the review.

[07:02] As I said, it won't work without API

[07:04] configuration. If you want, you can get

[07:06] an API and ask follow-ups from Gemini on

[07:09] how to integrate it to your web page.

[07:12] Since I'm not planning to integrate an

[07:14] API for this project, I'm turning back

[07:16] to the previous design Gemini provided.

[07:21] By now, Deepseek must have done with the

[07:23] project. Let's check it out. Of course,

[07:26] it is finished. We can easily get a

[07:29] preview of the design by clicking run.

[07:31] Anyway, let's download this and open it

[07:33] in a browser.

[07:36] I can see the Deep Seek 2 have followed

[07:38] my instructions and added user

[07:40] experience enhancement like appear

[07:42] effects, navigation effects, hover

[07:44] effects, and even scroll effects. And

[07:46] look here, a form in the contact us

[07:48] section which no other model had thought

[07:51] to add.

[07:54] So far so good. Let's see what DeepS

[07:56] have done for mobile devices. Well,

[07:58] well, menu button working smoothly and

[08:02] the content is intact throughout the

[08:04] design.

[08:07] Deepseek is the only model which got

[08:09] mobile responsibility right on the first

[08:11] try. Let's have a quick look at the

[08:13] designs each model built. First model,

[08:16] chat GPT. Very basic color combinations

[08:19] and themes. No navigation effects or

[08:22] mobile responsibility.

[08:24] Honestly, I expected a more impressive

[08:26] design from Chat GPT.

[08:30] Then we have the design clawed built.

[08:33] Better scroll effects than chat GPT.

[08:37] Color combinations are also better.

[08:39] Smooth navigation effects are also

[08:42] present.

[08:43] Even though failed on the first try,

[08:45] Claude designed one of the best mobile

[08:47] responsive designs, too.

[08:52] The design Gemini generated have also

[08:54] used good color combinations and a

[08:56] modern theme. Smooth effects are also

[08:59] present on the desktop version, but the

[09:02] menu button animations did not improve

[09:04] even in the second design and the

[09:07] content looks bit empty and less vivid

[09:09] throughout the design. But that AI

[09:12] advisor section which Gemini feature

[09:14] added was impressive. Overall, I think

[09:17] this design is still better than the one

[09:19] which chat GPT gave. What do you think?

[09:23] Finally, we have the last design we

[09:25] generated using Deepseek. Deepseek also

[09:28] have used a light theme that aligned

[09:30] with the instruction I gave and the

[09:33] content is rich with vivid colors and

[09:35] images along the design. Effects are

[09:38] smooth and deepseek have given a lot of

[09:41] thought about mobile devices. This model

[09:44] was the only one that delivered the

[09:45] final content without any flaws or

[09:47] revisions. And also this was the longest

[09:50] generation with 1,287

[09:54] total lines. I will also show the total

[09:57] content length of other models in a bit.

[10:00] In fairness, I would say that the pages

[10:02] which Claude and Deepseek generated are

[10:04] a lot better than the ones Chat GPT and

[10:06] Gemini gave. Anyway, the final decision

[10:09] is yours to make.

[10:12] So, what do you think? Which design do

[10:14] you think is the best? Look at this and

[10:17] you can get a general idea about which

[10:19] model can handle a bigger task on single

[10:21] session and which model gives the best

[10:23] output in a single session. I have

[10:26] hosted these pages on pixelark.com

[10:28] website and put the links in the

[10:30] description below for you to check. I

[10:33] also have put the source codes on GitHub

[10:35] and the links for the directory is also

[10:37] linked to the description below. Go have

[10:40] a look. You're free to use these source

[10:42] codes for your projects. Comment down

[10:44] the model that you think is the best for

[10:46] web design. See you next time.