Vibe Coding: Design & Build with Vibes (2 of 2) — GDG Build with AI

The second Vibe Coding workshop moved from a design brief to a working prototype. The example was a pizza-or-tacos poll with two distinct interfaces: large voting buttons for a phone and a results screen readable across a room. The brief specified the audience, devices, expected behavior, and limits, including no login or unnecessary data collection.

The walkthrough used Google AI Studio to generate the application, then refine it through annotations and written instructions. Enlarging the voting buttons demonstrated a focused visual correction; adding system instructions gave the agent guidance it could continue to follow as the project changed. A separate design demonstration also showed why generated interfaces need review: a tool can add screens and controls that the brief never requested.

From there, the project was saved to GitHub and cloned locally to continue development with a coding agent. The session connected these steps to the Plan, Work, Review, Compound loop: decide what to build, inspect the plan, implement it, review the result, and record lessons that prevent repeated mistakes.

The emphasis was on producing a prototype clear enough to evaluate, with specific requirements and observable behavior guiding each iteration.