🎮 Vibe Coding

Creando un juego de cartas con Claude Code : El Trenta-U

Albert Sarlé

1/33

📋 Guion de la Presentación

🎯 Introducción (5 min)

Qué es vibe coding y por qué es revolucionario

🛠️ Setup (5 min)

Instalación de Node.js, Claude Code y Git (opcional)

🎮 Demo en Vivo (15 min)

Mi proceso creando el juego de cartas - mostrar código real. Crear un juego nuevo

💡 Tips y Mejores Prácticas (5 min)

Cómo sacar el máximo provecho a vibe coding

❓ Preguntas y Respuestas (5 min)

Resolver dudas de los asistentes

⏱️ Duración total: ~40 minutos

2/33

¿Qué es Vibe Coding? 🤔

💭 Programar describiendo lo que quieres en lugar de escribir código línea por línea
🤖 La IA interpreta tus ideas y genera el código por ti
🎯 Te enfocas en el "qué", no en el "cómo"
⚡ Prototipado rápido: de idea a aplicación funcional en minutos
🔄 Iteración natural: "hazlo más rápido", "añade animaciones", "cambia el color"

Ejemplos:

1. Pieters https://fly.pieter.com/
2. Lovable https://x.com/lovable_dev/status/1972680165378650391
3. Jon Meyers https://x.com/jonmeyers_io/status/1963241823268159703

3/33

🌐 Herramientas Online Populares

Alternativas para hacer vibe coding directo desde el navegador:

🚀 Bolt.new

Full-stack apps en el navegador con WebContainers

bolt.new

💝 Lovable.dev

Ideal para diseñadores, interfaz intuitiva y elegante

lovable.dev

⚡ v0 by Vercel

Generación de componentes React con Shadcn/ui

v0.dev

🎨 Replit

Entorno de desarrollo completo con IA integrada

replit.com

💡 Ventaja: No requieren instalación, funcionan desde cualquier navegador

4/33

Claude Code 🛠️

Herramienta CLI que permite a Claude trabajar directamente en tu proyecto

✨ Características principales:

Edita archivos automáticamente
Ejecuta comandos en tu terminal
Entiende el contexto completo de tu proyecto
Itera sobre tu código en tiempo real

5/33

Prerrequisitos 📋

Antes de empezar, necesitas tener instalado:

📝 VS Code

Editor con terminal y git integrado (opcional)

🟢 Node.js

Runtime de JavaScript (v18 o superior)

📦 Git

Control de versiones (opcional pero recomendado)

📦 Github

Control de versiones en red (opcional pero recomendado)

🔑 API Key de Anthropic

Para usar Claude Code

💻 Terminal

CMD o PowerShell

🖥️ Un servidor

Propio o tipo Netlify (opcional pero recomendado)

6/33

1Instalar Node.js en Windows

Descarga e instalación

🔗 Descargar desde:

https://nodejs.org

Pasos:

1️⃣ Descarga el instalador LTS (versión recomendada)
2️⃣ Ejecuta el archivo .msi
3️⃣ Sigue el asistente de instalación (Next, Next, Install)
4️⃣ Verifica en CMD: node --version

📸 Ver capturas de pantalla del proceso

7/33

2Instalar Claude Code y Obtener API Key

🔑 Crear cuenta y obtener API key:

https://console.anthropic.com

Instalación (en CMD):

npm install -g @anthropic-ai/claude-code

Configurar API Key en Windows:

# Configurar para la sesión actual (en CMD):

set ANTHROPIC_API_KEY=tu-api-key-aqui

# O configurar permanentemente en Variables de Entorno

# Panel de Control → Sistema → Configuración avanzada → Variables de entorno

Ejecutar Claude Code:

claude

💡 Nota: El comando es claude, no claude-code

📸 Ver capturas de pantalla del proceso

8/33

3Instalar Git (Opcional pero recomendado)

Descarga e instalación

🔗 Descargar desde:

https://git-scm.com/download/win

Pasos:

1️⃣ Descarga el instalador para Windows
2️⃣ Ejecuta el instalador (deja opciones por defecto)
3️⃣ Configura tu nombre: git config --global user.name "Tu Nombre"

📸 Ver capturas de pantalla del proceso

9/33

Mi Proceso: Juego de Cartas 🎴

1 Idea inicial: "Quiero crear un juego de cartas en HTML"
2 Crear proyecto: mkdir juego-cartas && cd juego-cartas
3 Iniciar Claude Code: claude-code
4 Describir lo que quiero: "Crea un juego de cartas con baraja española, interfaz bonita y animaciones"
5 Iterar: "Añade sonidos", "Mejora las animaciones", "Añade puntuación"
6 Abrir en navegador: resultado inmediato

10/33

Tips para Vibe Coding 💡 (1)

📝 Crear un plan general: "Quiero construir un juego de cartas, escribe un plan detallado por fases"
❓ Hacer que pida aclaraciones: "Si no tienes claro al 90% lo que desarrollar pregunta la informacion que necesites"
🎯 Sé específico pero no técnico: "Quiero un botón grande y azul" en vez de "Añade un div con clase button-primary"
🚧 Páralo si ves que descarrila: Puedes parar la ejecución actual y darle correcciones o mas contexto
🔄 Itera en pasos pequeños: No pidas todo a la vez
🎨 Describe la experiencia: "Que se sienta fluido y moderno"

11/33

Tips para Vibe Coding 💡 (2)

📝 Usa ejemplos: "Como en el juego X" o "Estilo minimalista"
📸 Usa capturas de pantalla: Puedes mostrarle como se ve una pagina usando @nombre_Fichero
🐛 Claude arregla errores: "Esto no funciona" y Claude lo depura
⚡ Experimenta: Es fácil deshacer y probar cosas nuevas
📌 Guarda partida: Usa el potencial de git para deshacer cambios y probar nuevas funcionalidades