Vibe Code Your Website Builder AI Agent
The complete 90-minute live screen-share masterclass taught by Keith NG. Learn how to architect, constrain, and command an autonomous agent inside Google Antigravity that transforms natural language business prompts into production-ready, mobile-responsive landing pages in seconds.
Full Masterclass Session Recording (1080p HD)
90-Minute Masterclass Curriculum
Reconciled phase-by-phase timeline covering the end-to-end architecture and live vibe coding demonstrations.
10 min • 11.1%
Phase 1: Kickoff & The 4-Layer Agent Architecture
Celebrating the 100% community poll vote, deconstructing the paradigm shift from closed SaaS builders to autonomous coding agents, and mapping the 4-layer pipeline: Brain, Synthesizer, Preview DOM, and Exporter.
15 min • 16.7%
Phase 2: Step 1 – The System Prompt & 13-Skill Suite
Setting up Phase 0 pre-flight skill verification, locking down the 13 specialized offline skills, enforcing strict Anti-AI-Slop design guidelines (banning indigo/violet and emoji clutter), and launching the 4-question intake wizard ("Grill-Me").
20 min • 22.2%
Phase 3: Step 2 – Vibe Coding the Core Agent in Antigravity
Live screen-share in Google Antigravity 2.0. Demonstrating natural-language prompting, wiring the offline synthesis engine, reading reference documentation dynamically from the References/ folder, and generating the first clean landing page.
20 min • 22.2%
Phase 4: Step 3 – Live Dual-Pane Preview & Vibe Iterations
Testing responsive viewport switching (Desktop 1280px vs. Tablet 768px vs. Mobile 375px), verifying touch targets, and performing multi-turn conversational tweaks (color shift, hero styling, floating scroll-to-top button) without breaking HTML structure.
10 min • 11.1%
Phase 5: Step 4 – 1-Click Code Export & Cloudflare Pages Deploy
Structuring clean standalone files inside the dedicated dist/ directory, verifying zero broken tags, and dragging the folder straight into Cloudflare Pages for instant worldwide HTTPS deployment.
15 min • 16.7%
Phase 6: Member Q&A, Pipeline Reviews & Student Challenge
Interactive open-mic review of member build questions, diagnosing Antigravity global skill directory paths, handling video hosting bandwidth, and launching the 48-hour student challenge.
Class Downloads & Prompts
The exact prompt templates and offline skills demonstrated in the live recording.
Website Builder AI Agent Master Skills Guide
Official companion curriculum guide for MEMBER LIVE CLASS: Vibe Code Your Website Builder AI Agent.
Master System Prompt (Phases 0 – 7)
Ready-to-copy system prompt with 13-skill pre-flight gate, intake wizard, and anti-slop rules.
Website Builder 13-Skill Offline Suite
All 13 specialized skills bundled for Antigravity Global (~/.gemini/config/skills/) with zero paid MCP keys.
Master Skills Guide & Cloudflare Docs
Complete 5-page PDF manual + Cloudflare Pages free tier bandwidth and video hosting blueprint.
If you encounter any friction configuring your skills or building your pipeline, message Keith directly.
Open Direct Live Chat (tawk.to/keithpro)The Anti-AI-Slop Rules Taught in Class
Every website built with the Website Builder AI Agent strictly complies with these craft standards to ensure human-grade polish:
No Default Indigo/Violet
Default AI purple/indigo gradients are strictly banned. Projects use intentional palettes like Deep Slate with Warm Amber or Emerald.
Container Discipline
No "cards everywhere". Layouts rely on clean vertical rhythm, whitespace, and subtle 1px dividers. Cards are reserved strictly for interactive components.
Intentional Theme Architecture
Whether dark or light mode, contrast and typographic scale are calibrated intentionally to avoid generic AI template looks.
Zero Standard Emojis
No standard emoji icons in place of design assets. Clean, crisp SVG vector icons (Lucide or FontAwesome) are used exclusively.
100% Cross-Device Fluidity
Zero horizontal overflow across Mobile (<640px), Tablet (768px-1024px), and Desktop (1280px+). Minimum 44x44px touch targets.
Zero Dummy Copy
Strictly prohibited from using Lorem Ipsum, fake personas, or unresolved placeholders. Active SEO/AEO copywriting writes authentic commercial copy.