HomeVideos

ChatGPT 5.6 for Web Design (Sol, Terra, Luna)

Now Playing

ChatGPT 5.6 for Web Design (Sol, Terra, Luna)

Transcript

217 segments

0:00

So, ChatGPT 5.6 is out, and I'm kind of

0:03

excited to find out what it's going to

0:04

be like when it comes to web design and

0:06

web development. I've seen some pretty

0:07

cool examples already, like Matt who

0:09

spent 1 week creating a voxel-based

0:12

Manhattan from a single prompt. While I

0:14

really don't want to know how many

0:15

tokens that took, I'm impressed. I also

0:18

saw someone create a 3D Earth with a

0:21

full terrain, satellite imagery, cities,

0:23

landmarks, and more. And this prompt

0:25

took 30 million tokens. Apparently, it

0:28

was worth it. There are lots of

0:29

examples, even people replicating

0:31

Minecraft. But I want to have some

0:33

first-hand experience of what it's like

0:35

for a web design inside of the Codex

0:36

app. The Codex app has been relabeled to

0:39

ChatGPT app. On the model selector down

0:41

here, you have the three new models,

0:43

Sol, Terra, and Luna. On the top left

0:47

here, you can swap between work and

0:49

Codex. With work being the regular

0:51

ChatGPT, and Codex being more

0:53

specialized for developers. There's also

0:55

a new section here for sites, where you

0:57

can actually host up sites on ChatGPT.

1:00

But you have to be careful because your

1:02

personal information will be public when

1:04

you do so. Let's test this out. I've got

1:05

this prompt here to create an

1:07

interactive website that looks

1:08

award-winning. On the bottom right here,

1:10

I'll just swap from 5.5 to Sol, 5.6. And

1:14

I also can change at the effort level,

1:16

which is how much time it takes to

1:17

think. In ultra mode, it can even spawn

1:20

additional agents, but they're going to

1:22

be expensive and also running at ultra.

1:24

So I don't really recommend this, but

1:26

I'll do it for this test just so you can

1:27

see. The prompt ran for 8 minutes, then

1:30

additional 3 minutes, and it came up

1:32

with this design. I can open it up in a

1:34

Google Chrome browser. ChatGPT 5.6 has

1:38

combined a little bit of 3D elements to

1:40

the animation, as well as this black and

1:43

green white aesthetic to design this

1:45

website to talk about itself. If I

1:47

compare this to something like Fable,

1:49

I'd say that it doesn't look as good in

1:51

terms of the design, but it's still a

1:53

step forward from the previous ChatGPT

1:56

5.5 versions I've had. I think what's

1:58

most interesting is that if I grab this

2:00

URL, this is a web URL I can plug into a

2:04

browser or even share with other people.

2:05

It's not just limited to my local

2:07

machine. Though, if I do want to access

2:10

it, then I will need to log into ChatGPT

2:12

because it is securely locked down. So,

2:15

over here in ChatGPT, let me share this

2:17

select for anyone on the internet to

2:20

have access to it, publish this online

2:22

URL, and just like that, it's available.

2:24

And this reminds me a lot of how Vercel

2:27

and Next.js works. Maybe OpenAI have a

2:30

long-term vision to kind of make this a

2:32

bigger thing. I'll be interested to see

2:34

how it looks like in the future and if

2:36

we can connect it up to things like

2:38

GitHub as well. One more thing to note

2:39

is that if I head to sites now, this

2:41

actually shows up as one that I can

2:43

browse at any point as well as update.

2:45

But let's create a new one now because I

2:47

want to test out creating a redesign for

2:50

a website. I have this website here

2:51

called typeui.sh.

2:53

It's a website that has design skills if

2:55

you want to check out. But I want to

2:57

redesign this website because right now

2:59

it's pretty plain and I reckon there's a

3:00

lot of room for improvement. It's also a

3:02

similar prompt to what I've tried with

3:04

Fable and others, so we can see how it

3:06

compares to those. I'll use ChatGPT Soul

3:09

5.6 and I'll set the reasoning to very

3:12

high. I'm going to ask it to improve the

3:14

animation, micro-animation, typography,

3:17

and make it look more modern in terms of

3:19

design aesthetics. In this case, it

3:21

spent around 8 minutes to come up with

3:23

this design over here. Let me expand

3:25

this out to a proper web browser. It's

3:27

gone with this blue, green, white

3:29

aesthetic and when looking at spacing

3:31

and typography, it looks pretty good.

3:33

There's a lot of placeholders using

3:35

basic SVG art and I think there's room

3:37

for improvement for that. However, just

3:39

like last time, I think the Fable 5

3:41

example where it redesigned this website

3:43

actually ended up looking a little bit

3:44

better. For comparison, this is what it

3:47

looked like when I created it under

3:49

Fable 5 and you can see here that

3:50

there's a lot more going on in terms of

3:53

UI, animation, topography. Everything

3:55

looks a little bit cleaner and better.

3:57

Another prompt I like to check is to

3:59

redesign a popular website. I'm going to

4:01

get 5.6 Soul to redesign a Reddit.

4:04

Here's a quick screenshot of the

4:06

homepage right now and I'll paste this

4:08

in along with the prompt to create a

4:10

newer design aesthetic. It ran for about

4:12

8 minutes and came up with this design

4:15

over here. I do wonder what's happening

4:17

with the logo here. Soul 5.6 has made

4:20

something look quite sad there, but

4:22

that's okay. Let's have a look at the

4:23

general design aesthetic. Overall, the

4:26

spacing and negative space for all these

4:28

sections look pretty good. All the

4:30

content and categories are there and

4:32

it's removed the ads which I can

4:33

appreciate too. It's not a massive

4:35

change to what Reddit currently looks

4:37

like, but still there are some nice

4:39

quality of life changes here like this

4:41

good morning with these categories and

4:43

an option for a focus mode. Next, I want

4:45

to check how Chat GPT 5.6 goes with

4:48

design skills because they're becoming

4:50

more and more popular, especially when

4:52

creating different types of design

4:53

aesthetics. Now, Type UI is one of the

4:56

websites that you often go to for

4:58

getting these design aesthetics and

4:59

there's this one here for a Bento grid

5:01

which I want to test out. Let me copy

5:03

this markdown file and paste this

5:05

straight into Chat GPT and ask it to

5:07

create a portfolio website for myself.

5:10

It ran for 15 minutes which I'd say is

5:12

quite a while and it came up with this

5:15

design here. This beautiful Bento which

5:17

explains who I am and what I do. I turn

5:19

complex text into clear, useful

5:21

experiences. I love these Bento type

5:23

design and I think it did a lot better

5:25

than some of the previous designs. It

5:28

goes to show how important design skills

5:29

are now when working with AI. What I do

5:32

like is that it's pulled in all the

5:33

relevant information here. Like even my

5:35

design course which I created and it's

5:37

not particularly linked on YouTube, but

5:39

it's found this and added it as part of

5:41

my profile. I want to take a look at MCB

5:43

tools because they're still something I

5:45

use a lot when it comes to Chat GPT, but

5:47

they're hidden a little bit more and

5:49

there's a really good one worth knowing

5:51

about. If you head to plugins and then

5:53

select the tool icon, you can head over

5:56

here to MCP and then select add server.

5:59

I want to add a Zapier. It's a tool that

6:01

connects your applications to other

6:04

third-party tools and it works as a man

6:07

in the middle, allowing you to have

6:08

secure connections to things like Slack,

6:10

Google Sheets and much more. You can

6:12

head over here to Streamable HTTP, add

6:15

in the name Zapier and plug in the URL

6:18

which we're going to create right now by

6:20

heading over to the Zapier MCP server.

6:23

If you click get started over here, it

6:25

lets you create a new MCP server. And

6:28

when you generate this, you can select

6:30

which app you want to connect it to. In

6:32

this case, I'll do the ChatGPT

6:34

application. And here is the good part.

6:36

You can add in something like a

6:38

application of your choice. I'm going to

6:40

select Gmail in this case and then I'm

6:42

going to allow it to only do two tasks,

6:45

find emails and create drafts. You could

6:48

give it permissions to do more like send

6:50

emails and delete emails, but sometimes

6:52

you might only want to have certain

6:54

permissions for AI and this is the

6:56

benefit of Zapier. The main thing here

6:58

is that if you connect up a tool

7:00

directly to ChatGPT, it has all the

7:02

permissions. So it could go ahead and

7:04

delete all your emails. This is a much

7:06

more secure way to do that. Let's copy

7:08

this URL out and plug this here into the

7:10

URL section and then select save. The

7:13

last thing we need to do now is

7:15

authenticate. This takes you to a page

7:17

that confirms this and now we're done.

7:19

So, let's actually test how this works.

7:21

If I head over here to new chat and

7:23

request to view something like my latest

7:25

emails, I'll get that response in just a

7:27

couple of seconds and here it is. A big

7:29

thanks to Zapier for sponsoring today's

7:31

video. They also have this new SDK which

7:33

is specifically made for AI agents that

7:36

allows them to use CLI commands to

7:38

directly connect to apps which is a lot

7:40

better for agents rather than using MCP

7:42

tools as well.

Interactive Summary

This video provides a hands-on review of ChatGPT 5.6, specifically focusing on its web design and development capabilities. The narrator explores the new model variants, the built-in hosting features, and tests the model's ability to create, redesign, and improve various websites. Additionally, the video covers the practical use of MCP (Model Context Protocol) tools, demonstrating how to securely integrate third-party applications like Gmail using Zapier to enhance AI agent functionality.

Suggested questions

3 ready-made prompts