When you are vibe coding and fixing UI bugs one by one, it is easy to get stuck in an endless loop where fixing one thing breaks two others. In this episode of Build It, we tackle a frustrating set of UI bugs in our smart personal trainer app's active workout tracker, not by chasing isolated fixes, but by stepping back and defining a complete system.
Instead of firing off piecemeal bug prompts, you will see how to map out presentational changes, component boundaries, page-level vs. exercise-level state variables (like current set and rest mode), display logic, and user actions to catch every edge case, including supersets and final set transitions. Then we use Gemini to generate a full end-to-end test suite and pass both the system spec and test cases to Google Antigravity in a single prompt so every scenario passes before we move on.
Chapters:
0:00 - Intro: Why Systematic Updates Beat One-by-One Bug Fixes
1:06 - Identifying Friction and UI Bugs in the Active Workout Tracker
2:32 - Why Vibe Debugging Fails: Conflicting Fixes and Bug Whack-a-Mole
3:31 - Mapping Presentational Changes and Page Components
4:51 - Defining Page-Level vs. Exercise-Level State Variables
6:31 - Designing Display Logic and Catching Edge Cases
8:24 - Component-Level Display Logic: Current Set Card and Buttons
9:33 - Mapping User Action Logic and Rest Timer Transitions
10:45 - Generating an End-to-End Test Suite With Gemini
12:06 - Managing Antigravity Sessions
13:40 - Running the System Spec and Test Suite in One Prompt
14:33 - Live Verification: Rest Mode, Supersets, and Final Set Edge Cases
More resources:
Get the Prompts & Artifacts → https://g.dev/ai/build-it-resources
Builder Central → https://g.dev/ai/builder-central
Google Antigravity → https://g.dev/ai/build-it-with-agy
Subscribe to Google Cloud Tech → https://goo.gle/GoogleCloudTech
#GoogleCloud #Gemini #Antigravity #NoCode #AIAgents #BuildIt
Speakers: Devin Chasanoff, AI Builder Advocate
Products Mentioned: Gemini, Google Antigravity, Google Cloud