Up next in 10
SuperDesign.dev + Cursor AI & VS Code The Ultimate AI UI Builder – FAST, FREE & Open Source!
Aug 9, 2025
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video I'll show you a extension
0:04
for cursor IDE. So it's basically a very
0:09
popular extension. Uh it allows you to
0:11
actually show the design mode right in
0:14
your cursor IDE. So if you build any
0:16
sort of application, you will be able to
0:18
see their design in real time. So the
0:21
extension name is superdesign.dev.
0:24
If this is their official website, if
0:26
you go superdesign.dev dev right in the
0:28
browser itself. So this is an
0:31
open-source extension and you can
0:33
directly install this extension inside
0:35
your cursor. So I've already installed
0:37
cursor. So just simply go to view and
0:40
extensions and right here simply search
0:43
for this extension which is super
0:45
design.
0:46
And now this extension will come right
0:49
here. Click the install button.
0:52
And once you install this.
0:59
So the extension is just installing. So
1:01
just wait.
1:03
So now it is actually enabled right
1:06
here.
1:14
So now if you simply select right here
1:17
this tab will come super design. So
1:20
right here welcome to super design. So
1:22
your AI powered canvas for rapid UI
1:25
exploration. So first of all simply
1:28
enter your email address to create an
1:31
account right here and click on get
1:34
started. After that it will now show you
1:37
this prompt right here. you basically uh
1:41
write any prompt here and after that it
1:44
will automatically construct the user
1:46
interface of that application. So let's
1:48
suppose I want to say uh build a UI for
1:54
advanced scientific
1:57
calculator. So now if you just see the
1:59
magic right here. So it is using the
2:01
latest model which is Gemini 2.5 Pro
2:04
plot sonet opus all these models are
2:08
available to you.
2:11
So right here if you see
2:16
and just send out this request right
2:18
here. So now what it will do it will
2:21
actually
2:23
so you just need to configure this if
2:25
you are using claude here. So just
2:27
replace your API key.
2:34
So you can select open router selected
2:37
but API key is not a. So now for
2:40
configuring configuring the API key. So
2:43
what you just need to do go to open
2:45
router which is an easy way by which you
2:48
can use any AI model for completely
2:51
free. Simply go to this website just
2:54
login with your account. go to key
2:55
section and just create API key.
3:02
Uh just copy this and simply paste it.
3:14
Just select the model. First of all,
3:16
let's suppose we are simply paste.
3:33
Oh yeah. So this one.
3:39
So you can see open router API
3:41
configured successfully. So now if you
3:44
ask
3:56
so now what it will do it will try to
3:59
generate the UI for this advanced
4:02
scientific calculator.
4:04
So now just wait it's generating.
4:08
So right here it is asking for your
4:12
so this is your UI component and the
4:16
design philosophy
4:18
can simply say
4:34
so this is actually the theme right
4:36
here.
4:37
The files are saved at design
4:40
iterations. So if you open your files
4:43
design iterations, it has created this
4:46
super design.
4:50
So it basically automatically created
4:53
you will see this automatically all
4:55
these files for you.
4:58
This is the actual CSS file here.
5:02
And
5:04
what you can do, you can even install
5:05
one more extension right here to see the
5:08
live preview.
5:13
Simply also install this extension live
5:15
preview.
5:19
So just click install. So this will
5:22
actually show you the sidebyside preview
5:25
of uh the actual application which is
5:30
generated. So now once you do this
5:34
you go to this file here
5:37
shows show show preview. So now you can
5:40
see it is actually generated this nice
5:42
little UI for a simple scientific
5:46
calculator if you see.
5:52
So
5:56
in similar way we can actually ask any
5:58
sort of thing from this again go to this
6:02
and now I will simply say build a
6:06
simple UI for video
6:11
chat app.
6:14
So again it is using the deepsek uh this
6:18
is important to know it is using this
6:19
model which is completely free it is not
6:22
using the claude or the gemini if you
6:24
want to use them you just need to
6:27
replace the API key so you can use any
6:29
model it's totally your choice so once
6:32
you install cursor
6:35
this is a very awesome extension it's
6:36
also available for VS code as well if
6:39
you don't like cursor and if you like VS
6:43
PS code simply again go to extensions
6:45
just type super design and right here
6:47
install
6:49
super design and uh AI design agent for
6:52
your IDE. So once it is installed it
6:55
will show right here in the sidebar
6:57
section.
6:59
So you simply write the prompt and based
7:01
upon that.
7:06
So you can see that again you repeat the
7:10
same process. enter your email address
7:12
and everything. It will do the same for
7:14
VS code as well. So now again it
7:18
generated all the files. So this is your
7:21
video chat.
7:26
So just close this.
7:30
So it created a very basic interface for
7:33
your video chatting kind of an
7:34
interface. If you don't like the result,
7:37
you can definitely change the model as
7:39
well because this is the deepseek model.
7:42
It is using the Chinese free open-source
7:45
AI model.
7:47
So the result
7:50
may depend upon which model you use. So
7:53
open router
7:58
if you now use Gemini 2.5 Pro. So if I
8:01
say build a
8:03
Google drive UI clone.
8:10
So yeah so for this API key is required.
8:13
So some models are free some some are
8:15
paid. So you can now use this quen model
8:19
which is totally free. I think it's a
8:21
open-source model. So build a Google
8:24
Drive UI clone.
8:29
So now it is generated generating this
8:35
UI for you.
8:37
So just notice any sort of difference.
8:40
So this is a very good extension guys.
8:43
Definitely check out this. It simply
8:45
writes the prompt and automatically
8:47
generates the UI for you. So side by
8:50
side you can see the result and it shows
8:52
you the HTML, CSS and JavaScript of your
8:56
you can integrate inside your cursor and
8:58
also in VS code. So
9:08
so as you can see right here it is
9:10
generating the UI for you.
9:26
So if you check now, it created this UI
9:29
for you. And uh
9:40
so I think it's looking very good. You
9:42
have this search bar. Then we have a
9:46
bunch of files as well and same we can
9:49
do this
9:51
uh let's suppose just again
9:54
so in this easy way guys you basically
9:57
write the prompt here and after that I
10:00
can say build a Google homepage clone
10:04
UI.
10:07
So
10:09
so I'm just showing you all the examples
10:11
here. So just write the prompt and then
10:13
the automatically your UI design will be
10:17
generated all the HTML CSS code. So this
10:21
will solve and save a lot of time. If
10:24
you are not a good designer then
10:26
automatically you tell the AI what sort
10:28
of design you want automatically this
10:31
extension will generate the you can
10:34
check out their documentation as well.
10:35
So is it a free and open source? You can
10:38
see definitely yes yes yes yes we are
10:40
open source project it's also provided
10:43
their GitHub link
10:46
so so
10:50
they are completely open source for just
10:53
uh using the premium AIS you do need to
10:56
have the API key for that so
10:59
now I think it generated
11:09
So it is
11:13
writing the file here.
11:18
So now if I open this Google homepage.
11:29
So you can see that guys it actually
11:32
generated this Google homepage which is
11:34
looking quite nice. This is a UI.
11:38
So in this easy way guys you can use
11:40
this extension to generate UI design
11:44
from just a prompt. Definitely check out
11:46
this extension and also check out my
11:51
website freemediatools.com
11:53
uh which contains thousands of tools.
#Programming
#Open Source