HomeVideos

Kimi K2.5: Dribbble Video to Working Site

Now Playing

Kimi K2.5: Dribbble Video to Working Site

Transcript

160 segments

0:00

This is Kimi K2.5, and I just gave it a

0:02

video, and it literally vibe-coded this

0:05

whole thing.

0:06

It's kind of insane that it just did this

0:08

all in one shot.

0:09

As you can see, it has the actual landing

0:11

page for our podcast called the Rate

0:13

Limited Podcast,

0:14

and it has a really nice hover effects.

0:17

This is kind of similar to maybe what you

0:18

would see from Google Gemini.

0:20

And what I found interesting, though, was

0:22

a lot of this attention to the detail

0:24

that it did to make this site as far as

0:26

design,

0:26

and how it actually did this because it

0:28

generated each of these assets

0:30

individually.

0:31

And the other part of it is just like its

0:33

design sense is really, really good.

0:36

I just gave it like some of our

0:37

guidelines for our brand.

0:39

But the most impressive part for the

0:41

mobile part, a lot of times what other

0:43

websites get wrong

0:44

are like how to do like the correct like

0:46

blur effects.

0:46

You can kind of see this is a little bit

0:48

kind of similar here.

0:49

But it still kind of did so that little

0:51

hamburger menu.

0:52

And even for this type of thing, this is

0:54

rate limited.

0:54

and it kind of did this type of

0:56

positioning here.

0:57

This is kind of how it breaks down for

0:59

what its environment did.

1:01

So the original video was given here and

1:03

I literally just went to Dribbble So this

1:04

is the Dribbble website that I was trying

1:06

to mimic here I said I really like this

1:08

site and I just downloaded this video and

1:10

just gave it this video And you see this

1:11

video that playing has these different

1:13

screenshots and things like that or it

1:15

just different parts of the website So I

1:17

was able to take inspiration from that We

1:19

have some information about our brand and

1:20

kind of what we do for the podcast And

1:22

the basic instructions I gave it here is like

1:24

I want you to generate a single HTML page

1:26

for our rate limited show Here the

1:27

Dribbble link And I took some of the

1:29

screenshots of the video as well and I

1:31

gave it some of the brand

1:32

foundations. So this is what Kimi.com

1:35

does when using the model. So I went to

1:37

websites and is using

1:39

the agent model and basically starts to

1:40

create an environment and think through

1:42

things. I didn't have

1:43

to give it any more prompts after this.

1:44

It pretty much just one-shotted the rest

1:46

of itself. So it almost

1:47

looks like madness in the terms of how

1:49

it's working. You start to see this

1:50

little

1:51

thing kick off and it

1:52

keeps these little to-dos that are going

1:54

here. And so this is kind of what you see

1:55

it going. It goes to

1:56

this website, starts actually browsing

1:58

and taking a look at the video, and then

2:00

it even starts to

2:00

execute terminal commands.

2:02

So you can see it execute the terminal

2:03

commands

2:04

where it's doing its little progress.

2:05

So as it's going through these different

2:07

check marks for my task,

2:08

this is exactly what it doing here And I

2:10

found it really insightful as far as

2:12

trying to see what the agent is doing So

2:14

this looks very much like Manus and the

2:16

way Manus would approach it but this is

2:18

using the Kimi K2 model for building

2:19

websites and this is kind of what I able

2:21

to see here This is kind of

2:23

what it did. This is just one generation

2:25

with one prompt and it just cost me one

2:27

credit or one

2:27

whatever type of thing to do so I didn't

2:29

have to go back and forth a lot with this

2:31

type of thing.

2:32

how is this different than like Gemini

2:36

Pro or Gemini 3 Pro? I feel like this did

2:40

it without me

2:41

really kind of you know prompting it too

2:43

much it even give me like a deployment

2:45

website link which I

2:47

don't get from Gemini Pro I get like a

2:48

little bit of a preview thing and I think

2:51

this is really

2:51

interesting this is my first prompt I

2:54

also did another one where I give it to

2:56

Droid and so with

2:57

Droid I had it do its own thing here and

2:59

you can kind of see this is like the

3:01

simulator here

3:01

and so this is the the website that had

3:04

Droid make so Droid is a coding agent and

3:07

I used the same

3:08

Kimi 2.5 model and gave it the exact same

3:10

prompts I couldn't give it a video I just

3:12

gave it some

3:13

screenshots and this is basically what it

3:15

made this is still pretty cool overall

3:17

you know for basically making a podcast

3:19

website we have these different things

3:21

here and I kind of like this one which is

3:23

really nice It a really nice layout It

3:25

has a cool thing I would probably have a

3:27

little

3:27

bit more contrast between the things. But

3:29

for a first shot, one type of attempt,

3:31

you see there

3:31

wasn't as much detail as the one that is

3:33

from the Kimi.com. So if we go to mobile

3:35

view here, you see

3:36

that we just have the bar up here. And we

3:38

have this little animation that's kind of

3:39

at the top.

3:40

These three little dots are kind of going

3:42

up and down. And then we have these

3:44

things

3:44

here. So yeah,

3:45

and it has these types of cards which are

3:47

really cool for mobile. I like the

3:49

website. I kind of like the minimalism

3:51

for mobile but as far as like overall like

3:53

font and everything and vibe I really do

3:55

like the one that came out from Kimi. So

3:57

if we go down here to go preview this is

3:59

pretty fire because you can see this

4:01

animation and like how it comes in like

4:03

that. That's amazing right? And so here's

4:05

our last episode. Here's kind of what

4:08

filled in the gaps there and everything

4:10

like that. So that's basically Kimi K2.

4:12

This is my first attempt at it.

4:13

I'm going to definitely be playing around

4:16

with it a lot more because this is kind

4:18

of the first time I feel that I have a

4:19

really

4:20

good designer that I can prototype with.

4:22

And I think the other part of it is that

4:24

I felt like I can give it like a video of

4:25

something and it can understand the video

4:27

and then try to figure out what to do

4:29

next.

Interactive Summary

The video demonstrates Kimi K2.5's capabilities in generating a highly detailed and responsive landing page for the "Rate Limited Podcast." Using minimal input, including a Dribbble video for design inspiration and brand guidelines, Kimi's autonomous agent model browses, processes video, and executes commands to create a complete HTML page. The speaker praises Kimi's attention to design detail, mobile responsiveness, and its advantage over Google Gemini Pro by providing a direct deployment link with less prompting. A comparison with another coding agent, Droid, highlights Kimi's superior performance when provided with video input, leading to more detailed designs and a better overall vibe, positioning Kimi as a promising prototyping tool.

Suggested questions

5 ready-made prompts