Inicio

Vibe Coding en R con Claude Code y Docker

Vibe coding es como tener una conversación con su computadora: usted describe el resultado que desea, Claude Code lo construye, usted lo prueba y lo refina. No es magia; es una nueva forma de trabajar donde usted guía la visión y la IA maneja la implementación. Este tutorial le muestra cómo construir un panel real de estadísticas de la NBA usando únicamente solicitudes en lenguaje natural.

Conceptos Clave

• Claude Code - Asistente de programación con IA que escribe, depura y refactoriza código a partir de sus solicitudes en lenguaje natural
• hoopR - Paquete de R que proporciona acceso fácil a estadísticas de jugadores de la NBA y datos de partidos
• Refinamiento iterativo - El patrón central de vibe coding: describir → probar → refinar → hacer commit de las versiones que funcionen

Lo Que Necesitará

• Haber completado Programación en R en VS Code vía Docker
• Haber completado Use GitHub Desktop con Claude Code
• Docker Desktop instalado e iniciado
• 25-30 minutos

Paso 1: Crear un Nuevo Repositorio en GitHub

• Abra GitHub Desktop
• Haga clic en File > New Repository
• Complete los detalles:
  • Name: nba-dashboard
  • Description: Panel de estadísticas de la NBA construido con vibe coding
  • Local Path: Elija una ubicación (por ejemplo, Documents o carpeta de trabajo)
  • Marque Initialize this repository with a README
• Haga clic en Create Repository
• Haga clic en Publish repository en la parte superior
• Desmarque Keep this code private si desea que sea público (opcional)
• Haga clic en Publish Repository

Ahora tiene un repositorio Git local y una copia de respaldo en GitHub.

Paso 2: Copiar la Configuración de Docker

• Vaya a https://github.com/gexijin/vibe
  • Nota para Macs con Apple Silicon: Esta configuración está construida para procesadores Intel/AMD. Docker Desktop la ejecuta mediante emulación, así que funciona, pero la primera construcción y el propio R son más lentos.
• Haga clic en Code y luego en Download ZIP
• Abra el Explorador de archivos (Windows) o Finder (Mac) y vaya a su carpeta Descargas (Downloads)
• Descomprima el archivo: en Windows, haga clic derecho sobre él y elija Extract All; en Mac, haga doble clic en él
• Abra la carpeta descomprimida vibe-main. En Windows puede contener otra carpeta con el mismo nombre; abra esa
• Encuentre la carpeta .devcontainer
  • En Mac, Finder oculta las carpetas cuyo nombre empieza con un punto. Presione Cmd+Shift+. (punto) para mostrarlas
• Copie la carpeta completa (contiene Dockerfile y devcontainer.json)
• Navegue a su nueva carpeta nba-dashboard
• Pegue la carpeta .devcontainer allí

Su carpeta nba-dashboard ahora debería contener:

• .devcontainer/ (carpeta que acaba de copiar)
• README.md (creado por GitHub Desktop)
• .git/ (carpeta oculta para control de versiones)

Paso 3: Abrir el Proyecto en el Contenedor

• Inicie la aplicación Docker Desktop desde Windows o Mac. Déjela ejecutándose en segundo plano
• Abra VS Code
• Haga clic en File > Open Folder
• Navegue a la carpeta nba-dashboard
• Haga clic en Select Folder (Windows) o Open (Mac)
• Aparece una notificación en la esquina inferior derecha: Folder contains a Dev Container configuration file
• Haga clic en Reopen in Container
• Si no ve la notificación, haga clic en el ícono >< en la esquina inferior izquierda y seleccione Reopen in Container
• VS Code construye el contenedor Docker (toma 5-10 minutos la primera vez)
• Observe la notificación de progreso que muestra los pasos de construcción
• Cuando se complete, el ícono >< en la esquina inferior izquierda muestra Dev Container: R in Docker (AMD64)

Paso 4: Iniciar Claude Code

• En VS Code, haga clic en Terminal > New Terminal
• Ahora está dentro del contenedor Docker
• Escriba este comando para iniciar Claude Code:

claude

• Se abre una ventana del navegador para autenticación
• Haga clic en Continue with Google o Continue with Email
• Inicie sesión con su cuenta de Claude. Claude Code requiere un plan de pago de Claude (como Pro o Max) o una cuenta de Anthropic Console; el plan gratuito no lo incluye
• Si el navegador muestra un código en lugar de indicar que ya terminó, copie el código, vuelva a la terminal de VS Code, péguelo en el prompt Paste code here if prompted y presione Enter
• Si no se abre ninguna ventana del navegador, presione c para copiar el enlace de inicio de sesión y péguelo en su navegador
• Después de que la autenticación tenga éxito, regrese a la terminal de VS Code
• Si se le pregunta si confía en los archivos de esta carpeta, elija Yes
• Verá el mensaje de bienvenida de Claude

Claude Code ahora está ejecutándose y listo para sus solicitudes.

Paso 5: Primer Vibe - Obtener Datos de la NBA

Ahora comienza la parte divertida. En lugar de buscar documentación, simplemente describa lo que desea.

• En la terminal de Claude Code, escriba:

Instala el paquete hoopR y carga las estadísticas de jugadores de la NBA de la temporada más reciente que tenga datos. Muéstrame los 10 mejores jugadores por total de puntos anotados. Muéstralo como una tabla bien formateada.

• Presione Enter
• Observe cómo Claude:
  • Instala el paquete hoopR
  • Escribe código R para cargar datos
  • Crea un script para mostrar los mejores anotadores
  • Ejecuta el código
• Revise la salida que muestra nombres de jugadores, equipos y puntos

¡Acaba de usar vibe coding! Sin buscar documentación, sin ensayo y error—solo describa y pruebe.

Guarde su progreso: Pida a Claude que haga commit usando Git, o hágalo usted mismo desde GitHub Desktop:

Haz commit de estos cambios.

Paso 6: Segundo Vibe - Explorar los Datos

Antes de construir un panel, comprenda qué datos tiene.

• En la terminal de Claude Code, escriba:

Muéstrame qué columnas están disponibles en estos datos de la NBA. Luego crea un resumen mostrando: número de jugadores, número de equipos, promedio de puntos por jugador, y quién tiene más asistencias y rebotes.

• Presione Enter
• Claude explora el conjunto de datos y le muestra estadísticas interesantes
• Observe la salida para ver las columnas disponibles, como nombre del jugador, equipo, puntos, asistencias y rebotes

Esta exploración le ayuda a decidir qué incluir en su panel.

Guarde su progreso: Pida a Claude que haga commit, o use GitHub Desktop.

Paso 7: Tercer Vibe - Crear una Aplicación Shiny Básica

Es hora de construir el panel interactivo.

• En la terminal de Claude Code, escriba:

Crea una aplicación Shiny en un archivo llamado app.R que muestre una tabla interactiva de estadísticas de jugadores de la NBA. Incluye columnas para nombre de jugador, equipo, puntos, asistencias y rebotes. Agrega un deslizador para filtrar jugadores por un mínimo de puntos anotados (de 0 a 1000). Hazlo lucir limpio y profesional.

• Presione Enter
• Claude crea app.R con una aplicación Shiny completa
• Espere a que Claude termine de escribir el archivo

Paso 8: Ejecutar la Aplicación Shiny

Pruebe su panel para ver si funciona.

• En el Explorador de VS Code (barra lateral izquierda), haga clic en app.R para abrirlo
• Mire en la parte superior derecha del editor
• Encuentre el botón ▶ con una flecha desplegable
• Haga clic en el desplegable y seleccione Run Shiny App
• La aplicación se inicia y el panel se abre en una pestaña de vista previa dentro de VS Code (para usar su navegador habitual, abra la pestaña Ports en la parte inferior y haga clic en el icono del globo junto al puerto)
• Intente mover el deslizador de puntos: la tabla se filtra en tiempo real
• Desplácese por los datos de jugadores
• Haga commit de los cambios si la aplicación funciona

Si algo no funciona, copie cualquier mensaje de error y péguelo a Claude para corregirlo.

Paso 9: Cuarto Vibe - Agregar Visualización

Las tablas son útiles, pero las visualizaciones cuentan mejores historias.

• De vuelta en la terminal de Claude Code, escriba:

Agrega un gráfico de barras debajo de la tabla mostrando los 15 mejores jugadores por puntos. Usa colores diferentes para cada jugador. También agrega un gráfico de dispersión mostrando la relación entre puntos y asistencias para todos los jugadores filtrados.

• Presione Enter
• Claude actualiza app.R con código de visualización
• Haga clic en Run Shiny App nuevamente para recargar la aplicación
• Si la vista previa no cambia, haga clic en la flecha de recarga en la parte superior de la pestaña de vista previa (o actualice su navegador)
• Ahora ve un gráfico de barras colorido y un gráfico de dispersión
• Mueva el deslizador: todas las visualizaciones se actualizan juntas

Esto es vibe coding en acción: describa la funcionalidad, pruébela e itere.

Paso 10: Quinto Vibe - Agregar Filtro de Equipo

Haga el panel más interactivo con selección de equipo.

• En la terminal de Claude Code, escriba:

Agrega un menú desplegable para filtrar jugadores por equipo. Colócalo en la parte superior. Cuando seleccione un equipo, muestra solo jugadores de ese equipo. Incluye una opción "Todos los Equipos" para mostrar a todos.

• Presione Enter
• Claude agrega el filtro de equipo
• Haga clic en la flecha de recarga en la parte superior de la pestaña de vista previa (o actualice su navegador)
• Pruebe el menú desplegable: seleccione diferentes equipos como Lakers, Warriors, Celtics
• Observe cómo la tabla y los gráficos se actualizan para cada equipo

Está construyendo un panel profesional mediante una conversación.

Paso 11: Revisar y Hacer Commit

Antes de hacer commit, revise lo que Claude construyó.

• En el Explorador de VS Code, haga clic en app.R para abrirlo
• Revise el código: observe el diseño de la interfaz, la lógica del servidor y el código de gráficos
• No necesita entender cada línea, pero obtenga una idea de la estructura
• Abra GitHub Desktop
• Verá app.R listado (como archivo nuevo, o como modificado si ya hizo commit en un paso anterior)
• El panel derecho muestra el código agregado en verde
• En el campo Summary en la parte inferior izquierda, escriba:

Crear panel NBA con filtro de equipo y visualizaciones

• Haga clic en el botón azul de commit en la parte inferior (dice algo como Commit 1 file to main)
• Haga clic en Push origin para respaldar en GitHub

¡Ha guardado su primera versión funcional!

Paso 12: Iterar y Mejorar

Vibe coding brilla cuando itera. Intente agregar funcionalidades describiéndolas:

Ejemplos de solicitudes a Claude:

• “Agrega un cuadro de búsqueda de jugadores para que pueda escribir el nombre de un jugador y saltar a él”
• “Muestra los logos de los equipos junto a los nombres de equipo en el menú desplegable”
• “Agrega un gráfico de líneas mostrando la tendencia de puntos por partido para el equipo seleccionado”
• “Haz que la tabla sea ordenable haciendo clic en los encabezados de columna”
• “Agrega información emergente al gráfico de dispersión mostrando nombres de jugadores cuando pase el cursor”

Después de cada funcionalidad exitosa:

• Pruébela en el navegador
• Si funciona, haga commit con GitHub Desktop
• Si falla, dígale a Claude el error y solicite corrección
• Cuando esté corregido, haga commit de la versión funcional

Principios clave:

• Describa resultados, no implementación - Diga “muestra los mejores anotadores” no “usa arrange() y head()”
• Itere rápidamente - Probar → refinar → probar → refinar
• Haga commit de las versiones funcionales - Guarde cada éxito antes de intentar nuevas funcionalidades
• Acepte los fallos - Si el código de Claude falla, simplemente describa el error y solicite corrección
• Mantenga el control - Usted decide las funcionalidades, prioridades y cuándo es suficientemente bueno

Cada vez, siga el patrón: describir → probar → iterar → hacer commit.

Próximos Pasos

• Aplíquelo a su dominio - Use vibe coding para sus propios datos (investigación, negocios, pasatiempos)
• Pruebe otros paquetes - Pida a Claude que use nflfastR para fútbol americano o worldfootballR para fútbol
• Aprenda preguntando - Cuando Claude escriba código, pregunte “explica qué hace esta función” para aprender R
• Comparta su panel - Despliegue en shinyapps.io (pregunte a Claude cómo)
• Lea sobre vibe coding - Visite la guía de IBM para más información sobre este estilo de programación

Solución de Problemas

• La instalación de hoopR falla - Verifique su conexión a internet; el paquete descarga datos de la web. Intente ejecutar install.packages("hoopR") en una terminal de R para ver mensajes de error detallados.
• La aplicación Shiny no se inicia - Verifique que la extensión Shiny esté instalada (busque “Posit.shiny” en Extensiones de VS Code). Revise la terminal para mensajes de error y péguelos a Claude.
• No se muestran datos - El paquete hoopR obtiene datos en vivo; si la temporada de la NBA no ha comenzado, puede haber datos limitados. Pida a Claude que use datos de muestra o de una temporada anterior.
• Claude comete errores - ¡Es normal! Copie el mensaje de error, péguelo a Claude y diga “corrige este error”. Vibe coding incluye iteración y depuración.
• No puedo hacer push a GitHub - Asegúrese de haber iniciado sesión en GitHub Desktop y publicado el repositorio (Paso 1). Verifique su conexión a internet.

Descripción General del Flujo de Trabajo

Este tutorial combinó varias tecnologías en un flujo de trabajo:

• GitHub Desktop - Control de versiones con interfaz visual (crear repositorios, hacer commit, hacer push)
• Contenedor Docker - Entorno R aislado con todas las dependencias preinstaladas
• VS Code - Editor de código que se conecta al contenedor Docker
• Claude Code - Asistente con IA que escribe código R y Shiny a partir de sus descripciones
• Paquete hoopR - Fuente de datos de la NBA con API simple
• Framework Shiny - Aplicaciones web interactivas en R

La magia no está en ninguna herramienta individual, es cómo vibe coding le permite describir lo que desea e iterar rápidamente. Pasó de un proyecto vacío a un panel de deportes funcional en menos de 30 minutos sin escribir una sola línea de código manualmente.

Flujo de Trabajo Diario

Después de esta configuración inicial, su rutina diaria de vibe coding se convierte en:

1. Iniciar Docker Desktop - Lance la aplicación, espere el estado verde
2. Abrir VS Code - Abra su proyecto, reabra en contenedor si es necesario
3. Iniciar Claude Code - Escriba claude en la terminal
4. Describa su objetivo - “Agrega una funcionalidad que…” o “Corrige el error donde…”
5. Probar los cambios - Ejecute su aplicación, verifique si funciona
6. Iterar o hacer commit - Si falla, describa la corrección; si funciona, haga commit con GitHub Desktop
7. Hacer push regularmente - Haga clic en Push origin para respaldar en GitHub

Cuanto más practique, mejor será describiendo lo que desea. Vibe coding es una habilidad: aprende qué tipos de descripciones funcionan mejor y cómo dividir grandes ideas en partes que pueda probar.

Creado por Steven Ge el 7 de diciembre de 2025.