VibeCoder

Guías de VibeCoder

Instalación, herramientas, despliegue y rutas de trabajo. Material de consulta: no suma puntaje.

Arranque: el ABC para empezar

Todo lo que hay que instalar y configurar, en orden, con comandos para copiar y pegar. Elige tu sistema operativo; los comandos cambian solos.

1. La base (una sola vez por computador)

Git guarda versiones, Node.js ejecuta los proyectos web y GitHub CLI conecta tu computador con GitHub.

  1. 1

    Abre la terminal

    Cmd+Espacio, escribe Terminal y presiona Enter.

  2. 2

    Instala Homebrew, el gestor de paquetes de Mac

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

    Al terminar, Homebrew muestra dos o tres líneas para agregarlo al PATH: cópialas y ejecútalas.

  3. 3

    Instala Git, Node.js y GitHub CLI

    brew install git node gh
  4. 4

    Verifica que todo quedó instalado

    git --version
node --version
gh --version
  5. 5

    Preséntate ante Git (una sola vez)

    git config --global user.name "Tu Nombre"
git config --global user.email "tu-correo@ejemplo.com"
  6. 6

    Conecta tu cuenta de GitHub

    gh auth login

    Elige GitHub.com, HTTPS y autenticación por navegador.

2. Instala la herramienta de tu equipo

Lovable no se instala. Claude Code y Cursor sí. La guía completa de cada una está en Herramientas.

  • Claude Code

    Instala Claude Code

    curl -fsSL https://claude.ai/install.sh | bash

  • Lovable

    No se instala: entra a lovable.dev

    Crea una cuenta con Google o GitHub y abre un proyecto nuevo desde el navegador.

  • Cursor

    Instala el editor

    Descárgalo desde cursor.com/download e inicia sesión. Puedes importar tu configuración de VS Code.

3. Git y GitHub: los comandos que vas a usar todos los días

Todas las herramientas se encuentran en el repositorio. Con estos diez comandos te mueves entre ellas.

git status
Muestra qué cambió
git switch -c feature/nombre
Crea una rama y te cambia a ella
git add .
Prepara todos los cambios
git commit -m "Describe el cambio"
Guarda una versión
git push -u origin HEAD
Sube la rama a GitHub
git pull
Trae los cambios de GitHub (por ejemplo, los que hizo Lovable)
gh repo create mi-prototipo --private --source=. --push
Crea el repositorio en GitHub desde tu carpeta
gh repo clone usuario/repositorio
Descarga un repositorio a tu computador
gh pr create --fill
Abre un pull request con la rama actual
gh pr view --web
Abre el pull request en el navegador

4. Despliegue desde la terminal

Opcional: los tres servicios también se configuran desde su sitio web. La comparación completa está en Despliegue.

Supabase

Instalar

brew install supabase/tap/supabase

Alternativa en cualquier sistema, dentro del proyecto: npm install -D supabase, y luego antepones npx a cada comando (npx supabase login).

Comandos útiles

supabase login
Inicia sesión
supabase init
Crea la carpeta supabase/ en el proyecto
supabase link
Conecta la carpeta con tu proyecto en la nube
supabase migration new crear_casos
Crea el archivo de migración de una tabla
supabase db push
Aplica las migraciones al proyecto conectado
supabase start
Levanta Supabase local (requiere Docker)
supabase functions deploy nombre
Publica una Edge Function

Vercel

Instalar

npm i -g vercel

Lo más simple es conectar el repositorio desde vercel.com: cada push publica una vista previa.

Comandos útiles

vercel login
Inicia sesión
vercel link
Conecta la carpeta con un proyecto de Vercel
vercel
Publica una vista previa
vercel --prod
Publica en producción
vercel env add NOMBRE
Agrega una variable de entorno (claves fuera del código)
vercel env pull
Descarga las variables a tu entorno local
vercel --version
Verifica la versión

Railway

Instalar

bash <(curl -fsSL railway.com/install.sh)

En Windows, el instalador por script requiere WSL; la instalación con npm funciona directo.

Comandos útiles

railway login
Inicia sesión
railway init
Crea un proyecto nuevo
railway link
Conecta la carpeta con un proyecto existente
railway add
Agrega una base de datos (Postgres, MySQL, Redis o Mongo)
railway up
Despliega la carpeta actual
railway run npm start
Corre la app local con las variables de Railway
railway environment
Cambia de entorno

5. Tu primera app de punta a punta

Lovable para la primera pantalla, un agente para seguir construyendo y Vercel para publicar. Recuerda: solo datos ficticios.

  1. 1

    Primera pantalla en Lovable

    Deja que Lovable te entreviste, crea el Knowledge y construye una sola pantalla con datos ficticios. Conecta GitHub al final.

  2. 2

    Descarga el proyecto

    gh repo clone TU-USUARIO/TU-PROYECTO
cd TU-PROYECTO
npm install
npm run dev
  3. 3

    Abre el agente en modo plan

    claude --permission-mode plan

    Con Cursor: abre la carpeta, entra al chat y usa Shift+Tab.

  4. 4

    Pídele entender antes de construir

    Lee este proyecto y explícame la estructura, el stack y cómo se ejecuta. No modifiques nada. Luego propón un plan para [siguiente funcionalidad] y espera mi aprobación.
  5. 5

    Entrega el cambio por una rama

    git switch -c feature/siguiente-funcionalidad
git add .
git commit -m "Agrega siguiente funcionalidad"
git push -u origin HEAD
gh pr create --fill
  6. 6

    Publica

    npm i -g vercel
vercel login
vercel link
vercel --prod

    Si el proyecto vive en Lovable, también puedes usar Publish.

¿Listo para practicar? Arma los prompts en el juego.

Jugar VibeCoder