Ruta Claude Code

Claude Code para principiantes

Esta misma academia está construida con esta herramienta. Claude Code es un asistente de IA que trabaja dentro de tu editor: lee tu proyecto, escribe y edita archivos, y ejecuta comandos por ti — siempre bajo tu supervisión. No sustituye lo aprendido en las otras rutas, lo acelera.

1
Qué es Claude Code y cómo instalarlo en VS CodeLa extensión (o la terminal), tu primera instrucción y cómo revisar los cambios antes de aceptarlos
Disponible
2
Cómo pedir cambios concretosPrompts precisos, encargos por pasos y pedir explicación antes de tocar nada
Disponible
3
Revisar y aceptar cambios con seguridadPróximamente
Próxima
4
Automatizar tareas repetitivasPróximamente
Próxima

Lección 1 — Qué es Claude Code y cómo instalarlo en VS Code

Claude Code es un asistente de programación con IA que se ejecuta dentro de tu propio proyecto: puede leer tus archivos, proponer y escribir código, ejecutar comandos en la terminal y explicarte lo que hace, todo en lenguaje natural. No es autocompletado — le puedes pedir una tarea entera ("crea una página de contacto con un formulario") y te propone cómo hacerla.

Necesitas dos cosas antes de empezar: VS Code ya instalado (ruta anterior) y una cuenta en claude.com.

La forma más sencilla de instalarlo es como extensión de VS Code:

  1. Abre VS Code y pulsa el icono de Extensiones en la barra de actividades.
  2. Busca "Claude Code" (de Anthropic) e instálala.
  3. Se abrirá un panel lateral nuevo. La primera vez te pedirá iniciar sesión con tu cuenta de Claude — sigue el proceso en el navegador que se abre solo.
  4. Abre la carpeta de tu proyecto en VS Code (igual que en la lección de interfaz de la ruta VS Code) antes de empezar a pedirle nada — Claude Code trabaja sobre esa carpeta.
panel de Claude Code
Crea un archivo index.html con un título "Hola mundo"
y un párrafo debajo que diga "Mi primera página con ayuda de IA".

Al pedirle algo así, Claude Code no cambia tus archivos a ciegas: te muestra exactamente qué va a crear o modificar (como un diff, en verde lo que añade) y te pide confirmación antes de tocar nada. Tú decides si aceptar, pedir un cambio, o rechazarlo.

También puedes usarlo sin VS Code, directamente en una terminal — es la misma herramienta por debajo, sin panel gráfico de por medio. Útil si trabajas contra un servidor remoto por SSH (como en la ruta Servidor) o simplemente prefieres la terminal.

terminal
npm install -g @anthropic-ai/claude-code
cd tu-carpeta-de-proyecto
claude

Necesita Node.js instalado. El comando claude arranca una sesión interactiva en la carpeta donde estés — igual de conversación, mismo diff antes de aceptar. La extensión de VS Code no es más que una capa visual sobre este mismo CLI.

🔒 Regla de oro: lee siempre lo que va a hacer antes de aceptar, sobre todo si te propone ejecutar un comando en la terminal. Es una herramienta muy potente y normalmente fiable, pero la responsabilidad final de lo que se ejecuta en tu ordenador es tuya — igual que con cualquier código que copies de internet sin entenderlo.
💡 Pruébalo tú mismo: instala la extensión, abre una carpeta vacía en VS Code y pégale el prompt del ejemplo de arriba en el panel de Claude Code. Revisa el archivo que propone, acéptalo y ábrelo en el navegador — acabas de completar tu primer encargo a una IA dentro de tu propio editor.

Lección 2 — Cómo pedir cambios concretos

En la lección 1 le pediste crear un archivo desde cero — el caso más fácil. La mayoría de encargos reales son sobre código que ya existe, y ahí la calidad del resultado depende sobre todo de cómo pidas el cambio. Un prompt vago da un resultado vago; uno concreto da un resultado concreto.

Tres cosas que marcan la diferencia en cualquier instrucción:

  • Nombra el archivo o la zona exacta — "cambia el color del botón" es ambiguo si hay diez botones; "cambia el color del botón .btn-primary en estilos.css" no lo es.
  • Describe el resultado, no solo la acción — no solo "añade validación al formulario", sino qué debe pasar si el email está vacío o mal escrito.
  • Da una pista de por qué, cuando la haya — "el título no debe superar 60 caracteres, es para SEO" evita que el asistente elija un límite al azar.
panel de Claude Code
Vago:
"Mejora el formulario de contacto"

Concreto:
"En contacto/index.html, añade validación al campo email:
si está vacío o no tiene forma de email, muestra un mensaje
de error en rojo debajo del campo y no dejes enviar el formulario."

Cuando la tarea es grande, no hace falta metértela entera de golpe: puedes pedirla por pasos, revisando cada uno antes de seguir. Es más lento al principio, pero mucho más fácil de corregir si algo se tuerce, porque el error queda acotado a un paso concreto en vez de mezclado con todo lo demás.

panel de Claude Code
Paso 1: "Añade el campo de teléfono al formulario, sin validación todavía"
   → revisas, aceptas

Paso 2: "Ahora añade validación: solo números, mínimo 9 dígitos"
   → revisas, aceptas

Si no estás seguro de si el asistente ha entendido bien lo que quieres, pídele que te lo explique antes de tocar nada — es una instrucción tan válida como cualquier otra, y sirve para detectar un malentendido antes de que se convierta en código.

panel de Claude Code
Antes de cambiar nada, explícame en dos frases
qué vas a hacer y qué archivos vas a tocar.
💡 Pruébalo tú mismo: coge cualquier archivo que ya tengas y pídele primero un cambio vago ("mejora esto"), fíjate en qué decide por su cuenta. Deshaz el cambio y pide lo mismo pero de forma concreta, nombrando el archivo y el resultado exacto que quieres. Compara los dos resultados — se nota.