How To Be More Productive Using AI: A practical demo and step-by-step guide on how to use AI to speed up and improve tasks.

Introduction

What is vibe coding (and what it is not)?

I will try to give an overview how you can vibe code but not to have immediately hard feelings from developers.

I'm using vibe coding to vibe code applications for myself.

Not to sell them, not to act as an expert or something like that, no.

I think that there is so much misinterpretation of a term vibe coding in the in the discourse because vibe coding is not something that you can pretend that you are developer you are software engineer or

something like that so for example my dad is a vibe auto mechanic or vibe car mechanic because he is trying to fix something on his car himself and when and when he screw up everything then he goes to the uh to the real expert to fix his car so

Two ends of the vibe coding spectrum

the vibe coding i think that there is so much pressure and so much emphasis of the coding part while we are forgetting the first one so in developer community vibe coding means that you

You use your expert knowledge to help yourself to build the products or iteration in the sprints are much faster. And it's completely fine. I'm not against it.

It's something that can be fixed on the side of the engineers and it's something completely out of my reach.

So vibe coding on the other side of Continuum is when the vibe is your expert knowledge from any sphere of your professional work or your everyday life and coding part is just a tool to get something functional on your side so I think and

Why Google Gemini/AI Studio for beginners

Choosing between Gemini and AI Studio

why I decide have decided to use the use case of the Google build or Gemini build is because I think that they have the most user -friendly interface for the beginners because if you try to wipe code through the cursor windsurf or something like that if you are not developer you will be completely lost because you need an expert knowledge how to

execute some of the commands how to uh how to operate on the on the logs code bases etc for the using the google ai build or gemini ai build you don't need to know anything about coding and I think that's something that we need to to get used to it generally in

everyday life and my experience shows that for example if I build and I will show you a couple of of my examples of the vibe coded applications I cannot not scale my product to be ready to use by the major audience or hundreds of thousands of people and in that particular scenario I would need a help from your side if you are developer how to optimize it how to scale it and

etc but if I want to build an application for me for my community for for my students, for my, I don't know, maybe narrow circle of stakeholders, you can do it for free, completely for free, inside of the Google Build.

So the first question I am always encountering when I'm explaining about how to use Google AI Build, because Google AI Build is located in the Google AI Studio.

And the first logical question is, is, so why would I use the Google AI Studio, and why would not use it through the Gemini, and vice versa?

So the only difference in between those things, for the beginners, of course, is when you activate a build in the Google Gemini, you are in the Google Build AI Studio.

Context stacking inside Gemini

But the difference, and the huge difference for average user user is, that 1through the Gemini application, you can do something we call context stacking.

So for example, you can do your work. For example, if you are a teacher, marketing expert, ager specialist, whatever, you can do your everyday routine inside of the Gemini like you are doing inside of CGPT.

and after i don't know three four seven seventeen iteration you come up with some idea okay this can be an application for me because i will do this repeatedly in my everyday life and you can and i will show you example i think i have it here yes so this was this particular situation so

A quick multimodal example

So are you familiar with the footage from this particular chat? So this is a 17 seconds video of Giannis from the Milwaukee Bucks, how he classically doing a traveling fault.

So and I uploaded the video and I was amazed. so I just prompted what's strange in this video and he gave me the correct

answer so that that is the most I think crucial information about why the Google ecosystem is good for the beginners because Google only has a real real real multimodality because, for example, other large language models will try to find a transcript and to try to grasp what is happening on the video.

The Google actually watches the video and can analyze everything you do inside. side after that this is this was just from the top of the mind just for the sake of the of the of this particular occasion so I then stacked the context

From idea to app with Build

with the new application and I said build me an app for the analyze analyzing similar footage for errors in rules traveling fall etc and then he He uses the ecosystem from the Google build vibe coding application and build your application.

So that is the only reason if you are going to use the Gemini, for example, and to use the build function, the only reason you will do it when you come up with the idea in the middle of doing your everyday work.

When to use AI Studio vs. Gemini

But for every other reason, it's better

Costs, quotas, and sharing limits

to use it through the Google AI studio so couple of just remarks so first if you want to build application for you you can use it completely for free without any API costs or any knowledge about MCPs etc so if you are building it

for yourself if you want to build an application to use for the commercial reasons to sell to other or maybe to deploy it on the cloud or on the local premises then you need to have API keys and to actually pay for the usage but if

you are going to use it yourself and the people who are using it from the shared link if you I will show it in a minute you can share it through the link then you will have zero costs but you need to be aware if you are going to to build an

application with some of the more heavy or more costly functions then it will go through your free quota daily quota really fast if you are going to build an application with the video or creating a video or creating some kind of the multi heavy multimedia in that particular scenario you need to be aware that your daily quota will rest reset very very or

A recent update that helps non-developers

it will perish very very very fast so the last update on this platform was I think three or four days ago and it is a goldmine for the vibe coders who are not

coming from the end of the developers and software engineers so prior to this update you didn't know if you are not a very experienced developer in the Google ecosystem Vertex and Google Cloud you didn't know what what is the

capabilities or what are the capabilities of the of the Google AI studio or the build studio so you need to guess and try with back and forth what is what is possible what's not now you have a very user friendly as you

Preselecting capabilities

can witness a window with 16 features from the google ai studio so you can select them and you can combine them prior to the prompting so for example if i want the application to manipulate with the images or to edit the images i will select the nano banana powered app

and as you can witness here it's already pre -selected in the in the prompt in the prompt window so now when I prompt it it will use the feature from the pre selected and you can combine the number you want from from those the second

method to use it is not to bother with because if you are experienced developer developer, you don't need because it's, I don't know, maybe it can be very embarrassful or something like that to use it from the preselected.

Naming features in the prompt

So you can name it in the prompt. So you don't need to preselect. You can name it and it will automatically engage with that feature.

How to vibe code effectively

So the wipe coding in the manner as I explained it in the introduction, Introduction how I I like to use it and then I will show you a couple of examples

Start broad and iterate like an MVP

Is to start with something broad Completely broad for example, and we can just do it for for testing.

For example, we can pre select For example, it can be transcribe audio for example, and I Need a simple

Focus on usefulness over optimization

transcription tool for Serbian language so the why I like this approach because it allows you to test the features like the MVP from the agile methodology so you can test the MVP and you can immediately say what you want to be

corrected and I know from the perspective of developers sometimes it seems or it not sometimes it's always the expert developer can notice I don't know the burden inside of the lines of code it can be I don't know maybe better

optimized or something but also you need to understand if you are building applications for yourself the only measure is it good or is it bad is it useful for me i don't care about the back end i don't care about that if the application is fast doing work for me doing job for me i don't care for the back end is it good environment is it good

uh in in optimizing the code or something like that so always when you are doing this type of of the vibe coding, it's very strange to do it as a main task.

Work alongside your daily tasks

So you can combine it with your everyday task. And while you're doing some other stuff, you go back and forth in between tabs and just refer and let the back end process to do it itself.

So this is not.

High-code vs no-code: where this fits

And I'm having problems with so -called no code environments environments or something like that. This is a very high code environment.

But the only, I think the only crucially and natively no code application I know, and it's also coming from the Google package of the application, it's called Google Opal. So Google Opal is

similar to NA10 or Make or something like that. But you as a user cannot see this. And that is a no code environment. This is a heavy code environment.

Because you can interact with the code. You can go inside the code and actually manipulate inside of that.

Live example: a simple transcription tool

So as you can see, he asks me to allow the mic because I asked the application for transcriptions. and as you can see this is a very basic transcription tool and as you can see

here in any time I can retract the features from the beginning and include some of the features if I think that I need them also you can use the pre -selected features you want or you can be I don't know an expert or you You want to have a use case for you, so you just spit it out.

And you don't need to be technical. You don't need to be polite. You don't need to be, in any case, a guy who tries or a person who tries to be very specific. No, you don't need to be specific. You just go back and forth and test the different features.

And when you are satisfied with the level of quality, OK, you can use it for yourself.

and I will always advise if you want to sell the application always consult a developer and software engineer but if you want to use it for yourself the only measure is how good is it for me and is it in a good quality and is it a good for my for my use case the only thing that I and I will show you just in a in in a matter of seconds if, okay, it's available.

Discovering and reusing apps

So here in the left, you have a gallery. Gallery is the showcased applications from another people. It's mainly from Google developers, but the good thing from this gallery

is that you can use the application and you can fine tune them for your use case. so you can click for example on for example this is a tool to generate like

yourself from the past so you can click on that and you can transfer it on your canvas and you can build from that so you don't need to build from scratch so this is some kind of open source open source thing in in the your apps you

you have your applications. And you need to understand, every canvas mode you're getting from the Gemini application on the same account, you will have it here.

It's similar to the Cloud environment with artifacts. When Cloud create an artifact, it can be launched in the artifacts.

And you can always go back in your chat history and also see the artifact there. there so for example you can see our little tool here so you can just go back

and start to build again or rebuild it or use it but I will just show you in a couple of minutes and I will finish about some of my application I built from for myself so it's not good in in a case of design or maybe in the code optimization or something like that but it does work for me and that's something something that I want from the vibe coding and not something else.

Examples of personal vibe-coded apps

Aspect Ratio Visual Creator

So this one is called Aspect Ratio Visual Creator.

So this application is built for me to help me with some tasks.

OK, they are completely available, for example, in Google Gemini environment. But you need to go step by step. step.

So I built an application when I'm creating an image that I can create a different aspect ratios immediately of the pictures.

And another feature is to edit existing image and try to have different aspect ratio.

What works, what doesn’t, and required features

And I can tell you from the experience google tools are not good in repurposing 69 in 9 16. so going from the landscape on the vertical it's completely rubbish inside of the google uh in google

environment but if you are going from uh from 9 16 to 16 9 then it's good because uh why i'm speaking about when i when i speaking about vibe coding so what do you need to know to build such

an application so you need sometimes you need to know which feature you need from the google environment to use for example i tried different combinations and it was a huge failure and when i named so you need to use generative fill to come up with the canvas then it

clicks so you cannot be so called vibe coder without any knowledge of the feature so you need to know some of the capabilities of the AI tools to be able to get the maximum of of the results another one and this is from my

my perspective I think it's on the same account I think it's on the same account

Novel Visualizer

just second yeah yes yes yes so it's called novel visualizer so I tested it in some of my examples so I got an idea because in my everyday life I have so so much textbooks without any of the visuals inside of them.

And if I want to illustrate them, I need to go, for example, in Nanobanana or Seedream or Midjourney and to come up with the different visuals and to manually insert them inside of the manuscript.

So this particular tool, as you can see, it's very, very simple. so I upload a manuscript I don't know if I have on this particular occasion any document here but no it's it's it's not important but just to explain you what

it does on the first hand when I write code it on the first candidate it was very simple so it will just create a crucial scenes and based on those scenes it will create you six seven eight nine images and that's it but it's not a

process of my vibe coding it is not a vibe coding if you are satisfied with the first iteration vibe coding means that you are programming with the natural language and you need to have a different features and different different versions of that application so now this novel visualizer when I

From first draft to full workflow

upload a manuscript it can be a 200 pages book first it analyzes the text and create a constant or consistent characters from that after that it creates 10 12 15 scenes and after that you can decide okay i want to use a consistent characters they are a main or side characters

from the manuscript and after that it will create the old document for you so it will be automatically inserted inside of your manuscript and you can download it from this particular particular application so from the development side

developer will always say okay this can be better this can be maybe with better user interface with better maybe backend etc but if if I need something like that then I will hire the developer but if I want the applications which are good for

me then I will create it through this so all of the applications I'm creating through this is for me my students my community and for the purposes of that

Sharing and developer handoff options

that so you can share it here share app and in fact if you are going to the share app you are sharing it like the Google document or Google Drive item so you just uh go through the security and say everyone with the link can use it and that's it the user on their behalf just need to be logged in inside of their Google account and that's it they don't need any other permissions

or any other tools for that but for the developing side of the job you can deploy the app you can save it to the github you can download the app repositories libraries etc so you can you can go manually and you can copy the

app so everything you need is is here so from my experience and I will finish if

Conclusion: what are you vibing?

If you are using the vibe code, I don't know, hype, we are living, I think in the past one and a half or maybe two years, we just need to be strictly about what we are vibing.

Vibing domain expertise vs. software expertise

So if you vibing your software developer knowledge, that's completely different story.

But if you are expert in, for example, my main job, I am a teacher on the faculty. difficulty, I teach, for example, marketing, public relations, et cetera.

I'm vibing my knowledge, for example, like this. I'm vibing my knowledge about what the visuals needs to be in the case of the aspect ratio, dynamic or something like that, or text, no text, which kind of text needs to be, typography, et cetera. I'm vibing that and don't bother with the coding. coding.

On the developing side, you are much more engaged with the coding part and you are vibing your knowledge about software development and you get the inputs from the client, from the product owner, project manager, product manager, etc.

So we need just to divide those two sides of what we are vibing.

My stance and scope

So this explanation I gave to you, I'm vibing my expert knowledge knowledge and don't care about the code part.

And generally speaking, when people speak about vibe coding, they think about vibing your knowledge about software development, it's completely different story. And I will never engage because I'm not expert in that.

Thank you.

Finished reading?