Experience "Vibe Coding" with Gemini Canvas

Hello, this is the official note editorial department for Google's AI, "Gemini".

Are you familiar with the Canvas feature included in Google's generative AI, Gemini? With this year's update, Canvas has evolved significantly, allowing a wide range of users—including engineers, educators, and content creators—to easily turn their ideas into apps and tools.

Of particular note is a new development style that allows AI to write code even from vague ideas or sketches, called "Vibe Coding". In this article, we will focus specifically on "Vibe Coding" and introduce practical ways to use Gemini Canvas along with prompt examples.

If you would like to learn the basics of how to use Canvas, please also check out the Canvas basics article below.

What is Gemini Canvas? A creative space expanding with the latest updates

Now, let's briefly review what Canvas is. Canvas is an interactive development space within the Gemini app. By selecting "Canvas" in the chat input field, you can create and edit not only text but also code with AI in real-time.

A major appeal is the ability to work alongside AI on everything from polishing text documents to creating code using HTML, CSS, JavaScript (such as React), and Python.

For example, just by asking, "Create a newsletter registration form for a website," it will generate the HTML code for the form, and you can immediately preview its appearance and behavior on Canvas. If you correct the code slightly, the changes are immediately reflected in the preview, allowing you to go from prototyping to sharing your ideas all at once without the hassle of switching back and forth between multiple editors.

And this May, when Gemini 2.5 Pro became available to everyone, Canvas evolved to be even more intuitive and powerful. This has made the new development experience of "turning ideas into apps without writing code" much more accessible.
With Canvas, even complex ideas can be translated into code quickly and accurately from simple descriptions, dramatically lowering the barrier to software development and making prototyping exponentially faster.

Furthermore, various features have been added to Canvas, such as generating web pages and infographics, creating AI audio summaries from text, and importing/editing Deep Research reports. (We will introduce these new features on another occasion.)

So, what exactly is "Vibe Coding" to make the most of this Canvas?

"What is "Vibe Coding"? - A new concept of having code written from vague instructions

In a nutshell, Vibe Coding is a "new development style where you ask the AI, 'Something like this!' and have it write the code for you." Instead of a person programming line by line as before, you simply convey vague ideas or images like "I want something like this" in words, and the AI proposes specific features and designs and generates the code.

For example, just by saying, "I want a simple app where everyone can share company ideas," Gemini will think of a list of necessary features and UI designs, and write the code using appropriate technologies like React and Tailwind CSS.

Supporting this magical experience is the superior multimodal understanding capability of the evolved Gemini 2.5 Pro.Gemini 2.5 Pro is a natively multimodal model capable of handling long-context text, images, and videos, and it has demonstrated high performance by taking 1st place in all 10 categories, including Text, Vision, WebDev, Hard, and Coding, in developer evaluations (WebDev Arena).

Furthermore, it is also possible to capture the "vibe" from rough sketch images, not just text, and turn them into code.

In fact, attempts to show Canvas hand-drawn UI ideas or screenshots of existing materials and have it write code to reproduce their layout and elements have also become a big topic on X.

Even more convenient is the fact that you can integrate generative AI features into your app with just one click on Canvas. In the bottom right of the app screen where you generated code in Canvas, a "Add Gemini features" button appears, and by simply pressing it, you can embed Gemini's AI response capabilities directly into that app.

For example, if you press this button after creating an exam preparation site, you can instantly evolve it into a sophisticated app where the AI automatically generates questions and answer choices every time. Being able to give your own apps the power of conversational AI without additional programming or paid API integration is a truly groundbreaking feature.

In this way, Vibe Coding, which can be realized with Canvas and Gemini 2.5 Pro, removes the barrier of specialized knowledge and allows you to immediately give shape to your desire of "I want something like this," making it truly a next-generation development style.

Now, let's look at some concrete examples of how it can be utilized.

You'll want to try it! Concrete examples of using Canvas

By using the latest Canvas, you can easily give shape to ideas you had previously given up on, thinking, "I can't write code, so it's impossible..."

For example, this represents a simulation of a new universe.

You can also try it yourself from the link below, so please give it a go.

https://gemini.google.com/share/ec4dbc626080

In fact, various works utilizing Canvas are being shared on X. This time, I will introduce some of the most interesting ones. Everyone, please try giving shape to your own ideas as well.

Quiz App

With Canvas, you can easily do everything from gathering quiz topics and brainstorming ideas to creating the actual app. You can even create humorous quiz apps like "Internet Old-Timer Membership Qualification." You can actually play it, so please give it a try.

App for Children

This is a "Hiragana Flashcard" app created for children to learn. With Canvas, you can easily create tools useful for learning or simple games that parents and children can play together.

Creative AI Mini-Games

Canvas is perfect for creating practical apps that are useful for work, as well as for playful creative activities.

For example, you can develop fun apps just by asking with a photo and a few simple words, like "Make a game using this photo of a cherry blossom and a dog."

You can also combine it with image generation AI like the one below to create even more advanced games.

As you can see, with Gemini's Canvas, anyone can create interactive works depending on their ideas.

Tips for Vibe Coding with Canvas

Vibe Coding using Canvas is truly fun, but there are a few tips to help you get the most out of it.

Here are some particularly important points.

If you're stuck for ideas, try consulting the AI

If you don't have a clear image of the tool's details, try asking Gemini, "I want to make something like this. Please think of a plan and specifications for it." before making it concrete and using Canvas; this will help you create something closer to your vision.

For example, if you were struggling with taking meeting minutes, you could just give the instruction, "I want to easily summarize meeting minutes and make them easy to understand at a glance. Make an app," using Gemini's Canvas feature, and it would create an app for you.

However, if you first tell Gemini to "write out the specifications," it will output detailed information like the following. Using the Canvas feature after that makes it easier to create a more concrete and useful app.

While looking at this requirements definition document, let's convey the issues you want to solve and the features you want again.
I will add an instruction to Gemini to make it a format that is easy to deploy internally.

Then, it suggested a feature to copy in markdown format.
Now, let's have it build the app with these conditions.

Furthermore, let's add the Gemini AI feature and try inputting some meeting minutes.

Here is the finished app. Please try it out and add features to it.

https://g.co/gemini/share/f0c39172382e

Have a purpose (North Star) for "why you are building it"

"Who do you want to feel what, and with this app?"

Before you start development, clarifying this kind of "purpose" for yourself will become an important compass for creating a steady axis.

With this "North Star" goal, whenever you get lost in the details along the way, you can always return to it as a foundation for your decisions.

Don't aim for perfection; just try to get it running first

Instead of aiming for a perfect app, try to complete something that "works" first. As the saying goes, "Done is better than perfect"; what matters is actually building it.

Don't overthink it; just talk to Gemini about the ideas in your head. You can make changes at any time, and even if your plans change along the way or you sometimes have to start from scratch, it's all part of a fun process that leads to new discoveries. Enjoy those changes, keep iterating through dialogue and trial and error, and find your ideal form.

Let's give it a try!

Canvas is easy for anyone to use in the free Gemini app. For basic information on how to use Canvas, please check out our Canvas Basics article here.

"But I don't know what to build..."

In that case, don't overthink it—just ask Gemini directly, "Give me some fun app ideas!" It will surely give you some creative inspiration.

As you converse with AI, your ideas take shape. Please feel free to enjoy this new creative experience.