Module 5 — Vibe Coding in Google AI Studio
You are about to build HabitForge AI — a
real, 4-screen, AI-powered habit tracker with a live shareable URL — entirely by prompting Google AI
Studio. No code editor. No setup. Just you, your prompts, and Gemini.
What You Build
HabitForge AI
4-screen habit tracker with AI coaching, streak
analytics, Gemini suggestions — live & shareable.
What You Learn
5 Vibe Techniques
Specification, Annotation, System Instructions,
Chain-Build, and Debug Prompting.
Platform
Google AI Studio
Free. No credit card. Sign in with any Google
account. Click Build in the left sidebar.
Your Output
Live Shareable URL
A real link. Share it. Post it on LinkedIn. Add
it to your portfolio. It runs in anyone's browser.
What is Vibe Coding?
Coined by AI researcher Andrej Karpathy in early 2025 — the man who built Tesla
Autopilot — vibe coding describes a workflow where instead of writing code line-by-line, you
describe what you want in plain language and let the AI build the entire application.
Collins Dictionary named it Word of the Year 2025. Google AI Studio's Build Mode has been used to build hundreds of thousands of apps — from simple tools to full-stack multiplayer games with Firebase databases and Cloud Run deployment. All from natural language prompts.
Traditional developer: writes 500 lines, configures build systems, wires APIs manually. Ships in weeks.
Vibe coder: writes one brilliant prompt. Ships in hours.
Collins Dictionary named it Word of the Year 2025. Google AI Studio's Build Mode has been used to build hundreds of thousands of apps — from simple tools to full-stack multiplayer games with Firebase databases and Cloud Run deployment. All from natural language prompts.
Traditional developer: writes 500 lines, configures build systems, wires APIs manually. Ships in weeks.
Vibe coder: writes one brilliant prompt. Ships in hours.
The App You're Building — HabitForge AI
Dashboard
Add Habit
Analytics
AI Coach
7
🔥 Day Streak
4/5
✅ Done Today
86%
📊 This Week
✓
📚 Read for 30 minutes
🔥 12 day
streak
✓
🧘 Morning Meditation
🔥 7 day
streak
💪 Morning Exercise
Not done yet today
← This exact app. Built by you. In one session.
Your 6-Phase Build Journey
1
Foundation Prompt — Specification Prompting
One massive SPEC prompt
builds the entire HabitForge AI shell — 4 tabs, dark UI, habit cards, streak
tracking, all working.
2
Make It Beautiful — Annotation Prompting
4 targeted visual
prompts + Annotation Mode to upgrade glassmorphism cards, animated ring, fire
streaks, mobile polish.
3
Wire the AI Brain — System Instructions
Set a System Instruction
that turns the AI Coach tab into a world-class behavioural psychologist giving
expert habit coaching.
4
Add Real Features — Chain-Build Prompting
4 surgical chain
prompts: streak chart, habit delete, AI suggestions, completion celebration
animation.
5
Fix & Debug — Debug Prompting
The SWE Formula for any
break + 6 ready debug prompts for the most common HabitForge issues.
6
Deploy & Share — Your Live URL
Get a real shareable
link in 60 seconds. Prompt Gemini to write your LinkedIn post. Earn your
certificate.
Before you start: Open aistudio.google.com in a new tab. Sign in with any Google account. Click
Build in the left sidebar. Keep it side-by-side with this module. You paste prompts
there, Gemini builds in the live preview panel on the right.
5 Vibe Coding Techniques — The Prompting Playbook
These techniques are what separate a vibe coder who ships from one who gets stuck.
Learn them here — apply them in the next section building HabitForge AI.
1. Specification Prompting
Your first prompt to an AI coding agent is the most important — it sets the
entire architecture. Write it like an architect's brief: purpose, screens, data model,
visual style, behaviour, constraints — all at once. The more complete the spec, the less you
iterate later. Used in Phase 1.
2. Annotation Prompting
Google AI Studio's Annotation Mode lets you draw on your live app preview
and describe changes visually — instead of hunting through code. The technique: name the
exact element, the exact change, and give a visual reference. Replaces vague "make it
better" prompts. Used in Phase 2.
3. System Instructions
Unlike chat prompts (one-off), System Instructions in AI Studio persist
permanently — they define the AI's identity, expertise, behaviour, and output format for the
entire app. This turns generic Gemini into a specialised AI coach with real expertise.
Used in Phase 3.
4. Chain-Build Prompting
Never ask for multiple features in one prompt — the AI will try to rebuild
everything and break what works. One feature per prompt. Every chain prompt ends with: "Keep
all existing code, tabs, data, and styles 100% identical. Only add [feature]." Used in
Phase 4.
5. Debug Prompting
When AI code breaks, "fix it" produces random results. Use the SWE Formula:
[Symptom] exactly what is wrong + [What Changed] last prompt that caused it + [Expected]
what should happen. This gives the AI a root-cause diagnosis instead of a random guess.
Used in Phase 5.
See the Techniques in Action
① Specification Prompting — Vague vs SPEC
❌ What Beginners Write
"Build me a habit tracker app with dark
theme and nice UI. Make it modern."Result: Generic, incomplete, requires 20 corrections.
✓ Specification Prompt
[APP NAME] HabitForge AI
[PURPOSE] Habit tracker for students — builds daily routines with AI coaching
[SCREENS] Dashboard (streaks, progress ring), Add Habit (emoji picker, AI suggest),
Analytics (bar chart), AI Coach (Gemini powered)
[VISUAL] bg:#0d1117, cards:#161b22, accent:#f97316
[DATA] habits in localStorage — id, name, emoji, streak, completedToday
[BEHAVIOUR] toggle completion, streak auto-increments daily, data persists
[CONSTRAINTS] single HTML file, no React, no CDN except Google Fonts
② Annotation Prompting — Vague vs ELEMENT Formula
❌ Vague Visual Prompt
"Make the cards look better and more modern.
The design feels flat."Result: Gemini changes random things, breaks layout.
✓ Annotation Formula
[ELEMENT] Habit cards in the Dashboard tab
[CHANGE] Glassmorphism: background rgba(255,255,255,0.04), backdrop-filter blur(12px),
border 1px solid rgba(255,255,255,0.08), box-shadow 0 4px 24px rgba(0,0,0,0.3),
border-radius 14px
[REFERENCE] iOS 16 widget glass card style
③ System Instructions — Generic vs Persona Formula
❌ Weak System Instruction
"You are a helpful habit coach. Help
users with their habits."AI Response: "Great job! Keep going! Every day is a new opportunity!"
✓ Persona Formula Result
"Your 7-day reading streak tells me you
have cracked the trigger — now we need to lock in the reward. BJ Fogg's research shows
celebration at completion is what wires the habit. Your action today: immediately after
reading, say out loud 'I am someone who reads.' 10 seconds. That's it."
④ Chain-Build — Wrong vs Right
❌ Asking for 3 Features at Once
"Add a weekly chart, add habit
deletion, add a celebration animation, and add AI suggestions to the Add Habit
tab."Result: Gemini rebuilds everything. 2 tabs break. Data resets.
✓ One Feature Per Chain Prompt
Prompt 1: "Add a weekly completion
bar chart to the Analytics tab using CSS only. Keep all other tabs, data, and styles 100%
identical."
→ Test → Works ✓
Prompt 2: "Add a delete button to each habit card. Keep everything else 100% identical."
→ Test → Works ✓
⑤ Debug Prompting — SWE Formula
❌ Vague Debug
"The streak counter is broken. Fix
it."Result: Gemini guesses wrong and breaks 2 other things.
✓ SWE Formula
[SYMPTOM] The streak counter on the Dashboard shows 0
even after I click all habits as complete.
[WHAT CHANGED] This broke after I added the weekly chart in the previous prompt.
[EXPECTED] Streak should increment by 1 each day when all habits are marked complete, and
persist in localStorage between page refreshes.
Fix only the streak logic. Do not touch any other code.
Build HabitForge AI — 6 Phases Live
Open aistudio.google.com →
click Build → paste each prompt below → watch your app come alive. Do every phase
in order in the SAME session.
AI Studio Build Mode basics: Type your prompt in the chat box at the
bottom. Gemini generates your app. The live preview appears on the right — click around in it
immediately. Every follow-up prompt improves the same app. Never start a new session mid-build or
you lose all context.
1
Phase 1 — The Foundation Prompt
Specification Prompting · Build the entire app shell in one prompt
Active
What this does: One complete SPEC prompt gives Gemini a
full architectural blueprint — screens, data model, colours, behaviour, constraints.
HabitForge AI appears in the preview in 30–90 seconds.
Foundation Prompt — Copy & Paste into AI Studio Build Mode
[APP NAME] HabitForge AI
[PURPOSE] A beautiful dark-themed habit tracking app for students and professionals who
want to build consistent daily routines with AI-powered coaching.
[SCREENS — 4 tabs]
Tab 1 — Dashboard:
Top greeting: "Good morning, Builder 👋" (dynamic — morning/afternoon/evening based on
time)
3 metric cards in a row: "Day Streak" (number with 🔥), "Done Today" (X/total), "This
Week" (percentage with 📊)
Circular progress ring (CSS-drawn, not canvas) showing today's completion %. Gradient:
#f97316 to #fbbf24. Animates on load. Percentage + "Today" label in centre.
List of today's habits as cards. Each: emoji + habit name on left, streak count + 🔥 in
middle, circle checkbox on right.
Clicking the checkbox: marks done, card gets green left border (#10b981), checkbox fills
green, progress ring updates.
Tab 2 — Add Habit:
Heading: "Add a New Habit"
6 emoji chips to pick: 💪 📚 🧘 💧 🏃 ✍️ (clicking selects, selected has orange border)
Text input: "Habit name" placeholder
Dropdown: "Frequency" — Daily / Weekdays / Weekends
"Add Habit" button — orange (#f97316), full width on mobile
Below: "✨ AI Suggestions" section — 3 pre-written sample habit cards (Read 20 pages,
10-min meditation, Drink 8 glasses water). Clicking one auto-fills the form.
Tab 3 — Analytics:
Heading: "Your Progress This Week"
Weekly bar chart — 7 CSS bars for Mon–Sun. Height = completion % for that day. Orange
filled (#f97316). Day labels below. Percentage labels above.
Below chart: each habit with name + horizontal progress bar showing completion rate this
week.
"Best Streak" card: highlight the habit with longest streak in an amber card.
Tab 4 — AI Coach:
Heading: "Your Daily Coach"
Large quote card (orange left border) with a hardcoded motivational quote: "You do not
rise to the level of your goals. You fall to the level of your systems. — James Clear"
"Reflect" textarea: "How are you feeling about your habits today?"
"Get Coaching" button (orange) — disabled for now with label "Coming in Phase 3"
Daily tip card: "Tip: The 2-minute rule — if it takes less than 2 minutes, do it now."
[VISUAL STYLE]
bg: #0d1117 | cards: #161b22 | border: rgba(255,255,255,0.07) | text: #e6edf3 | muted:
#8b949e
accent: #f97316 (orange) | success: #10b981 | font: system-ui, -apple-system, sans-serif
card border-radius: 12px | box-shadow on cards: 0 2px 8px rgba(0,0,0,0.4)
[DATA MODEL]
Each habit: { id, name, emoji, frequency, streak, completedToday (bool),
completedDates[] }
Store all habits in localStorage key: "hf_habits"
On first load (localStorage empty), pre-populate with 3 sample habits:
{ emoji:"📚", name:"Read for 30 minutes", streak:7, frequency:"Daily",
completedToday:false }
{ emoji:"💪", name:"Morning Exercise", streak:3, frequency:"Daily", completedToday:false
}
{ emoji:"🧘", name:"Meditation", streak:12, frequency:"Daily", completedToday:false }
[BEHAVIOUR]
Tab switching: only active tab visible, smooth (no page reload)
Habit completion: toggle on checkbox click, saves to localStorage, updates ring + Done
Today metric
Weekly chart: reads completedDates[] to calculate per-day completion rates
All data persists across page refreshes via localStorage
Streak logic: if all habits completed today and not already counted, streak += 1
[CONSTRAINTS]
Single HTML file — all CSS and JS inline
No React, no Vue, no Angular, no external frameworks
No CDN links except one Google Fonts import (system-ui is fine without CDN)
Fully responsive — 375px mobile to 1440px desktop
Deliver ONLY the code. No explanation before or after.
→ Paste in AI Studio Build chat box →
press Enter
Why this works: The SPEC
Formula gives Gemini complete information before it writes a single line. [SCREENS]
defines every tab. [DATA MODEL] defines the exact JavaScript objects. [VISUAL STYLE]
gives exact hex values. [CONSTRAINTS] prevents it from using frameworks you don't want.
Result: a complete, working app from one prompt.
I opened aistudio.google.com and clicked Build in the sidebar
I pasted the Foundation Prompt and see HabitForge AI in the preview
panel
All 4 tabs work: Dashboard, Add Habit, Analytics, AI Coach
Clicking habit checkboxes marks them done and updates the progress
ring
2
Phase 2 — Visual Upgrade (Annotation Prompting)
4 targeted prompts → glassmorphism, animated ring, fire streaks,
mobile polish
Locked
Same session — same chat. Run these 4 prompts one at a
time. Prompts A & B use Annotation Mode (click the pencil icon on the preview, draw
around the element). Prompts C & D go in the regular chat box.
A
Annotation A — Habit Cards →
Glassmorphism
Annotation Mode
Click the annotation
icon (pencil ✏️) in the preview panel → draw a box around any habit card → type this
in the annotation box:
[ELEMENT] The habit cards in the Dashboard
tab
[CHANGE] Glassmorphism style: background rgba(255,255,255,0.04), backdrop-filter
blur(12px), border 1px solid rgba(255,255,255,0.08), box-shadow 0 4px 24px
rgba(0,0,0,0.3), border-radius 14px. Keep all padding, layout, checkbox behaviour,
and data identical.
[REFERENCE] iOS 16 widget frosted glass cards — subtle blur over dark background
B
Annotation B — Progress Ring →
Animated Gradient
Annotation Mode
Draw a box around
the progress ring in the Dashboard → type:
[ELEMENT] The circular progress ring on the
Dashboard
[CHANGE] Animate the ring: on page load and on habit completion, stroke-dashoffset
transitions smoothly from full (empty) to the current percentage over 1.2 seconds
using CSS transition. Ring colour: gradient stroke from #f97316 to #fbbf24. Large
bold percentage number in centre (font-family Syne, 700 weight). Small "Today" label
below the number in muted colour.
[REFERENCE] Apple Health activity ring — smooth fill animation, gradient colour fill
C
Chat C — Streak Fire Animation
Chat Box
Add streak visual enhancements to habit
cards. Keep all other styles, tabs, and data 100% identical. Only add:
1. Streak numbers ≥7: display in orange (#f97316), 🔥 emoji pulses (CSS scale
1→1.15→1, 1.5s infinite)
2. Streak numbers ≥14: display in amber (#fbbf24), faster pulse (0.9s), slightly
larger font
3. Streak numbers ≥30: display in gold with a subtle glow text-shadow (0 0 8px
#fbbf24)
Do not change any other element.
D
Chat D — Mobile Polish + Entry
Animations
Chat Box
Final visual polish. Keep all functionality
100% identical. Add only:
1. Mobile tab bar (≤768px): tabs scroll horizontally, pill-shaped, active tab has
orange (#f97316) background and white text
2. Habit cards: animate in on page load — fade in + slide up 8px, staggered 70ms per
card, using CSS @keyframes
3. Metric cards: add tiny emoji icon above each number (🔥 streak, ✅ done today, 📊
weekly %)
4. "All done!" celebration: when all habits are marked complete for the day, briefly
show a confetti-style CSS animation (coloured dots scatter from centre, 1.5s, then
disappear) and update the greeting to "All done for today! 🎉"
5. Empty Analytics state: if no habits exist, show centred message "Start tracking
to see your analytics 🌱"
Habit cards have glassmorphism frosted glass style
Progress ring animates with orange-to-gold gradient on completion
Streaks of 7+ show orange numbers with pulsing fire emoji
App looks great on mobile — tabs scroll without overflow
3
Phase 3 — Wire the AI Brain (System Instructions)
Turn the AI Coach tab into a real Gemini-powered behavioural coach
Locked
Two parts: First set the System Instruction (defines the AI's
permanent identity). Then run the chat prompt to wire the AI Coach tab to actually call
Gemini.
Step 3A — Set the System Instruction
In AI Studio: click
Settings ⚙️ → Advanced Settings → find the "System Instructions" box → paste this:
You are Dr. Priya Mehta, a world-class behavioural psychologist
with 15 years of specialisation in habit formation, behaviour change science, and
accountability coaching. You have coached 10,000+ professionals and students. You hold a PhD
in Behavioural Science from IIM Bangalore and authored "Atomic Discipline: The Indian
Professional's Guide to Unbreakable Habits."
YOUR PHILOSOPHY:
- Ground all advice in proven frameworks: BJ Fogg's Tiny Habits, James Clear's Atomic
Habits, Nir Eyal's Hooked Model
- Direct, warm, and specific — never generic or inspirational-poster-vague
- Acknowledge difficulty without excusing failure
- Always give ONE concrete, actionable next step — not a list
RESPONSE FORMAT (always follow exactly):
Line 1: A one-sentence observation about the user's specific habit data
[blank line]
Line 2: One named psychological principle that applies — explain it in 1–2 sentences
[blank line]
Line 3: "Your action for today: [ONE specific, 2-minute action they can do RIGHT NOW]"
[blank line]
Line 4: A closing line of genuine, specific encouragement (never "Great job!" or "Keep it
up!")
CONSTRAINTS: Max 120 words. Reference specific numbers the user shares. Respond in English
only. If user seems stressed, lead with empathy before the action step.
→ Paste in AI Studio Settings → Advanced
Settings → System Instructions
Step 3B — Wire the AI Coach Tab
Now run this in the chat
box (same session):
Upgrade the AI Coach tab. Keep all other tabs (Dashboard, Add Habit,
Analytics) 100% identical.
In the AI Coach tab:
1. Enable the "Get Coaching" button — remove the disabled state
2. When clicked, read the user's text from the Reflect textarea
3. Also inject the user's current habit data as context: pass the habit names, today's
completion status, and the highest streak from localStorage
4. Display a loading state: replace button text with "Dr. Priya is thinking..." and a subtle
pulsing animation
5. Show the AI response in the large quote card — replace the hardcoded James Clear quote
with the live Gemini response
6. Style the response card: orange left border (4px solid #f97316), light orange background
(rgba(249,115,22,0.06)), white text
7. After the response appears, show a "Reflect again" button that clears the textarea for
the next input
For the Gemini API call, use the AI Studio client-side proxy (do not hardcode any API key).
Use fetch to call the Gemini API endpoint that AI Studio provides. The model to use:
gemini-2.0-flash.
Keep all existing data, localStorage logic, styles, and the other 3 tabs completely
unchanged.
Why System Instructions matter:
Without them, Gemini gives generic advice ("keep going!"). With Dr. Priya's System
Instruction, Gemini now has specific credentials, a named framework (BJ Fogg, James Clear),
a strict response format, and hard word limits. The same model — completely different output
quality. This is the real power of System Instructions.
System Instruction is pasted in AI Studio Advanced Settings
AI Coach "Get Coaching" button is now active (not disabled)
Typing in the Reflect box and clicking Get Coaching returns a real Dr.
Priya response
The response is specific — references my habit data, not generic
motivation
4
Phase 4 — Add Real Features (Chain-Build Prompting)
4 surgical one-feature-at-a-time chain prompts
Locked
The Chain-Build rule: Run each prompt. Test that feature. Only
then run the next one. Every prompt ends with the protection phrase — this is
non-negotiable.
Chain 1 — Delete Habit
Add a delete button to each habit card on the
Dashboard.
The delete button: small ✕ icon, top-right corner of each card, visible on hover
only (opacity 0 → 1 on card hover). Clicking it: removes the habit from
localStorage, removes the card from the DOM with a fade-out animation (0.3s opacity
0 + slide left 10px), updates all metrics.
Confirm before deleting: show a small inline confirmation below the card — "Delete
this habit? [Yes] [No]" styled in red/grey. No browser alert().
Keep all other tabs, data, styles, AI Coach, and functionality 100% identical. Only
add habit deletion.
Chain 2 — Smart Habit Suggestions
Upgrade the AI Suggestions section in the Add
Habit tab.
Replace the 3 static suggestions with a dynamic set of 12 pre-written suggestions,
organised by category:
📚 Learning: "Read 20 pages", "Watch 1 educational video", "Review flashcards for 15
min"
💪 Fitness: "10 pushups", "20-min walk", "Stretch for 5 minutes"
🧘 Mindfulness: "5-min meditation", "Gratitude journal (3 things)", "No phone first
30 min"
💧 Health: "Drink 8 glasses of water", "Sleep by 10:30pm", "No sugar after 7pm"
Show only 3 random suggestions at a time. Add a "Show more suggestions ↻" button
that picks 3 new random ones.
Keep all other tabs, data, AI Coach, and functionality 100% identical.
Chain 3 — Edit Habit Name
Add inline habit name editing to the
Dashboard habit cards.
Double-clicking on the habit name text transforms it into an inline text input (same
width, same font style, white background, orange border). Pressing Enter or clicking
outside: saves the new name to localStorage and returns to display mode. Pressing
Escape: cancels and restores original name.
Show a tiny pencil icon (✏️, 10px) next to the habit name on hover to hint
editability.
Keep all other tabs, AI Coach, deletion feature, suggestions, and all data 100%
identical. Only add inline editing.
Chain 4 — Streak Milestone Badges
Add streak milestone badges to habit cards.
Keep all other code 100% identical.
When a habit's streak reaches a milestone, show a small badge next to the streak
count:
7 days: 🥉 "Week Warrior"
14 days: 🥈 "Fortnight Fighter"
30 days: 🥇 "Month Master"
100 days: 💎 "Century Legend"
Badge style: small pill shape, coloured background matching the milestone
(bronze/silver/gold/cyan), font-size 9px, positioned after the streak count.
When a habit first reaches a milestone (not previously shown), show a one-time toast
notification: "[Habit name] just hit [milestone]! [badge emoji]" — appears for 3
seconds in bottom-right corner.
Store "milestones shown" in localStorage to avoid showing the same toast twice.
Chain 1: Can delete habits with inline confirmation (no browser alert)
Chain 2: AI Suggestions shows 3 random habits, "Show more" refreshes
them
Chain 3: Double-clicking a habit name lets me edit it inline
Chain 4: Streak milestones show coloured badges and toast notifications
5
Phase 5 — Debug & Fix Like a Pro
The SWE Formula + 6 ready debug prompts for HabitForge AI
Locked
Something broke? That's normal — and expected. Vibe coding
always produces 1–2 things that need fixing. Below is the SWE formula and 6 ready-to-copy
debug prompts for the most common HabitForge AI issues.
The SWE Debug Formula — Use This Every Time
[SYMPTOM]
Describe EXACTLY what is wrong. Not "it's broken" — "The streak
counter shows 0 even after marking all habits complete."
[WHAT CHANGED]
Which was the last prompt you ran before it broke? "This happened
after Chain Prompt 2 (adding dynamic suggestions)."
[EXPECTED]
What should happen instead? "The streak should increment by 1 when
all habits are completed, and persist after refresh."
End with:
"Fix only this specific issue. Do not change any other tab, feature, or visual style."
Fix 1 — Tabs Not Switching
[SYMPTOM] Clicking a tab does nothing —
the content doesn't switch, or all tab content is visible at once.
[WHAT CHANGED] [describe your last prompt here]
[EXPECTED] Clicking a tab shows only that tab's content and hides the other 3.
The clicked tab button gets the active style (orange background).
Fix only the tab switching JavaScript. Requirements:
- Use data-tab attributes on buttons linking to panel IDs
- On click: hide all panels (display:none), show clicked panel, update active
button style
- On load: Dashboard tab is active by default
Do not touch any other code.
Fix 2 — localStorage Not Persisting
[SYMPTOM] Habits disappear on page
refresh. Or: habits added in Add Habit tab don't appear on Dashboard.
[WHAT CHANGED] [your last prompt]
[EXPECTED] All habits and their completion state persist in localStorage under
key "hf_habits". After refresh, the same habits appear with the same streaks and
completion state.
Debug steps to apply:
1. Verify the save function calls localStorage.setItem("hf_habits",
JSON.stringify(habits)) after every change
2. Verify the load function calls JSON.parse(localStorage.getItem("hf_habits"))
on page load
3. Log to console: console.log("Loaded habits:", habits) to verify data is
correct
4. Fix the root cause. Remove console.log after fixing. Do not touch other
features.
Fix 3 — AI Coach Not Responding
[SYMPTOM] Clicking "Get Coaching" in the
AI Coach tab: button stays in loading state, or returns an error, or shows no
response.
[WHAT CHANGED] [your last prompt]
[EXPECTED] Clicking Get Coaching sends the user's reflection text + habit data
to Gemini, shows "Dr. Priya is thinking..." for 1–3 seconds, then displays the
AI response in the quote card.
Fix the Gemini API call. Ensure:
1. Using the AI Studio client-side proxy (no hardcoded API key)
2. Model: gemini-2.0-flash
3. Proper error handling: if API fails, show "Coaching unavailable — try again
in a moment."
4. The prompt sent to Gemini includes both the user's reflection text AND the
habit data summary
Do not change any other tab or feature.
Fix 4 — Progress Ring Wrong %
[SYMPTOM] The progress ring shows wrong
percentage (e.g., always 0%, or always 100%, or doesn't update when habits are
completed).
[WHAT CHANGED] [your last prompt]
[EXPECTED] The ring shows (completed habits today / total habits) * 100, updates
immediately when a habit is toggled, and the percentage number in the centre
matches the ring fill.
Fix only the ring calculation and update function. Ensure:
1. completedToday count reads live from the habits array, not a cached value
2. Ring SVG stroke-dashoffset = circumference * (1 - percentage/100) where
circumference = 2 * π * radius
3. The ring update function is called every time a habit is toggled
Do not change the ring's visual style or any other feature.
Fix 5 — Gemini Gave Incomplete Code
The code you generated is incomplete — it
appears to be cut off mid-way, or the artifact shows a blank white screen, or
there is a JavaScript syntax error in the browser console.
Please provide the COMPLETE, corrected file from the very first character to the
very last:
1. Start with <!DOCTYPE html>
2. Include every line — do NOT truncate, summarise, or omit any section
3. All 4 tabs must be fully functional
4. The file must be completely self-contained — no external script imports
except Google Fonts
Specific issue I see: [DESCRIBE — e.g., "blank white screen", "tabs are
missing", "JS error: cannot read property of undefined"]
Fix this specific issue in the complete file.
Fix 6 — Mobile Layout Broken
[SYMPTOM] On mobile screens (375px), the
layout is broken — [describe: "panels overlap", "text overflows screen", "tabs
don't scroll", "metric cards stack wrong"]
[WHAT CHANGED] [your last prompt]
[EXPECTED] On mobile: tab bar scrolls horizontally (overflow-x: auto, nowrap),
all content fits within the viewport width, no horizontal scroll on the main
content area, metric cards display in a row on mobile ≥375px.
Fix only the mobile responsive CSS. Apply these rules:
- Tab container: overflow-x: auto; white-space: nowrap;
-webkit-overflow-scrolling: touch
- Main content: max-width: 100%; overflow-x: hidden; padding: 0.75rem
- Metric cards: display: grid; grid-template-columns: repeat(3, 1fr) on ≥375px;
gap reduced to 0.35rem on mobile
Do not change desktop layout or any JavaScript.
I understand the SWE Formula — Symptom + What Changed + Expected
My app is working correctly — all 4 tabs functional, data persisting
AI Coach returns real responses from Dr. Priya's persona
6
Phase 6 — Deploy & Share Your Live App
Get a real shareable URL in 60 seconds
Locked
Your app runs inside AI Studio. Now get a URL you can share
with anyone in the world — no hosting setup, no servers, no cost.
Option A — AI Studio Share Link (60 seconds)
1. In AI Studio, look
for the Share button (top-right of the
Build interface).
2. Click Share → set to "Anyone with the link can view".
3. Copy the link — it looks like
4. Share it anywhere — recipients see your live app running in their browser, no account needed.
Best for: Quick sharing, LinkedIn posts, portfolio submissions.
2. Click Share → set to "Anyone with the link can view".
3. Copy the link — it looks like
aistudio.google.com/app/...4. Share it anywhere — recipients see your live app running in their browser, no account needed.
Best for: Quick sharing, LinkedIn posts, portfolio submissions.
Option B — GitHub + Cloud Run (Real URL)
1. In AI Studio
toolbar, find the GitHub icon.
2. Click → Authorise → Enter repo name:
3. AI Studio pushes all code to GitHub automatically.
4. Then click Deploy → Cloud Run — Google deploys your app in 2–3 minutes.
5. You get a real public URL like
Best for: Portfolio, permanent URL, showing employers.
2. Click → Authorise → Enter repo name:
habitforge-ai → Create.3. AI Studio pushes all code to GitHub automatically.
4. Then click Deploy → Cloud Run — Google deploys your app in 2–3 minutes.
5. You get a real public URL like
habitforge-ai-xyz.run.appBest for: Portfolio, permanent URL, showing employers.
Prompt Gemini to Write Your LinkedIn Post
Run this in a fresh AI
Studio chat (not your build session):
Write me a LinkedIn post announcing that I just built and deployed a
live AI-powered habit tracking app called HabitForge AI — using only prompt engineering,
with zero manual coding.
My context:
- I am a [YOUR ROLE — student / fresher / working professional]
- Built using: Google AI Studio Build Mode + Gemini
- What it does: tracks daily habits with streaks, AI coaching powered by a System
Instruction persona (behavioural psychologist Dr. Priya Mehta), analytics dashboard, and
AI-powered habit suggestions
- Techniques I used: Specification Prompting, Annotation Prompting, System Instructions,
Chain-Build Prompting, Debug Prompting
- Live at: [YOUR URL]
- Part of: Module 5 of the Claude Skill Engineering Bootcamp by ASJPrompts & Studio
Post requirements:
- Hook: Start with a bold, specific first line (not "Excited to share")
- Body: Explain specifically what HabitForge AI does and the 5 prompting techniques used —
make it clear this is prompt engineering skill, not just clicking buttons
- CTA: Invite readers to try the live app and ask them one specific question
- Length: 150–200 words
- Tone: Confident and specific, not humble-brag
- End with: #VibeCoding #PromptEngineering #GoogleAIStudio #AIStudio #ASJPrompts
I have a shareable URL for HabitForge AI (AI Studio link or Cloud Run
URL)
I clicked the URL — HabitForge AI loads correctly in a fresh browser tab
I used the LinkedIn prompt — Gemini wrote my announcement post
Debug & Upgrade — Quick Reference
The SWE Formula and upgrade ideas for when you want to take HabitForge AI further.
The SWE Debug Formula — Memorise This
[SYMPTOM] → Exactly what is wrong (not "it's broken")
[WHAT CHANGED] → Which prompt ran just before it broke
[EXPECTED] → What the correct behaviour should be
[SCOPE] → "Fix only this. Do not change any other tab, feature, or style."
Why this works: Gemini has your entire conversation history. When
you give it a precise root-cause description, it can locate the exact function or CSS rule that
broke — instead of guessing and rewriting half the app.
Upgrade Ideas — Take HabitForge AI Further
Dark/Light Mode Toggle
"Add a dark/light mode toggle in the top bar.
Keep all functionality identical."
Export Progress as PNG
"Add an Export button that uses html2canvas to
screenshot the Dashboard and download as PNG."
Habit Reminder Time
"Add a reminder time field to each habit. Use
the Notifications API to send browser reminders at that time."
Hindi Language Mode
"Add a language toggle (EN/हिं) that translates
all UI text and the AI Coach responses to Hindi."
Deploy & Share — Get Your Live URL
Submit your live HabitForge AI URL below. This verifies your build and unlocks the quiz
and certificate.
Submit Your Live App
Paste your AI Studio share link or
Cloud Run URL. This confirms you built a real, live HabitForge AI — not just followed along
passively.
Final Quiz — 10 Questions
Test your mastery of all 5 vibe coding techniques. Score 6/10 or above to unlock your
certificate.
Score:0/ 10
Your Certificate
Complete all requirements to unlock your Module 5
certificate from ASJPrompts & Studio — Claude Skill Engineering Bootcamp.
Phases Done
0/6
Quiz Score
0/10
XP Earned
0
Certificate
Locked