A five-rule methodology for building single-file web applications in Gemini Canvas using plain-English prompts and incremental iteration.
Posted
3 months ago
Duration
Format
Tutorial
instructive
Views
57.4K
2.3K likes
57 · 43
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
You want to build bespoke internal tools or prototypes without learning JavaScript, HTML, or CSS.
You have tried code generation with large language models but experienced broken builds from overly broad prompts.
You need to rapidly prototype and share interactive user interfaces with clients or collaborators.
SKIP IF…
You are developing complex multi-tenant backend architectures or production SaaS platforms requiring database infrastructure.
You already have an established automated frontend development workflow.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Demonstration of complex web apps built inside Gemini Canvas without manual coding.
00:35 – 01:08
02 · Set Up Gemini Canvas
Selecting the Flash model and activating the split-screen Canvas interface.
01:08 – 01:42
03 · What Is Vibe Coding?
Definition of plain-English prompt engineering for autonomous code generation.
01:42 – 06:11
04 · Five Vibe Coding Best Practices
Detailed exploration of aesthetic-first prompts, minimal scope, references, specificity, and incremental additions.
06:11 – 08:11
05 · Build an App in Gemini Canvas
Initial generation of a minimalist daily task application with custom CSS styling.
08:11 – 11:50
06 · Edit and Expand Your App
Using element selection to style components, adding multi-tab sorting, and debugging non-responsive elements.
11:50 – 16:16
07 · Advanced App Demos
Walkthrough of high-complexity builds including a retro arcade with three mini-games and an interactive desktop OS.
16:16 – 17:42
08 · Share, Deploy, and Next Steps
Generating public shareable links and exporting raw source code for deployment.
Atomic Insights
Lines worth screenshotting.
Canvas converts conversational output into a split-screen runtime environment where JavaScript and CSS execute live in an sandboxed iframe.
Broad, feature-stuffed prompts cause AI models to create brittle single-file architectures that fail when modified.
Describing emotional tone (e.g., 'calm minimalist productivity cave') gives the model stylistic constraints that guide font choices, padding, and subtle animations.
Vision-enabled language models interpret screenshots of existing UI designs far more accurately than descriptive text prompts.
Single-feature progression allows developers to immediately identify which prompt instruction introduced a runtime script error.
Gemini Canvas frequently displays a completed generation status in the chat panel before the preview pane finishes rendering DOM elements.
The built-in 'Select and ask' element inspector lets users bind feedback to specific DOM elements rather than rewriting the entire prompt context.
Applications generated within Canvas can call external browser APIs, including local storage, Web Audio sound synthesis, and embedded AI generation.
Canvas generated links create fully hosted, zero-install web applications accessible immediately via public URLs.
Downloading the generated source HTML file allows instant production deployment to hosting networks like Vercel with zero code changes.
Takeaway
Constrained iteration prevents AI hallucination in single-file app generation
CORE METHODOLOGY
AI code generation fails when overloaded with sprawling requirements; reliable software emerges from tiny, isolated functional increments.
Begin every prompt with the target audience, emotional feeling, and concrete aesthetic palette rather than technical feature lists.
Ship the smallest viable base component first—like an input field and a display list—to confirm underlying functionality before scaling.
Supply image screenshots or mockups because vision-capable models parse spacing, borders, and layouts more accurately than prose descriptions.
Eliminate vague requests like 'make it look better' in favor of precise CSS attributes, exact hex values, and corner radius measurements.
Isolate bug fixes by clicking 'Select and ask' directly on broken interface components instead of issuing broad conversational corrections.
Glossary
Terms worth knowing.
Vibe Coding
The practice of creating functional software by describing desired behavior, aesthetics, and user experience in plain language while an AI model writes and compiles the underlying code.
Gemini Canvas
A dedicated collaborative split-screen interface within Google Gemini designed for side-by-side document and code creation, rendering interactive HTML, CSS, and JavaScript in real time.
Select and Ask
A contextual targeting tool in Gemini Canvas that allows the user to click a specific rendered visual component on the screen and issue localized revision prompts.
Single-File Web App
A complete, self-contained application containing HTML markup, CSS styling, and JavaScript logic packaged inside a single downloadable file.
“Vibe coding is when you explain to an AI what you want in plain English and it writes the code for you.”
Concise, definitive summary of a popular programming paradigm.→ TikTok hook↗ Tweet quote
01:15
“All you have to do is focus on the vibe like what you want the thing to do and what you want it to feel and look like and the AI will handle the actual programming.”
Clearly demarcates the boundary between human intent and AI execution.→ IG reel cold open↗ Tweet quote
02:21
“Instead of just saying what you want the app to do, you instead want to describe the feeling, who the target audience is, and the core purpose, and the aesthetic.”
Actionable shift in prompt formulation technique.→ newsletter pull-quote↗ Tweet quote
09:53
“It will almost always say it is done before it actually is.”
Pragmatic UI observation that saves users from premature confusion.→ newsletter pull-quote↗ Tweet quote
16:40
“And because this still lives inside of Gemini, they don't need to install anything. Just give them the link, and they'll be able to access it.”
Highlights the frictionless zero-infrastructure sharing model.→ TikTok hook↗ Tweet quote
The Script
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
17px
metaphor
Did you know that you can create apps and websites like these directly inside of Gemini? Here's a website I put together for Sal's Pizzeria. Here's an app that I created where you enter in any location and it shows you an image of it and gives you a packing list.
And finally, here is an entire operating system that was built directly inside of Gemini. You don't need to know how to code, you don't need to be super technical. In fact, as someone who has never coded a single day in his life, trust me when I say this, I know that even you can create apps and websites like these with Gemini.
We'll start by coming to gemini.google.com. In the chat, you first want to make sure you have a good model selected. I suggest that you use Flash.
Next, the powerful unlock that most people don't know about is Gemini Canvas. You can find that by clicking on the plus icon and selecting Canvas. This creates a collaborative environment where you can work with Gemini on projects.
It's great for websites, apps, and even documents. And this is what we're going to use to vibe code. Vibe coding is when you explain to an AI what you want in plain English and it writes the code for you.
All you have to do is focus on the vibe like what you want the thing to do and what you want it to feel and look like and the AI will handle the actual programming. For someone like me who has never written a single line of code, this has been such a game changer. I'm not saying you're going to be able to vibe code the next Instagram, but for a personal tool, a simple website, or a little app, you can absolutely vibe code exactly what you need with zero experience.
Let's come back into Gemini. Now that we have Canvas selected, you'll want to describe in here in plain English what you want your app or website to look like and do. But before you type in something simple like make me a beautiful website, I want to cover my five vibe coding best practices because a prompt like this is not going to get you the results that you want.
But if you instead use these best practices for vibe coding, you're going to get much better results inside of Gemini or any app that you use for vibe coding. So the first one I want to cover, as the name implies, is lead with the vibe. Instead of just saying what you want the app to do, you instead want to describe the feeling, who the target audience is, and the core purpose, and the aesthetic.
That way the AI knows what your end goal is. If you get too bogged down in the details without describing the feel of the app, it's not going to feel right once it's generated. So an example prompt is this.
Give me a calm minimalist productivity cave with soft green, subtle animations, and delightful microinteractions, like a digital zen garden for creators. So instead of just describing the features, like you want a meditation timer and a way to track every day that we've meditated, you're instead leading and starting with what it feels like to use the app, and that's really important.
So my next tip for you is to start small. You don't want to throw every single feature at it that you want the app or website to have. You want to work with just a few things in there.
Make sure that those come out right before you ask for additional features. So for example, you might say, "Build a minimal single page that lets me log an expense amount and see it displayed in a neat table list." Instead of asking for a fully loaded personal finance application. And the reason we start small is because if we ask for everything at once and something about it doesn't come out right the way that we need it to, it's very difficult to change that single thing without breaking everything else.
But if we start small and have a successful looking website or app, and then build on it, if any of the new builds break something, we can just roll it back and go back to the prior version, and then try to fix it from there. It makes it a lot easier to get to the end product, instead of just throwing everything at it at once.
The third tip I have for you is to use references heavily. That means upload screenshots of images that you like, that you want to use as a reference. You can upload sketches of the basic design and outline of whatever it is that you're building.
All of that's going to help Gemini actually create the final product for you. So for instance, you could say something like, match the style of this layout, and then include a screenshot of a style or website that you really like. Say you want those clean rounded edges and that minimal dark border that it has around it.
And because Gemini is so good at looking at images, this is going to help it a lot when it's creating for you. Fourth, you want to keep your prompts specific. You want to avoid ambiguous phrases like, just make the UI nicer.
And instead, you want to be specific about the elements, the spacing, the colors, and the rounding values, or again, use the references to help you be specific. So instead of saying something like, make the UI nicer, you can say, make the call to action buttons fully rounded. I want electric blue accent throughout it.
If you can give the hex number for that, so you can get a specific color you want, great. Or if you're not sure what that is, just upload a screenshot of a color and say, use this color.
All of that's going to help, the more specific you get. You can certainly keep it broad, like make the UI nicer, but then don't be surprised if the results that you get aren't exactly what you want. And then finally, add one feature at a time.
We kind of already covered this, but after you have your first build, if you're happy with it, don't try to dump more ideas onto it. Just give it one idea after another. So that if something does break, you can always go back and go back to the version that was working, and then try to add the feature again in a way with a different prompt that won't break it.
Let's put all of this into practice now. So back inside Gemini, I will paste in this prompt that I've come up with. I'm telling it that I want to create a simple daily task app.
Now, my end goal is to have a full productivity app, but I want to start small here. Just a task app. I can add more things onto it later.
I also give it the aesthetic, modern, sort of like Apple-like, soft off-white background, and one clean sage green accent. Now, you might be wondering, how did I come up with this prompt?
I even described the layout of the buttons that I want. Well, it's very simple. All you have to do is in the description of this video, will be a link to a page where I give you all five of these best practices.
You can copy these down and come over to Gemini, paste in what you just copied, and then just describe generally what you want your app or website to look like. So here I'll say a productivity app. And if you want to give any specifics, you can.
But what this is doing is it's pulling in all of those best practices, and it's going to return for you a prompt that you can then use in another chat. So here we have two choices. It may just give you one.
And so I like this one, so I'll select this one. Just come down here, copy it, and then you can start a new chat where you actually paste it in, and make sure you select canvas, of course. So now we have our prompt in here.
We have canvas selected. I can send that along and it'll start working on it.
All right, so a few seconds later and we now have the first version of our app. Up here at the top, I want to kind of explain to you what all of this means. So, you want to make sure that you're in preview mode cuz that's going to allow you to actually use the app.
Code will show you the code that was used to generate it. And then we have some other buttons here. You can see the console, you can download, you can refresh, here we can share.
I'll show you all of that later. Let's actually test out the app. So, what do I want to focus on right now?
Finish the video. Add task. There it is.
And then I can select it to show that it's actually been finished. Great, so that works. Now, let's say there was something in here that wasn't working for you.
You didn't like the way that it looked. Down here on the bottom right, you can click where it says select and ask. This will allow you to choose any element on the page.
So, for instance, right here I could select this and say "When it's completed, I want it to turn red." And then click enter. And now you see Gemini's getting to work making those changes.
All right, so let's try it out now. I'll type in again finish the video. Add task.
Check it off and now it turned red. So, perfect. I love the way it looks.
But of course, if you want to make any other changes, just use select and ask again and tell it what you want changed. Now, this is a good first version, but we want to add more onto this. So, let's come back to the chat and tell it what we want added.
I want to be able to categorize my tasks into different sections. Each will have a custom name. It should have tabs along the top for each section.
So, notice I'm just using plain English here. I'm not using any sort of technical jargon. I'm just explaining simply what it is that I want changed.
One tip I have for you while this is working is you'll notice over here on the left it says it is now finished. It says I generated the updated version, but on the right you see that's not true. It's still generating.
Gemini always does this. It will almost always say it is done before it actually is. So if you see that, don't worry.
That is totally normal. But now we have the updated version and we see we have all these different tasks or these tabs. Today, personal, work.
I can add new one, give this a name like workout or maybe fitness. Fitness, right? And I can add a new task like do a handstand.
Add task. And that it lives inside the fitness one. For work, I can say finish the video.
That lives in there and I can check everything off. So everything is looking great here. But let's add to this.
So now I'm going to tell it I want some kind of stats section that will show me how much I'm I've checked off each day, week, and month. I want graphs and charts.
All right, let's see what that does. Let's see what we got. So we now have the progress.
Oh, that doesn't work. Clicking on it doesn't do anything. I can't add new sections and this happens sometimes.
So let's fix this before it gets worse. I come over to Gemini and just describe what's going on. Clicking on the progress tab doesn't do anything and I can't click on add a new section.
I can't type in a new task. I I can type in a new task, but clicking on the add task button doesn't work. All right, and here we go.
Everything looks like it is now working. We can see the progress. It shows the completion over time, the completion rate.
We have the focus here. We're going to actually add new tasks in here. So, everything now appears to be working.
And this is the app that I wanted. Simple, not too much. It does exactly what I want, and I was able to add onto it.
Once something broke, we were easily able to fix it just by telling Gemini what was wrong. Now, before I show you how you can actually deploy any of the apps or websites you make with Canvas, let me show you what else is possible with it so that you understand what you can do with this. So, first, you can generate websites.
Here's one that I made for a fictional business called Sal's Pizzeria. And you can see some of the cool stuff you can do here, right? We have this icon that's bouncing up and down.
We have lots of buttons on the page, and you can click on them. It brings you to another part of the page. Like right here is where you can actually build your own pizza.
Then up here, we have the menu with real images here. You can add this to your cart just like that. So, yeah.
Lots of cool stuff. There's even a place where you can send a message to Sal's Pizzeria. Next, I had it build for me an entire operating system.
This kind of has this macOS feel to it. You can open up the finder and actually look at your documents here, open up the notes that you have. You can make changes to this note.
So, I might say like add changes here, save it, and then exit there, open it up again, and it's still there. You can see the pictures that are no pictures in there yet, but we have the text editor. I just showed you that.
We have a paint feature right here, and then I can export that drawing. And it says it's now been downloaded. Actually, it's been downloaded to my actual computer.
That's pretty wild. Then we have a music player here. Pretty cool.
We have a fully functional calculator here. It's a little bit off, but there we go. 9 + 3 is 12. Okay, so it works.
And there's even Gemini inside the operating system. It's pretty wild. By the way, guys, the prompts I use for all of these I'll include in that document down below.
You don't even have to enter in your email for that document. It's completely free. So, if you guys appreciate that, give this video a thumbs up and just let me know that in the comments section down below.
That's all I ask. So, what else can you do with this? Well, here I had it create for me like an arcade system.
So, this isn't just one game, it's multiple games. So, let's play Cyber Snake. Now, I'm using the trackpad on my computer.
Uh the keys to I can't get it. There we go. What else do we got here?
So, I can go back to Here we go. Let's play Pong. So, there we go.
There we go. I can use a joystick, too. Uh I'm I'm really bad at it.
And we also have Retro Flyer. Oh. Oh, this one's fun.
Yeah, so it's not just one game, it's all three like this in this arcade. It's pretty cool. And then one of the more elaborate ones I have is this app I created called Vibe Second Brain, where it's a note-taking app.
And you see it's quite extensive. You can add in a new note here, and then we have all these notes and blocks. We have an interactive graphs showing how everything interacts.
You can have daily AI summaries of all your notes. Just a whole lot going in here. It even tracks your habits and progress.
Again, all this has to be built up over time, because if you try to do too much too fast, it can break. But you see just how impressive this is. This is These are all the notes we have in here, and then you can have them all organized.
So, it's pretty cool. And then one more that I want to show you. This one I call the Wander Window.
So, the idea is you put in where it is you want to travel to. So, I can put in the the pyramids of Egypt. Then, you can select your trip vibe.
Do you want it to be romantic, boho, epic adventures? I'll choose epic adventures. And you can choose the time and weather.
So, I'll do midnight glow. Then, you can click on peer through the window. And you notice right here, it is now working.
What it's doing is generating the image based on these inputs. So, the apps that you create with Gemini can actually use AI inside of them.
Either for things like image generation, like we're seeing right here, or like I was showing you with that operating system, actually using text interactions inside of it. So, now we have Egypt, we have this adventure feel, and it's at night. So, that's pretty cool.
Once your app works the way that you want, sharing it is stupid simple. Click on the share icon on the top right, and click on share. That will give you a link that you can give to anyone so that they can access the app.
So, anyone can now come in here and type in the destination they want to go to, choose the trip vibe, and the time and weather, and click on peer through the window. And because this still lives inside of Gemini, they don't need to install anything. Just give them the link, and they'll be able to access it.
For most people, that is all they need. But if you want to deploy what you made on your own domain, there are plenty of ways to do that. You can come over to Gemini and click on the download button.
That will download the code. Then, you can use something like Vercel to actually publish it. You can do it for free, and it just takes a couple of clicks.
I'm not going to walk through that in this video, but I want to let you know that that option does exist. Like I said before, all the resources for this video can be found at the link in the description down below.
So, make sure to grab that. It's completely free. No email required.
Just grab it and build some of these things yourself. If you got something out of this, all I ask is that you give this video a thumbs up and let me know in the comments that you want more content like this. Then, if you want to see more of the powerful things that you can do with Gemini Canvas, check out this video right here.
It goes over a lot more use cases, so definitely check this out and I'll see you over there in 1 second. Bye for now.
The Hook
The bait, then the rug-pull.
The presenter displays three distinct browser-rendered applications built entirely inside Gemini Canvas to prove zero-code software creation before explaining the interface.
Frameworks
Named ideas worth stealing.
01:42list
Five Vibe Coding Best Practices
Lead with the vibe
Start small
Use references heavily
Keep prompts specific
Add one feature at a time
A systematic prompting and iteration methodology designed to prevent code generation regressions and maintain stylistic coherence when building software with LLMs.
Steal forGuiding non-technical creators or product managers building rapid MVPs and internal dashboard prototypes.
CTA Breakdown
How they asked for the click.
VERBAL ASK
16:54link
“all the resources for this video can be found at the link in the description down below. So, make sure to grab that. It's completely free. No email required.”
Offered as an immediate no-friction resource document containing copy-pasteable prompt recipes with no lead capture gating.
Add Modern Creator as a preferred source and Google shows you more of our breakdowns in Search, Top Stories, and AI Overviews. It only changes what you see, and you can undo it in your Google settings anytime.
Add to Preferred SourcesOpens your Google source preferences with us pre-loaded. Tick the box and you're done.
One creator ran the exact same week of real work through both frontier models, a website, a game, a script, an inbox, a full business audit, and tracked where they actually diverged.
Paul J Lipsky hands his entire YouTube edit, silences to motion graphics, to Claude Opus 5.5 running through an MCP-connected editor, and walks through exactly what still needs a human pass.
A week where Anthropic and OpenAI dropped flagship models on the same day, and one weekly AI news host ran them side by side on real writing, design, and video-editing work.
A screen-recorded build of a mountain-cabin marketing site, from a bare ChatGPT prompt to a scroll-scrubbing hero video, matching icons, and a photo gallery, all generated inside one chat.
OpenAI, Anthropic, and Google all released flagship models in the same week, Gemini Notebook quietly capped how much you can generate, and Grok's new payments plugin lets a bot spend your money with your sign-off.
00:19
00:31
00:46
01:26
01:42
01:52
02:04
02:32
02:45
02:59
03:12
03:25
03:52
04:05
04:18
04:45
04:58
05:11
05:38
05:51
06:05
06:44
06:52
07:11
07:24
07:37
07:45
08:17
08:44
09:10
09:30
09:37
09:50
10:04
10:17
10:30
10:43
10:53
11:19
11:36
11:50
12:16
12:35
12:56
13:09
13:23
13:36
13:55
14:02
14:26
14:42
14:56
15:09
15:35
15:49
16:02
16:42
16:54
17:08
17:35
25:15
12:38
26:15
14:21
24:02
13:02