[GDG MienTrung - BuildWithAI] Vibe Coding with Google Antigravity

Transcript

1. MienTrung Vibe Coding with Google Antigravity Hoàng Nguyễn - Technical Lead @ Nimble
2. Agenda The vibe coding shift - what changed? Core concepts of Antigravity Vibe design in Google Stitch and Vibe code with Antigravity Tips and Model strategy Takeaways + Q&A MienTrung
4. 72% of developers who have tried AI use it every day https://www.sonarsource.com/state-of-code-developer-survey-report.pdf
5. THE TRADITIONAL WAY • Learning complex syntax and languages • Months of development of a prototype • Getting stuck on a single bug or error. THE VIBE CODING WAY • Describing your idea in plain English. • Building fully functional apps in minutes. • Clicking "Fix" and letting the AI self-heal the code.
6. Playground Independent workspaces that allow you to start a conversation and explore ideas instantly, without the overhead of setting up a new workspace. Agent Manager Provide a higher level view into the work Antigravity agents are doing under your guidance. Editor VS Code fork IDE but full of rich AI-enabled features designed to improve your code-writing experience. Antigravity
7. Skills Skills are an open standard for extending agent capabilities. Rules and Workflow Rules are manually defined constraints for the Agent to follow, at both the local and global levels. Workflows enable you to define a series of steps to guide the Agent through a repetitive set of tasks MCP Antigravity supports the Model Context Protocol (MCP), a standard that allows the editor to securely connect to your local tools, databases, and external services. Antigravity (cont.)
8. Design System DESIGN.md for Design agents Design Types: App and Web Modes: Thinking, Redesign, Ideate Stitch Agent Skills Enhance agent ability, designed to work with Stich MCP Server Google Stitch
9. # Design System ## Overview A focused, minimal dark interface for a developer productivity tool. Clean lines, low visual noise, high information density. ## Colors - **Primary** (#2665fd): CTAs, active states, key interactive elements - **Secondary** (#475569): Supporting UI, chips, secondary actions - **Surface** (#0b1326): Page backgrounds - **On-surface** (#dae2fd): Primary text on dark backgrounds - **Error** (#ffb4ab): Validation errors, destructive actions ## Typography - **Headlines**: Inter, semi-bold - **Body**: Inter, regular, 14–16px - **Labels**: Inter, medium, 12px, uppercase for section headers ## Components - **Buttons**: Rounded (8px), primary uses brand blue fill - **Inputs**: 1px border, subtle surface-variant background - **Cards**: No elevation, relies on border and background contrast ## Do's and Don'ts - Do use the primary color sparingly, only for the most important action - Don't mix rounded and sharp corners in the same view - Do maintain 4:1 contrast ratio for all text
10. # google-labs-code/stitch-skills > npx skills add google-labs-code/stitch-skills --list skills/ ├── design-md/ #Generate DESIGN.md from Stitch screens ├── enhance-prompt/ #Transform vague prompts into Stitch-optimized prompts ├── react-components/ #Convert Stitch screens to React component systems ├── remotion/ #Generate walkthrough videos from Stitch designs ├── shadcn-ui/ #Build UI with shadcn/ui components ├── stitch-design/ #Unified entry point for all Stitch design work ├── stitch-loop/ #Autonomous multi-page site generation via baton pattern └── taste-design/ #Apply visual styles across screens
11. Effective Prompting Keep conversations short Be specific on stack, architecture, file references Gemini Models Pro: Architecture decisions, multi-file refactors, first build prompt. Flash: Rapid UI tweaks, small bug fixes, re-runs (saves credits) Skills/Rules/Workflow Enhance agent ability Tips and strategy
12. Config MCP Create Stitch API key → paste into Antigravity MCP settings Idea to Prototype Describe the app idea with a prompt Export → generate DESIGN.md (color tokens, typography, layout rules) Building Send the build prompt — agent plans, scaffolds, codes, runs terminal Use Agent Manager: spawn parallel agents (UI + backend simultaneously) Review Artifacts: task list, implementation plan, browser recording Vibe Coding
13. Takeaways Hype vs Reality Security Always check the output Core knowledge MienTrung
14. antigravity.google/download Antigravity If you haven’t already, please install Antigravity to follow along the hands-on sessions later and build wonderful projects! Scan here for vibe coding tips!