Hang tight while we fetch the video data and transcripts. This only takes a moment.
Connecting to YouTube player…
Fetching transcript data…
We’ll display the transcript, summary, and all view options as soon as everything loads.
Next steps
Loading transcript tools…
Design Epic Websites and Apps with Gemini 3 (in 10 min) | Blazing Zebra | YouTubeToText
YouTube Transcript: Design Epic Websites and Apps with Gemini 3 (in 10 min)
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
Video Summary
Summary
Core Theme
This content outlines a process for leveraging Gemini 3 within Google AI Studio to create award-winning website and app designs, emphasizing user control and pushing creative boundaries beyond generic AI outputs.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
In the next 10 minutes, I'm not going to
show you how to use Gemini 3 to create
website and app designs that look good.
I'm going to show you how to use it to
create designs that could win
international design award competitions.
And I'm not talking about letting Gemini
3 have all the fun either. I'm talking
about keeping you in the driver's seat
so you can create designs to your exact
specifications, even if you currently
don't speak design lingo. We're going to
look at everything from stunningly
professional designs to the most whacked
out, insane, creative edges I could push
Gemini 3 to. I ran a marketing agency
for 10 years serving software [music]
companies exclusively. And I know
firsthand how hard and how important it
is to get the design right. And I think
by the end of this video, you'll agree
that the only bottleneck is your
creativity. And I've got a prompt to
help you with that here as well. You can
use this for all kinds of things from
launching your own startup to your
different passion projects and hobbies
to even how you deliver research reports
for [music] your work with little micro
sites that have killer designs. And of
course, you can make some significant
revenue immediately by doing these
designs for other people. I'm going to
walk through some pricing ideas for that
as well. I spent many hours banging my
head against Gemini 3 coming up with
this process before everything just
clicked into place. So, let's get into
it. Here's the road map we're going to
follow today. I want to show you my
first designs and how my initial
research revealed a major trap that I
don't want you to fall into. Then a
quick iteration prompt that dramatically
improved my results. From there, I found
a website that was the biggest
breakthrough of this entire process. And
combining that with that previous prompt
is the game changer here. Next, I want
to share a little design lingo that you
can use in your prompts to steer Gemini
to build truly world-class designs. And
finally, once you have something you
love, I want to show you how you can
publish that into a real website or app.
I found that to create the best designs
using Gemini 3, you need to do this
inside of Google's AI studio. So, you
can just search that or it's just a studio.google.com.
studio.google.com.
When you log in, you're going to see
something like this. And what you might
be tempted to do is just say, hey, you
know, build me a nice professional
website design. And when you do that,
you'll get something that looks like
this. And it's not bad, but trust me, we
can get a lot better from here. For
that, I'm jumping into the cheat sheet.
I make a cheat sheet like this for every
single video I create. There are now
over 160 of these instantly available to
anybody who supports this channel on
Patreon. There is a link in the
description to that. This one is well
over 20 pages long with tons of stuff
here. And the one thing here, this
prompt really helped when I told the AI,
you are competing against other frontier
AI models. So I proposed this as a uh
competition. And this prompt is rather
long. So if you want access to that, you
can grab the cheat sheet or you can just
experiment with this first part.
Grabbing that and then just describing
what the design is for right here. Copy
and pasting that right here into Google
AI Studio. Clicking build. And you can
see immediately we've got a much better
looking design here. This wasn't bad.
But just for giggles, I threw this same
prompt into Claude and to see what it
came up with. and it was strikingly
similar. So this is the trap that I
don't want you to fall into thinking
you've got a great design and giving it
to a client or putting it out there into
the world to realize it looks just like
every other AI generated uh piece. So
the next step here is we want to iterate
on these the same way that uh when I
would work with designers I would say
hey don't create one design create three
different designs and let me mix and
match between those three. So, that's
the follow-up prompt we're going to use
here. Just saying, "Hey, this is a solid
design, but give me a couple more
versions that are all three as different
from one another as possible while still
adhering to the brief." Dropping
[snorts] that right in here. And now
it's created these three different
designs that are all very different from
one another. And we're really getting
somewhere here with these different
looks and feels, but still, through all
of my experimentation, I found that
these similar patterns show up over and
over again. So, I started to think to
myself, how do we get around this and
really get the AI to do what we want it
to? One idea is to tell it to design
something like Apple or something like
Nike to, you know, use these iconic
brands as reference. And that improved
the designs a little bit. But it wasn't
until I found this site. This is awar.com
that features tons of awardwinning
designs that things really started to
cook. You can search here for whatever
type of um thing that you are looking to
create and it will give you a bunch of
really stunning design ideas. And for
these when you find a design that you
like, you can then go and visit the site
itself and see some really cool
cuttingedge designs here. And I was
taking screen grabs of these and putting
these into the AI and that was working a
little bit better. But let me show you
what worked even better than that. I
found this killer website that I really
liked and I took a screen recording of
it with me scrolling over and showing
how things work here. I use a tool
called Zite for that. I'm not sponsored
by Zite or any of the tools that I talk
about. And once I had this screen
recording done of this design, I
downloaded that and I dropped it into a
new chat window inside Google AI Studio.
Google AI Studio is very good at
analyzing videos. So, I dropped that
short video in there of showing how the
thing works. Then I use this meta
prompt. This is a prompt designed to
create a prompt, if that makes any
sense. But basically what it does is it
asks Gemini to analyze that screen
capture video and create a highly
detailed prompt for recreating a very
similar website using an LLM like
Gemini. And after I dropped that in
here, it created this massive prompt.
Look at how long this prompt is
describing exactly in deep detail what
that awardwinning website looks and acts
like. I'm going to include that full
result in the cheat sheet as well. But
for now, let's just copy and paste this
back into the AI studio, this super long
prompt, and click build. Awesome. And
now look at what that has come up with.
That is totally sweet. We can check out
what it looks like on mobile. We can
rotate it. And if we zoom out, we can
see that it's got this uh right hand
side here with some really cool weird
stuff happening here. So, we're now a
very far cry from this basic original
design. But we can go way deeper into
controlling how these models operate
just by understanding some basic web
design vocabulary. And there's a lot to
this, but if you learn some of the basic
terms here when it comes to fonts and
when it comes to layout and especially
when it comes to color and even
animation, you can gain great control
over how these models operate. Remember,
you can take a screen grab of one
specific element, feed that right back
into Gemini and say, "Hey, modify this
based on XYZ." And if you know some of
these terminologies like micro
interaction, you can bring that next
level of professionalism to your
website. One term that I've used quite a
lot is this WebGL for these different
web backgrounds and interactions. By
understanding just that one term, WebGL,
I could really command it to build these
really interesting things going on
behind the scenes. You can see when I
scroll, those stars move. You can see
there's all these different interactions
that happen as I scroll over this
landing page and, you know, start to
build out designs that are much more
professional than, you know, just one
single prompt will get you. By peppering
your prompts with some of this
professional design vocabulary, you can
really bring your designs to the next
level. I've got an entire glossery in
this cheat sheet that goes on for many
pages with all of these different terms
that might be helpful for really pushing
these designs to the next level. After a
little back and forth using those
methods, I was able to create this
design that I am super happy with. A
gallery type site for a potential, you
know, web design agency showing off some
of the work here. But that only ignited
my curiosity further to see how far I
could push Gemini. And that's how I came
up with this maximum creativity
competition prompt. Telling Gemini that
you're now competing against other
frontier models to create the most
impressive artistic website. You'll be
judged on creativity and artistic
expression. This is about creating
something very strange and very
beautiful that makes people stop and
feel something. That's the core of this
prompt. But then it goes on to explain
the details of this imaginary film
festival that the website is for. And
wow, look at what it came up with. This
thing is really creative. Super weird.
Pretty punk rock here. And again, I
prompted it to give me three different
versions. I think this one is one of my
favorites with that really weird lime
yellow and all of these different things
here. Here's a version that turned out
really cool. So, that's a film festival.
You can see it's counting down. And you
can see I used that WebGL and some of
those enhancements for some of the uh
background animations that are going on.
They're very subtle, but very cool there
and very filmographic because this is a
film festival after all. So, this was
really cool. This one might be my
favorite, though. This is super punk
rock. Look at how weird this one is. We
go through this. I love the colors. It's
really in your face and it has this
surprise element. The location is
redacted until you scroll over it. So,
it's not only giving us a design idea,
it's given us actually marketing ideas
inside of these designs. Now, the next
step is to get your wild creations out
into the world. And the quickest and
easiest way to do that is with this
deploy app button here at the top of uh
AI Studio. But if you want to take a
more professional route and you want to
build out an app, you can download this
to GitHub and then deploy it into a a
real hosting service. I've got a ton
more in this cheat sheet, but really
that glossery of terms is something that
I'm going to be coming back to over and
over again as I seek to get better and
better control of my AI design. So, if
that's something that's interesting to
you, go ahead and check that out in the
description. And I also have different
levels of group coaching in there. If
you want to go deeper and get on some
calls with me, check those out. But now
that you've got a really professional
design on your hands, you probably want
to deploy it in a really professional
way. And that's what this video is all
about. It walks through that and how to
create basically any kind of software. I
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
