3
Sesión 3
Vibe Coding
Hoy construyen una app
Sin escribir una sola línea de código.
Solo describiendo lo que quieren.
Andrej Karpathy · 6.7M views · Feb 2, 2025
Deconstruyendo el Tweet
Agenda
1
Qué es Vibe Coding
2
Google Antigravity
3
Proyecto: LifeXP
1
Vibe Coding
Una nueva forma de crear software
¿Qué es Vibe Coding?
STOP
¿Todos tienen Antigravity instalado?
2
Google Antigravity
El IDE agéntico
Antigravity en 60 segundos
Demo: Antigravity
Abran Antigravity y sigan conmigo
Primer prompt de prueba
"Crea una página web que diga Hola Mundo con un diseño moderno y fondo oscuro"
☕
Break
15 minutos
3
Proyecto: LifeXP
Gamifica tu vida real
La App que Vamos a Construir
Prompt Template Copiar y ajustar
# ── 1. CONTEXTO ──────────────────────────
Nombre de la app: [LifeXP / tu nombre]
Descripción: [App web que gamifica la vida real del usuario
transformando actividades diarias en un sistema
de niveles, XP y recompensas]
# ── 2. FEATURES PRINCIPALES ──────────────
- Registro de actividades por área (Salud, Fitness,
Conocimiento, Creatividad, Social)
- Sistema de XP: cada actividad completada otorga
puntos según dificultad (fácil=25, media=50, difícil=100)
- Niveles: el usuario sube de nivel cada 500 XP
con barra de progreso visual
- Recompensas: badges desbloqueables al alcanzar
hitos (primera actividad, racha de 7 días, nivel 10)
- Dashboard: vista principal con nivel actual,
XP del día, actividades pendientes, racha
# ── 3. DISEÑO ────────────────────────────
Estilo: dark mode, gaming aesthetic, gradientes
sutiles, bordes redondeados, animaciones suaves
Colores: fondo #0a0a0a, acento azul #0066FF,
XP dorado #FFD700, éxito verde #00ff88
Responsive: mobile-first, funcionar en cualquier browser
# ── 4. TECH STACK ────────────────────────
Frontend: React + TypeScript + Tailwind CSS
Backend: Supabase (Auth + PostgreSQL + Realtime)
Deploy: Vercel
Repo: GitHub
# ── 5. ESTRUCTURA DE DATOS ────────────────
users: id, email, display_name, level, total_xp, streak
activities: id, user_id, name, area, xp_value, completed, date
achievements: id, user_id, badge_name, unlocked_at
⚡
Supabase Base de datos + Auth
Backend completo en 5 minutos
1 Crear proyecto
Ir a supabase.com → New Project → Elegir nombre y password de DB → Región cercana
2 Crear tablas
SQL Editor → pegar el schema:
create table activities (
id uuid default gen_random_uuid(),
user_id uuid references auth.users,
name text not null,
area text not null,
xp_value int default 50,
completed boolean default false,
created_at timestamptz default now()
);
3 Obtener keys
Settings → API → Copiar:
SUPABASE_URL=https://xxx.supabase.co
SUPABASE_ANON_KEY=eyJhbG...
4 Prompt a Antigravity
Decirle al agente:
"Conecta esta app a Supabase.
Aquí están mis credenciales:
URL: [pegar] KEY: [pegar]
Usa @supabase/supabase-js.
Agrega auth con email/password
y conecta las tablas que ya creé."
🐙 GitHub Guardar tu código
1
Crear cuenta en github.com si no tienes
2
Click "+" → New repository → Nombre:
lifexp-app → Public → Create
3
En Antigravity, abrir terminal y pedir:
"Inicializa git, haz commit de todo y sube a mi repo de GitHub: [pegar URL del repo]"
4
Autorizar GitHub cuando lo pida → Verificar que el código aparece en el repo
▲ Vercel Publicar al mundo
1
Ir a vercel.com → Sign up con GitHub
2
Click "Add New Project" → Importar
lifexp-app desde GitHub
3
En Environment Variables agregar:
VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY
4
Click Deploy → Esperar ~1 min → Tu app está en lifexp-app.vercel.app 🎉
Supabase → datos
→
GitHub → código
→
Vercel → deploy
→
🌐 App en vivo
STOP
Showcase: ¿Quién muestra su app?
Hoy construyeron una app
Sin escribir código. Solo con ideas y prompts.
Próxima sesión: Agentes Avanzados