> ## Documentation Index
> Fetch the complete documentation index at: https://academy.pathfindr.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Building with Google AI Studio

> A step-by-step walkthrough of the vibe coding process using Google AI Studio — from your first prompt to a working, iterable app.

export const Quiz = ({question, options, correctIndex, explanation}) => {
  const [selected, setSelected] = useState(null);
  const [showResult, setShowResult] = useState(false);
  const handleSelect = index => {
    if (showResult) return;
    setSelected(index);
    setShowResult(true);
  };
  const isCorrect = selected === correctIndex;
  return <div className="my-8 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-700 bg-gradient-to-br from-zinc-50 to-white dark:from-zinc-900 dark:to-zinc-800 shadow-sm">
      <div className="flex items-center gap-3 mb-4">
        <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-900/40">
          <span className="text-xl">📝</span>
        </div>
        <div className="flex flex-col">
          <p className="font-semibold text-zinc-800 dark:text-zinc-100 m-0">Knowledge Check</p>
          <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5 m-0">Select the best answer</p>
      </div>
      </div>
      
      <p className="text-zinc-700 dark:text-zinc-200 font-medium mb-5 text-lg leading-relaxed">{question}</p>
      
      <div className="space-y-3">
        {options.map((option, index) => {
    const isSelected = selected === index;
    const isCorrectOption = index === correctIndex;
    let optionStyles = "border-zinc-200 dark:border-zinc-600 hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20";
    if (showResult) {
      if (isCorrectOption) {
        optionStyles = "border-green-500 bg-green-50 dark:bg-green-900/30";
      } else if (isSelected && !isCorrectOption) {
        optionStyles = "border-red-500 bg-red-50 dark:bg-red-900/30";
      } else {
        optionStyles = "border-zinc-200 dark:border-zinc-700 opacity-60";
      }
    }
    return <button key={index} onClick={() => handleSelect(index)} disabled={showResult} className={`w-full text-left p-4 rounded-xl border-2 transition-all duration-200 ${optionStyles} ${!showResult && 'cursor-pointer'} ${showResult && 'cursor-default'}`}>
              <div className="flex items-start gap-3">
                <div className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-bold ${showResult && isCorrectOption ? 'border-green-500 bg-green-500 text-white' : showResult && isSelected && !isCorrectOption ? 'border-red-500 bg-red-500 text-white' : 'border-zinc-300 dark:border-zinc-500 text-zinc-500 dark:text-zinc-400'}`}>
                  {showResult && isCorrectOption ? '✓' : showResult && isSelected ? '✗' : String.fromCharCode(65 + index)}
                </div>
                <span className="text-sm text-zinc-700 dark:text-zinc-200 leading-relaxed">{option}</span>
              </div>
            </button>;
  })}
      </div>
      
      {showResult && <div className={`mt-5 p-4 rounded-xl ${isCorrect ? 'bg-green-100 dark:bg-green-900/40 border border-green-200 dark:border-green-800' : 'bg-amber-100 dark:bg-amber-900/40 border border-amber-200 dark:border-amber-800'}`}>
          <div className="flex items-start gap-3">
            <span className="text-xl">{isCorrect ? '🎉' : '💡'}</span>
            <div className="flex flex-col">
              <p className={`text-sm font-semibold m-0 mb-1 ${isCorrect ? 'text-green-800 dark:text-green-200' : 'text-amber-800 dark:text-amber-200'}`}>
                {isCorrect ? 'Correct!' : 'Not quite right'}
              </p>
              <p className="text-sm text-zinc-600 dark:text-zinc-300 m-0 leading-relaxed">{explanation}</p>
          </div>
          </div>
        </div>}
    </div>;
};

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.

<Accordion title="Use this prompt in Gemini first" icon="lightbulb">
  ```text theme={null}
  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.
  ```
</Accordion>

Once Gemini has asked its five questions and generated your build prompt, copy that prompt and take it into Google AI Studio.

<Tip>
  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.
</Tip>

***

## Step 2 — Set up your project in Google AI Studio

Go to <b>aistudio.google.com/apps</b> and start a new project.

<AccordionGroup>
  <Accordion title="Choosing your model">
    Start with <b>Gemini Flash</b>. 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.
  </Accordion>

  <Accordion title="Adding a system prompt">
    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.
  </Accordion>

  <Accordion title="What you can upload">
    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.
  </Accordion>
</AccordionGroup>

***

## 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.

<Tip>
  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.
</Tip>

***

## 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.

<AccordionGroup>
  <Accordion title="How to write good iteration prompts">
    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.
  </Accordion>

  <Accordion title="Adding features mid-way through">
    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."
  </Accordion>

  <Accordion title="When the AI gets it wrong">
    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.
  </Accordion>
</AccordionGroup>

***

## 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 <b>Focus Mode</b> 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.

<Warning>
  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.
</Warning>

***

<Accordion title="Test your understanding">
  <Quiz
    question="You have been building your app for two hours and the AI keeps making changes to the wrong areas when you ask for adjustments. What is the most effective next step?"
    options={[
  "Continue with the same project and add more specific instructions",
  "Switch to Claude Code and rebuild from scratch",
  "Take a screenshot of the current app and start a fresh project using that screenshot as the input",
  "Export the code and send it to a developer for cleanup"
]}
    correctIndex={2}
    explanation="After many iterations, the underlying code becomes harder for the AI to manage reliably. The recommended approach is to screenshot the current state, start a new project, and rebuild from that visual — giving you a cleaner foundation without losing the design progress you have made."
  />
</Accordion>

***

<div className="mt-8" />

<Card title="Ready to build your own?" icon="hat-wizard" href="/leadership-cohort/week-6-create-your-own-apps-vibe-coding/challenge">
  Use the guided prompt to build your first app and share it with the group
</Card>