Saltar al contenido
Lección 2 de 22

Configurando tu entorno

17 min read

Lo que necesitas

Antes de poder empezar con el vibe coding, necesitas instalar un puñado de herramientas en tu computadora. No te preocupes — todo aquí es gratuito, y la configuración completa toma unos 20 minutos. Esto es lo que vamos a instalar y por qué:

  • Una terminal — La interfaz de línea de comandos donde ejecutarás herramientas de IA y gestionarás tus proyectos. Ya tienes una en tu computadora; solo necesitas saber dónde encontrarla.
  • Node.js — Un entorno de ejecución de JavaScript que impulsa la mayoría de las herramientas modernas de desarrollo web. Claude Code y muchas otras herramientas de IA están construidas sobre él.
  • Git — Un sistema de control de versiones que rastrea cada cambio en tu código. Piensa en él como un botón de deshacer infinito y una red de seguridad en uno.
  • VS Code — Un editor de código donde puedes ver, explorar y ocasionalmente ajustar los archivos que la IA genera para ti.
  • Claude Code — La herramienta de programación con IA que usaremos a lo largo de este curso. Se ejecuta en tu terminal, entiende proyectos completos y puede leer archivos, escribir código, ejecutar comandos y corregir sus propios errores.

Al final de esta lección, tendrás todo esto instalado y habrás construido tu primera aplicación generada por IA. Comencemos.

Instalando Node.js

Node.js es un entorno de ejecución de JavaScript — te permite ejecutar código JavaScript fuera de un navegador web. Lo necesitas porque Claude Code está construido con Node.js, y la mayoría de las aplicaciones web que construirás usan herramientas basadas en JavaScript.

Paso 1: Descargar Node.js

Ve a https://nodejs.org y descarga la versión LTS (Long Term Support). LTS significa que es la versión estable y bien probada — siempre elige esta sobre la versión "Current" a menos que tengas una razón específica para no hacerlo.

El sitio web detectará automáticamente tu sistema operativo (Windows, macOS o Linux) y te ofrecerá la descarga correcta.

Paso 2: Ejecutar el instalador

Abre el archivo descargado y sigue el asistente de instalación. Acepta los valores predeterminados — están bien para nuestros propósitos. En Windows, asegúrate de que la opción de agregar Node.js al PATH esté marcada (generalmente lo está por defecto).

Paso 3: Verificar la instalación

Abre tu terminal (veremos cómo encontrarla en un momento) y ejecuta estos dos comandos:

node -v

Deberías ver algo como v22.14.0 (el número exacto puede variar — cualquier versión v18 o superior está bien).

npm -v

Deberías ver algo como 10.9.2. npm (Node Package Manager) se instala automáticamente con Node.js — es la herramienta que usarás para instalar otros paquetes, incluyendo Claude Code.

Si alguno de los comandos muestra un error como "command not found" o "not recognized," ve a la sección de Solución de problemas al final de esta lección.

¿Qué acabo de instalar?

Piensa en Node.js como el motor que ejecuta herramientas basadas en JavaScript en tu computadora. No interactuarás con él directamente muy a menudo, pero silenciosamente impulsa todo detrás de escena. npm es la tienda de aplicaciones para herramientas de JavaScript — cuando quieres instalar una nueva herramienta, usas npm.

Instalando Git

Git es un sistema de control de versiones. En términos simples, mantiene un historial completo de cada cambio que haces en tu proyecto. Cada vez que guardas un punto de control (llamado "commit"), Git recuerda el estado exacto de cada archivo. Si algo se rompe, puedes volver a cualquier punto de control anterior al instante.

Para los vibe coders, Git es tu red de seguridad. Cuando le pides a la IA que haga un cambio grande y no funciona, Git te permite deshacer todo e intentar de nuevo. Sin Git, un cambio malo generado por IA podría arruinar tu proyecto sin forma de volver atrás.

Paso 1: Descargar Git

Ve a https://git-scm.com y descarga el instalador para tu sistema operativo.

En macOS: Es posible que ya tengas Git. Abre Terminal y escribe git --version. Si muestra un número de versión, estás listo. Si te pide instalar herramientas de desarrollador, acepta.

En Windows: Descarga el instalador y ejecútalo. Hay muchas opciones durante la instalación — los valores predeterminados están bien. La importante es elegir un editor predeterminado; puedes seleccionar VS Code si ya lo tienes instalado, o simplemente dejar el predeterminado.

En Linux: Usa tu gestor de paquetes:

# Ubuntu/Debian
sudo apt install git

# Fedora
sudo dnf install git

Paso 2: Configurar Git

Después de la instalación, dile a Git quién eres. Esta información se adjunta a cada punto de control que creas, lo cual es útil cuando trabajas con otros (o cuando revisas tu propio historial más adelante).

Abre tu terminal y ejecuta:

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

Reemplaza los valores con tu nombre real y correo electrónico. El correo debería coincidir con el que usas para GitHub si tienes una cuenta (o planeas crear una).

Paso 3: Verificar

git --version

Deberías ver algo como git version 2.47.1. Cualquier versión moderna funciona.

¿Qué acabo de instalar?

Git es como una máquina del tiempo para tu código. Cada vez que le dices que guarde (commit), toma una instantánea de todo tu proyecto. Puedes volver a cualquier instantánea en cualquier momento. También puedes crear versiones paralelas de tu proyecto (branches) para experimentar sin arriesgar tu trabajo principal. Cubriremos los flujos de trabajo de Git en detalle en una lección posterior, pero por ahora, solo debes saber que es tu herramienta de seguridad más importante.

Configurando VS Code

VS Code (Visual Studio Code) es un editor de código gratuito hecho por Microsoft. Es el editor más popular del mundo por una buena razón — es rápido, extensible y funciona muy bien con herramientas de IA.

Como vibe coder, no pasarás la mayor parte de tu tiempo en VS Code como lo haría un desarrollador tradicional. Pero lo usarás para explorar los archivos de tu proyecto, revisar lo que la IA generó y ocasionalmente hacer pequeñas ediciones manuales.

Paso 1: Descargar VS Code

Ve a https://code.visualstudio.com y descarga el instalador para tu sistema operativo. Ejecútalo y acepta los valores predeterminados.

Paso 2: Instalar extensiones esenciales

Las extensiones agregan funcionalidades a VS Code. Abre VS Code, haz clic en el icono de Extensiones en la barra lateral izquierda (parece cuatro cuadrados pequeños) y busca cada una de estas:

  • ESLint — Resalta problemas de calidad de código. Te ayuda a detectar problemas en el código generado por IA.
  • Prettier — Formatea automáticamente el código para que sea consistente y legible.
  • Tailwind CSS IntelliSense — Autocompletado y vistas previas para Tailwind CSS, que usaremos para los estilos.
  • GitLens — Muestra historial de Git e información de blame en línea. Facilita ver qué cambió y cuándo.

Haz clic en "Install" para cada una. Se activarán automáticamente.

Paso 3: Familiarizarte

Tómate un minuto para explorar la interfaz de VS Code:

  • Explorador de archivos (barra lateral izquierda) — Muestra los archivos y carpetas de tu proyecto.
  • Editor (centro) — Donde ves y editas archivos.
  • Terminal (panel inferior) — Una terminal integrada. Ábrela con Ctrl+`` (acento grave) en Windows/Linux o Cmd+`` en macOS.
  • Paleta de comandos — Presiona Ctrl+Shift+P (o Cmd+Shift+P en macOS) para buscar cualquier acción.

Te familiarizarás más con VS Code a medida que construyamos proyectos. Por ahora, tenerlo instalado es suficiente.

Conceptos básicos de terminal para no desarrolladores

La terminal (también llamada línea de comandos, consola o shell) es una interfaz basada en texto para interactuar con tu computadora. En lugar de hacer clic en iconos y menús, escribes comandos. Puede parecer intimidante al principio, pero solo necesitas un puñado de comandos para el vibe coding.

Encontrar tu terminal

En Windows: Tienes varias opciones:

  • PowerShell — Presiona Win+X y selecciona "Terminal" o "Windows PowerShell." Es el predeterminado moderno.
  • Símbolo del sistema (cmd) — Busca "cmd" en el menú Inicio. La opción clásica.
  • Git Bash — Se instala con Git, te da una terminal tipo Linux en Windows. Encuéntrala en el menú Inicio.
  • Terminal de VS Code — Presiona Ctrl+`` dentro de VS Code.

En macOS: Abre Spotlight (Cmd+Space), escribe "Terminal" y presiona Enter.

En Linux: Presiona Ctrl+Alt+T o encuentra Terminal en tus aplicaciones.

Comandos esenciales

Aquí están los únicos comandos que necesitas para empezar:

# Ver donde estas (mostrar directorio de trabajo)
pwd

# Listar archivos en el directorio actual
ls          # macOS/Linux/Git Bash
dir         # Windows PowerShell/cmd

# Cambiar de directorio (navegar a una carpeta)
cd mi-proyecto

# Subir un nivel
cd ..

# Ir a tu directorio home
cd ~

# Crear un nuevo directorio
mkdir mi-nuevo-proyecto

# Limpiar la pantalla de la terminal
clear       # macOS/Linux/Git Bash
cls         # Windows PowerShell/cmd

Consejos de productividad

  • Autocompletado con Tab — Empieza a escribir el nombre de una carpeta o archivo y presiona Tab. La terminal lo completará automáticamente. Esto ahorra mucho tipeo y previene errores.
  • Flecha arriba — Presiona la tecla de flecha arriba para navegar por comandos anteriores. No necesitas reescribir nada.
  • Ctrl+C — Detiene lo que sea que esté ejecutándose. Si un comando parece trabado, este es tu botón de escape.
  • Copiar/pegar — En la mayoría de las terminales modernas, Ctrl+Shift+C copia y Ctrl+Shift+V pega (en macOS, funcionan los normales Cmd+C y Cmd+V).

Una nota sobre las diferentes terminales

Los usuarios de Windows pueden notar que algunos comandos difieren entre PowerShell, Símbolo del sistema y Git Bash. Por ejemplo, ls funciona en Git Bash y PowerShell pero no en el viejo Símbolo del sistema. A lo largo de este curso, usaremos comandos que funcionan en Git Bash y la mayoría de terminales tipo Unix, ya que eso es lo que Claude Code y la mayoría de herramientas de desarrollo web esperan. Si estás en Windows, te recomiendo usar Git Bash o la terminal de VS Code (que puede configurarse para usar Git Bash).

No te preocupes por memorizar todo. Aprenderás los comandos naturalmente a medida que los uses. Y si olvidas alguno, siempre puedes preguntarle a Claude Code — también conoce los comandos de terminal.

Instalando Claude Code

Claude Code es una herramienta de programación agéntica con IA hecha por Anthropic. A diferencia de las herramientas de IA basadas en chat donde copias y pegas código de un lado a otro, Claude Code opera directamente en tu proyecto. Lee tus archivos, escribe nuevos, ejecuta comandos de terminal, ve la salida de errores y corrige problemas — todo desde tu terminal.

Paso 1: Instalar Claude Code

Abre tu terminal y ejecuta:

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

La bandera -g significa "global" — instala Claude Code como un comando que puedes ejecutar desde cualquier lugar, no solo en un proyecto específico.

Esto tomará un minuto mientras descarga e instala el paquete y sus dependencias.

Paso 2: Verificar la instalación

claude --version

Deberías ver un número de versión. Si ves "command not found," revisa la sección de Solución de problemas a continuación.

Paso 3: Autenticación

La primera vez que ejecutes Claude Code, te pedirá que te autentiques. Necesitas una API key de Anthropic o una cuenta de Anthropic. Así funciona el proceso:

  1. Ejecuta claude en tu terminal.
  2. Abrirá una ventana del navegador para la autenticación (o mostrará instrucciones para configurar la API key).
  3. Sigue las indicaciones para iniciar sesión o ingresar tu API key.
  4. Una vez autenticado, Claude Code está listo para usar.

Sobre las API keys: Una API key es como una contraseña que permite a Claude Code comunicarse con los servidores de IA de Anthropic. Si estás usando la API directa, necesitarás configurar la facturación en el sitio web de Anthropic. Claude Code también soporta la conexión a través de otros planes — el proceso de autenticación te guiará.

Paso 4: Probarlo

Navega a cualquier directorio y ejecuta:

claude

Deberías ver la interfaz de Claude Code aparecer en tu terminal — un prompt esperando tus instrucciones. Escribe exit o presiona Ctrl+C para salir por ahora. Haremos un primer proyecto adecuado en la siguiente sección.

Tu primera interacción con la IA

Este es el momento donde todo se une. Vas a crear tu primera aplicación usando vibe coding. No será compleja — pero será real, y la experiencia de ver cómo la IA convierte tus palabras en software funcional es genuinamente emocionante.

Paso 1: Crear un directorio de proyecto

Abre tu terminal y crea una nueva carpeta para tu primer proyecto:

mkdir my-first-vibe-project
cd my-first-vibe-project

Paso 2: Inicializar Git

Configura el control de versiones desde el principio. Este es un hábito que debes desarrollar ahora:

git init

Verás un mensaje diciendo que se inicializó un repositorio Git vacío. Bien.

Paso 3: Lanzar Claude Code

claude

Claude Code se inicia y te presenta un prompt. Aquí es donde describes lo que quieres construir.

Paso 4: Dar tu primer prompt

Escribe algo como esto:

Create a simple web page with:
- A heading that says "My First Vibe Coded App"
- A counter that starts at 0
- A "+" button that increases the counter
- A "-" button that decreases the counter
- A "Reset" button that sets it back to 0
- Modern styling with a centered layout, rounded buttons, and a
  pleasant color scheme
- Use plain HTML, CSS, and JavaScript (no frameworks)

Presiona Enter y observa lo que pasa.

Paso 5: Observar la magia

Claude Code empezará a trabajar. Verás cómo crea archivos — probablemente un archivo index.html con estructura HTML, estilos CSS y lógica JavaScript todo en un lugar (o quizás separados en archivos individuales). Toma decisiones sobre colores, fuentes, espaciado y estilos de botones.

Todo el proceso toma menos de un minuto.

Paso 6: Ver el resultado

Abre el archivo HTML generado en tu navegador. En la mayoría de los sistemas, puedes simplemente hacer doble clic en el archivo, o ejecutar:

# macOS
open index.html

# Windows (desde Git Bash)
start index.html

# Linux
xdg-open index.html

Deberías ver una aplicación de contador pulida y funcional. Haz clic en los botones. Funcionan. El diseño está centrado. Los colores son agradables. Acabas de construir una aplicación web describiendo lo que querías.

Paso 7: Guardar tu trabajo

De vuelta en Claude Code (o en una terminal separada), guarda este hito con Git:

git add .
git commit -m "feat: initial counter app from first vibe coding session"

Felicidades — acabas de completar tu primer ciclo de vibe coding: describir, generar, probar, hacer commit.

¿Qué acaba de pasar?

Desglosemos lo que Claude Code hizo detrás de escena:

  1. Analizó tu descripción — Entendió que querías un contador con funcionalidad de incremento, decremento y reset.
  2. Tomó decisiones de diseño — Dijiste "esquema de colores agradable" y eligió colores, fuentes y espaciado específicos.
  3. Escribió el código — Generó HTML, CSS y JavaScript válidos que implementan tus requisitos.
  4. Creó los archivos — Escribió el código directamente en el directorio de tu proyecto.

No necesitaste saber sintaxis de HTML, propiedades de CSS, event handlers de JavaScript ni manipulación del DOM. Describiste la experiencia de usuario, y la IA se encargó de la implementación. Eso es vibe coding.

Solución de problemas comunes

Configurar herramientas de desarrollo no siempre va bien. Aquí están los problemas más comunes y cómo solucionarlos.

"node: command not found" o "node is not recognized"

Causa: Node.js no fue agregado al PATH de tu sistema — la lista de directorios que tu terminal busca cuando escribes un comando.

Solución (Windows): Reinicia tu terminal completamente (cierra y vuelve a abrir). Si eso no funciona, reinstala Node.js y asegúrate de que "Add to PATH" esté marcado durante la instalación.

Solución (macOS/Linux): Si instalaste mediante un gestor de paquetes, intenta reiniciar tu terminal. Si descargaste desde el sitio web, es posible que necesites agregar Node.js a tu PATH manualmente. Ejecuta which node — si no devuelve nada, Node.js no está en tu PATH.

"git: command not found" o "git is not recognized"

Causa: Igual que arriba — Git no está en tu PATH.

Solución: Reinicia tu terminal. En Windows, asegúrate de que Git fue instalado con la opción "Add to PATH". En macOS, ejecutar git --version debería pedirte instalarlo vía Xcode Command Line Tools.

Errores de permisos al instalar paquetes globales de npm

Podrías ver errores como EACCES: permission denied al ejecutar npm install -g.

Solución (macOS/Linux): No uses sudo. En su lugar, configura npm para usar un directorio diferente para paquetes globales:

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

Luego agrega ~/.npm-global/bin a tu PATH añadiendo esta línea a tu ~/.bashrc o ~/.zshrc:

export PATH=~/.npm-global/bin:$PATH

Reinicia tu terminal e intenta de nuevo.

Solución (Windows): Ejecuta tu terminal como Administrador (clic derecho y selecciona "Ejecutar como administrador"), o usa Node Version Manager para Windows (nvm-windows) que evita los problemas de permisos por completo.

Versión de Node.js demasiado antigua

Claude Code requiere una versión relativamente moderna de Node.js (v18 o superior).

Solución: Descarga la última versión LTS desde https://nodejs.org e instálala sobre tu versión existente. O usa un gestor de versiones como nvm (macOS/Linux) o nvm-windows (Windows) para gestionar múltiples versiones.

Verifica tu versión con:

node -v

Firewall o red bloqueando llamadas a la API

Si Claude Code se instala pero no puede conectarse a los servidores de Anthropic, tu red podría estar bloqueando las llamadas a la API.

Síntomas: Claude Code se inicia pero da errores de red o timeout cuando intentas usarlo.

Solución: Si estás en una red corporativa o escolar, es posible que necesites configurar settings de proxy o pedir a tu departamento de TI que permita los endpoints de la API de Anthropic. En una red personal, verifica que tu firewall o VPN no esté bloqueando conexiones HTTPS salientes.

Claude Code se abre pero la autenticación falla

Solución: Asegúrate de tener una cuenta activa de Anthropic o una API key. Visita https://console.anthropic.com para verificar el estado de tu cuenta. Si usas una API key, asegúrate de que sea válida y tenga créditos disponibles.

Consejos generales

Cuando algo sale mal durante la configuración:

  1. Lee el mensaje de error. A menudo te dice exactamente qué está mal, incluso si el formato parece intimidante.
  2. Reinicia tu terminal. Muchos problemas de instalación se resuelven simplemente cerrando y reabriendo tu terminal para que recoja las nuevas entradas del PATH.
  3. Busca el mensaje de error. Copia la parte clave del error y búscala en internet. Casi seguramente alguien ha tenido el mismo problema.
  4. Pregúntale a Claude Code. Una vez que esté funcionando, puedes describir cualquier error que estés viendo y te ayudará a solucionarlo. Es sorprendentemente bueno diagnosticando problemas de entorno de desarrollo.

Qué sigue

Tu entorno está listo. Tienes Node.js, Git, VS Code y Claude Code instalados y funcionando. Has construido tu primera aplicación describiéndola en lenguaje natural. La has guardado con Git.

En la próxima lección, exploraremos el panorama más amplio de herramientas de programación con IA. Claude Code es la herramienta principal de este curso, pero entender cómo se compara con Cursor, GitHub Copilot y otras opciones te ayudará a elegir la herramienta correcta para cualquier situación — y te dará contexto sobre por qué usamos lo que usamos.

Nos vemos allí.