Hands-on Lab

Ask Gemini to Explain Something

Let's start with the simplest possible interaction. Type this exact prompt at the > cursor. This is a "knowledge query," meaning you are asking the AI to retrieve and synthesize information.

Gemini should produce a structured response with:
  1. A clear definition of agentic AI
  2. Three comparison examples (e.g., "Regular: 'Write me an email' vs Agentic: 'Draft a follow-up email based on my last 3 conversations with this contact'")
  3. An emphasis on autonomy, tool use, and chained reasoning

Read the output carefully. Does the explanation make sense? Is anything missing or inaccurate? This is the core skill: evaluating AI output with a critical eye.

Audit Real Code

Now let's make it practical. We will ask Gemini to analyze a real HTML file. First, create a small test file for the AI to examine:

Now ask Gemini to audit its own work:

Gemini should return a structured review like:

  Issue 1 (Medium): Missing viewport meta tag
    - The page won't render correctly on mobile devices.
    - Fix: Add <meta name="viewport" content="width=device-width, initial-scale=1.0">

  Issue 2 (Low): Button lacks aria-label
    - Screen readers won't know what the button does.
    ...

This is a "Human-in-the-Loop" audit: the AI identifies issues, you decide what to fix.

Verify and Correct

Now verify the AI's claims yourself. Open test-page.html in your browser (right-click the file in VS Code and select "Open with Live Server" or just double-click the file). Then ask Gemini to fix the issues it found:

Create Multiple Test Files

To practice automation, we need a few files to work with. Ask Gemini to scaffold a small project:

Wait for Gemini to finish. Check your file explorer. You should now see 4 new files in your folder.

The Dry Run: Propose Without Changing

Here is the critical technique. We will ask Gemini to analyze all the HTML files and suggest improvements, but we will explicitly tell it not to modify anything yet:

Gemini should output a review table like:

| File         | Meta Description              | OG Title       | Issues Found  |
|--------------|-------------------------------|----------------|---------------|
| index.html   | "Personal portfolio of..."    | "My Portfolio"  | Missing lang  |
| about.html   | "Learn about my background.." | "About Me"      | No alt on img |
| contact.html | "Get in touch via this..."    | "Contact"       | Form missing  |
|              |                               |                 | action attr   |

No files were modified. You are in full control.

Approve and Apply

After reviewing the proposals, pick the changes you want and tell Gemini to proceed. You can approve everything, or be selective:

Or, be selective:

Verify the Changes

Always verify. Ask Gemini to confirm what it changed:

Open the files in VS Code and compare. Does the output match what Gemini claimed? Building this "trust but verify" habit is essential for professional AI use.

Generate a Roadmap

Ask Gemini to analyze your project and create a structured improvement plan. This is like giving a junior engineer a design review assignment:

Gemini creates "improvement-roadmap.md" in your folder.
Open it in VS Code. You should see a structured document like:

  # Project Improvement Roadmap
  ## Current State
  - 3 HTML files, 1 CSS file
  - Dark mode styling, basic semantic structure...

  ## Improvement 1: Add Viewport Meta Tag (HIGH IMPACT)
  **Why:** Without it, mobile users see a desktop-sized page...
  **What:** Add to index.html, about.html, contact.html
  **Time:** 2 minutes

  ## Improvement 2: ...

This is now a persistent "brain" that the AI can follow.

Execute the Roadmap Step-by-Step

Now comes the agentic part. Instead of manually implementing each improvement, you tell the AI to follow its own plan:

After it completes, continue with the next one:

Ask for a Summary Report

After completing a few improvements, ask the AI to document its work. This creates an audit trail:

The CRISP Framework

Use this five-part structure for any complex prompt. Each letter stands for a component that makes your prompt more effective:

Practice: Transform a Weak Prompt

Here is a common, weak prompt. Your task is to rewrite it using the CRISP framework, then compare the outputs:

Now try this CRISP-structured version:

The weak prompt will produce a generic, unstyled page.
The CRISP prompt will produce a polished, portfolio-ready site
with semantic HTML, responsive design, and professional aesthetics.

Notice how specificity controls quality.

Prompt Cheat Sheet

Save these power phrases for your future workflows. They consistently improve AI output quality: