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 punado de herramientas en tu computadora. No te preocupes — todo aqui es gratuito, y la configuracion completa toma unos 20 minutos. Esto es lo que vamos a instalar y por que:

  • Una terminal — La interfaz de linea de comandos donde ejecutaras herramientas de IA y gestionaras tus proyectos. Ya tienes una en tu computadora; solo necesitas saber donde encontrarla.
  • Node.js — Un entorno de ejecucion de JavaScript que impulsa la mayoria de las herramientas modernas de desarrollo web. Claude Code y muchas otras herramientas de IA estan construidas sobre el.
  • Git — Un sistema de control de versiones que rastrea cada cambio en tu codigo. Piensa en el como un boton de deshacer infinito y una red de seguridad en uno.
  • VS Code — Un editor de codigo donde puedes ver, explorar y ocasionalmente ajustar los archivos que la IA genera para ti.
  • Claude Code — La herramienta de programacion con IA que usaremos a lo largo de este curso. Se ejecuta en tu terminal, entiende proyectos completos y puede leer archivos, escribir codigo, ejecutar comandos y corregir sus propios errores.

Al final de esta leccion, tendras todo esto instalado y habras construido tu primera aplicacion generada por IA. Comencemos.

Instalando Node.js

Node.js es un entorno de ejecucion de JavaScript — te permite ejecutar codigo JavaScript fuera de un navegador web. Lo necesitas porque Claude Code esta construido con Node.js, y la mayoria de las aplicaciones web que construiras usan herramientas basadas en JavaScript.

Paso 1: Descargar Node.js

Ve a https://nodejs.org y descarga la version LTS (Long Term Support). LTS significa que es la version estable y bien probada — siempre elige esta sobre la version "Current" a menos que tengas una razon especifica para no hacerlo.

El sitio web detectara automaticamente tu sistema operativo (Windows, macOS o Linux) y te ofrecera la descarga correcta.

Paso 2: Ejecutar el instalador

Abre el archivo descargado y sigue el asistente de instalacion. Acepta los valores predeterminados — estan bien para nuestros propositos. En Windows, asegurate de que la opcion de agregar Node.js al PATH este marcada (generalmente lo esta por defecto).

Paso 3: Verificar la instalacion

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

node -v

Deberias ver algo como v22.14.0 (el numero exacto puede variar — cualquier version v18 o superior esta bien).

npm -v

Deberias ver algo como 10.9.2. npm (Node Package Manager) se instala automaticamente con Node.js — es la herramienta que usaras 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 seccion de Solucion de problemas al final de esta leccion.

Que acabo de instalar?

Piensa en Node.js como el motor que ejecuta herramientas basadas en JavaScript en tu computadora. No interactuaras con el directamente muy a menudo, pero silenciosamente impulsa todo detras 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 terminos 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 podria arruinar tu proyecto sin forma de volver atras.

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 numero de version, estas listo. Si te pide instalar herramientas de desarrollador, acepta.

En Windows: Descarga el instalador y ejecutalo. Hay muchas opciones durante la instalacion — los valores predeterminados estan 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

Despues de la instalacion, dile a Git quien eres. Esta informacion se adjunta a cada punto de control que creas, lo cual es util cuando trabajas con otros (o cuando revisas tu propio historial mas 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 electronico. El correo deberia coincidir con el que usas para GitHub si tienes una cuenta (o planeas crear una).

Paso 3: Verificar

git --version

Deberias ver algo como git version 2.47.1. Cualquier version moderna funciona.

Que acabo de instalar?

Git es como una maquina del tiempo para tu codigo. Cada vez que le dices que guarde (commit), toma una instantanea de todo tu proyecto. Puedes volver a cualquier instantanea en cualquier momento. Tambien 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 leccion posterior, pero por ahora, solo debes saber que es tu herramienta de seguridad mas importante.

Configurando VS Code

VS Code (Visual Studio Code) es un editor de codigo gratuito hecho por Microsoft. Es el editor mas popular del mundo por una buena razon — es rapido, extensible y funciona muy bien con herramientas de IA.

Como vibe coder, no pasaras la mayor parte de tu tiempo en VS Code como lo haria un desarrollador tradicional. Pero lo usaras para explorar los archivos de tu proyecto, revisar lo que la IA genero y ocasionalmente hacer pequenias ediciones manuales.

Paso 1: Descargar VS Code

Ve a https://code.visualstudio.com y descarga el instalador para tu sistema operativo. Ejecutalo 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 pequenios) y busca cada una de estas:

  • ESLint — Resalta problemas de calidad de codigo. Te ayuda a detectar problemas en el codigo generado por IA.
  • Prettier — Formatea automaticamente el codigo 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 informacion de blame en linea. Facilita ver que cambio y cuando.

Haz clic en "Install" para cada una. Se activaran automaticamente.

Paso 3: Familiarizarte

Tomate 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. Abrela 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 accion.

Te familiarizaras mas con VS Code a medida que construyamos proyectos. Por ahora, tenerlo instalado es suficiente.

Conceptos basicos de terminal para no desarrolladores

La terminal (tambien llamada linea de comandos, consola o shell) es una interfaz basada en texto para interactuar con tu computadora. En lugar de hacer clic en iconos y menus, escribes comandos. Puede parecer intimidante al principio, pero solo necesitas un punado 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.
  • Simbolo del sistema (cmd) — Busca "cmd" en el menu Inicio. La opcion clasica.
  • Git Bash — Se instala con Git, te da una terminal tipo Linux en Windows. Encuentrala en el menu 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

Aqui estan los unicos 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 completara automaticamente. 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 este ejecutandose. Si un comando parece trabado, este es tu boton de escape.
  • Copiar/pegar — En la mayoria 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, Simbolo del sistema y Git Bash. Por ejemplo, ls funciona en Git Bash y PowerShell pero no en el viejo Simbolo del sistema. A lo largo de este curso, usaremos comandos que funcionan en Git Bash y la mayoria de terminales tipo Unix, ya que eso es lo que Claude Code y la mayoria de herramientas de desarrollo web esperan. Si estas 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. Aprenderas los comandos naturalmente a medida que los uses. Y si olvidas alguno, siempre puedes preguntarle a Claude Code — tambien conoce los comandos de terminal.

Instalando Claude Code

Claude Code es una herramienta de programacion agentica con IA hecha por Anthropic. A diferencia de las herramientas de IA basadas en chat donde copias y pegas codigo 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 especifico.

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

Paso 2: Verificar la instalacion

claude --version

Deberias ver un numero de version. Si ves "command not found," revisa la seccion de Solucion de problemas a continuacion.

Paso 3: Autenticacion

La primera vez que ejecutes Claude Code, te pedira que te autentiques. Necesitas una API key de Anthropic o una cuenta de Anthropic. Asi funciona el proceso:

  1. Ejecuta claude en tu terminal.
  2. Abrira una ventana del navegador para la autenticacion (o mostrara instrucciones para configurar la API key).
  3. Sigue las indicaciones para iniciar sesion o ingresar tu API key.
  4. Una vez autenticado, Claude Code esta listo para usar.

Sobre las API keys: Una API key es como una contrasenia que permite a Claude Code comunicarse con los servidores de IA de Anthropic. Si estas usando la API directa, necesitaras configurar la facturacion en el sitio web de Anthropic. Claude Code tambien soporta la conexion a traves de otros planes — el proceso de autenticacion te guiara.

Paso 4: Probarlo

Navega a cualquier directorio y ejecuta:

claude

Deberias 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 seccion.

Tu primera interaccion con la IA

Este es el momento donde todo se une. Vas a crear tu primera aplicacion usando vibe coding. No sera compleja — pero sera real, y la experiencia de ver como 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 habito que debes desarrollar ahora:

git init

Veras un mensaje diciendo que se inicializo un repositorio Git vacio. Bien.

Paso 3: Lanzar Claude Code

claude

Claude Code se inicia y te presenta un prompt. Aqui 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 empezara a trabajar. Veras como crea archivos — probablemente un archivo index.html con estructura HTML, estilos CSS y logica JavaScript todo en un lugar (o quizas 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 mayoria 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

Deberias ver una aplicacion de contador pulida y funcional. Haz clic en los botones. Funcionan. El diseno esta centrado. Los colores son agradables. Acabas de construir una aplicacion web describiendo lo que querias.

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.

Que acaba de pasar?

Desglosemos lo que Claude Code hizo detras de escena:

  1. Analizo tu descripcion — Entendio que querias un contador con funcionalidad de incremento, decremento y reset.
  2. Tomo decisiones de diseno — Dijiste "esquema de colores agradable" y eligio colores, fuentes y espaciado especificos.
  3. Escribio el codigo — Genero HTML, CSS y JavaScript validos que implementan tus requisitos.
  4. Creo los archivos — Escribio el codigo directamente en el directorio de tu proyecto.

No necesitaste saber sintaxis de HTML, propiedades de CSS, event handlers de JavaScript ni manipulacion del DOM. Describiste la experiencia de usuario, y la IA se encargo de la implementacion. Eso es vibe coding.

Solucion de problemas comunes

Configurar herramientas de desarrollo no siempre va bien. Aqui estan los problemas mas comunes y como 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.

Solucion (Windows): Reinicia tu terminal completamente (cierra y vuelve a abrir). Si eso no funciona, reinstala Node.js y asegurate de que "Add to PATH" este marcado durante la instalacion.

Solucion (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 esta en tu PATH.

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

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

Solucion: Reinicia tu terminal. En Windows, asegurate de que Git fue instalado con la opcion "Add to PATH". En macOS, ejecutar git --version deberia pedirte instalarlo via Xcode Command Line Tools.

Errores de permisos al instalar paquetes globales de npm

Podrias ver errores como EACCES: permission denied al ejecutar npm install -g.

Solucion (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 anadiendo esta linea a tu ~/.bashrc o ~/.zshrc:

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

Reinicia tu terminal e intenta de nuevo.

Solucion (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.

Version de Node.js demasiado antigua

Claude Code requiere una version relativamente moderna de Node.js (v18 o superior).

Solucion: Descarga la ultima version LTS desde https://nodejs.org e instalala sobre tu version existente. O usa un gestor de versiones como nvm (macOS/Linux) o nvm-windows (Windows) para gestionar multiples versiones.

Verifica tu version 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 podria estar bloqueando las llamadas a la API.

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

Solucion: Si estas 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 este bloqueando conexiones HTTPS salientes.

Claude Code se abre pero la autenticacion falla

Solucion: Asegurate 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, asegurate de que sea valida y tenga creditos disponibles.

Consejos generales

Cuando algo sale mal durante la configuracion:

  1. Lee el mensaje de error. A menudo te dice exactamente que esta mal, incluso si el formato parece intimidante.
  2. Reinicia tu terminal. Muchos problemas de instalacion 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 buscala en internet. Casi seguramente alguien ha tenido el mismo problema.
  4. Preguntale a Claude Code. Una vez que este funcionando, puedes describir cualquier error que estes viendo y te ayudara a solucionarlo. Es sorprendentemente bueno diagnosticando problemas de entorno de desarrollo.

Que sigue

Tu entorno esta listo. Tienes Node.js, Git, VS Code y Claude Code instalados y funcionando. Has construido tu primera aplicacion describiendola en lenguaje natural. La has guardado con Git.

En la proxima leccion, exploraremos el panorama mas amplio de herramientas de programacion con IA. Claude Code es la herramienta principal de este curso, pero entender como se compara con Cursor, GitHub Copilot y otras opciones te ayudara a elegir la herramienta correcta para cualquier situacion — y te dara contexto sobre por que usamos lo que usamos.

Nos vemos alli.