Skip to main content
Building with Google AI Studio follows a clear process. You start with a prompt, see a result, react to it, and iterate. Each cycle brings the app closer to what you actually want. This page walks through the same process used in the live demo, including the specific techniques that make the biggest difference.

Step 1 — Prepare your prompt in Gemini first

Do not start building until you have a clear prompt. Open Gemini chat in a separate tab and use it as a brainstorming partner before you touch Google AI Studio. The most effective technique is the five-question method. 
Ask me five questions one at a time to understand what I want to build in Google AI Studio.
Start with my role and the problem I'm solving.
Use plain, encouraging language.
Summarise what I'm building in one bold sentence.
Then write a ready-to-use build prompt.
Make the final product visually elegant, clean, and modern.
Once Gemini has asked its five questions and generated your build prompt, copy that prompt and take it into Google AI Studio.
The five-question technique forces clarity before you build. Skipping it and prompting directly tends to produce a generic result that takes more iterations to steer into shape.

Step 2 — Set up your project in Google AI Studio

Go to aistudio.google.com/apps and start a new project.
Start with Gemini Flash. It is fast, cost-effective, and capable enough for most initial builds. Flash achieves around 95% of the quality of the Pro model at a fraction of the token cost.Only switch to Gemini Pro if a bug persists after several attempts to fix it. Pro is significantly more capable at reasoning through complex problems, but it is slower and costs more. Treat it as a specialist, not your default.
Before you paste your build prompt, consider setting a system prompt. This applies globally across all interactions in your project.Examples of useful system prompt rules:
  • Always confirm before making any changes
  • Do not change existing styling unless asked
  • Always use readable column widths and generous whitespace
  • Confirm the change you are about to make before you make it
System prompts prevent the AI from overwriting things you are happy with when you ask for a small change.
You can attach files to give the AI additional context. Useful inputs include:
  • A photo or sketch of what you want the app to look like (hand-drawn counts)
  • A screenshot of an existing tool you want to improve or replicate
  • A PDF or spreadsheet with the data the app should work with
  • A recording of a meeting where you described the problem
The model can process images, PDFs, spreadsheets, and audio — so “I’ll describe it” is rarely the fastest option.

Step 3 — Paste your build prompt and run

Paste the prompt Gemini generated and run it. The model will ask any clarifying questions it needs — answer them briefly and let it build. The first result will not be perfect. This is expected and completely normal.
Read through the first result like you are giving feedback on a draft, not evaluating a finished product. What looks right? What is missing? What needs to move? That reaction becomes your next prompt.

Step 4 — Iterate in the spirit of vibe

Each iteration is a conversation. You see something, you describe what you want to change, and the AI adjusts.
Be specific about what you want to change without specifying how to change it. The AI handles the implementation.Good: “Move the summary section above the table. Give it a light background colour and more padding.”Vague: “Make it look better.”Start with layout, then content, then fine details. Changing layout late in the process can sometimes disrupt content that was already working well.
You can add features at any point in the process — not just at the start. If you get to the middle of a build and realise you want a new section, just describe it.Example: “After the main results area, add a section that recommends three quick wins based on the data shown. Format them as a numbered list with a short explanation under each.”
If a change moves in the wrong direction, say so directly. You can also describe the correct state and ask it to return to it.Example: “The previous version had the table at the bottom — please restore that layout and keep the new header styling you just added.”If you hit a persistent issue that Flash cannot resolve, switch to the Pro model temporarily. Pro is better at reasoning through complex layout or logic issues.

Step 5 — Use Focus Mode for visual fixes

Focus Mode lets you point to a specific element on screen and describe exactly what you want to change, without relying on written descriptions of where things are. To use it: click the Focus Mode button in the toolbar, then click on the element you want to change. You can draw on the screen to mark the specific area, then type your instruction. This is the most efficient way to fix spacing, alignment, and styling issues without lengthy back-and-forth.

Step 6 — Know when to start fresh

Long vibe coding sessions accumulate changes. After many iterations, the underlying code can become inconsistent and harder for the AI to modify reliably. A practical approach: when you have a version you are mostly happy with, take a screenshot of the full app. Then start a new project in Google AI Studio, attach the screenshot, and say: “Build a clean version of this app based on what you can see in this screenshot.” This gives you a structurally cleaner codebase to continue iterating from.
Security audits of heavily iterated AI-generated code often surface vulnerabilities. If you are planning to publish your app beyond a small internal group, use Replit’s built-in security scan before it goes live.

Ready to build your own?

Use the guided prompt to build your first app and share it with the group