Vibe coding con Claude Code

01

¿Qué es el vibe coding?

Idea clave: describes el objetivo en lenguaje natural y la IA construye; tú aportas la idea y el criterio. Iterar en pasos pequeños gana a pedirlo todo de golpe.

No hace falta saber programar para empezar, pero sí revisar el resultado. El trabajo se organiza en un ciclo de cuatro pasos que se repite una y otra vez. Haz clic en cada paso:

→ → → ↺

02

Claude Code

Idea clave: es el asistente de Anthropic que trabaja dentro de VS Code, directamente sobre tu proyecto: lo entiende, lo edita, lo ejecuta y corrige errores.

A diferencia de un chat genérico, Claude Code actúa sobre tu carpeta de trabajo. También existe para terminal, escritorio, web y JetBrains — mismo motor, mismos comandos, mismo CLAUDE.md.

🗂️

Entiende tu proyecto

Lee la estructura de carpetas y archivos para situarse antes de tocar nada.

✏️

Crea y edita archivos

Propone los cambios y te los enseña en verde/rojo antes de aplicarlos.

▶️

Ejecuta comandos

Instala dependencias, lanza la app y pasa los tests por ti.

🩹

Lee errores y los corrige

Interpreta la salida de la consola y propone el arreglo en el mismo ciclo.

03

De Copilot a Claude Code

Idea clave: los conceptos que ya conoces de Copilot existen aquí con otro nombre; lo que cambia es dónde se configuran: CLAUDE.md en la raíz, y el resto en la carpeta .claude/.

Puente con la sesión anterior. Haz clic en cada fila para ver el detalle:

Instructions & Rules→CLAUDE.md

Las normas del proyecto (estilo, librerías, qué no tocar) viven en un único archivo CLAUDE.md en la raíz. Claude lo lee al empezar cada conversación: es la «memoria» del proyecto.

Prompt Files→comandos ( / )

Tus prompts reutilizables se convierten en comandos personalizados que invocas con /nombre. Se guardan en .claude/commands/.

Custom Agents→subagentes

Asistentes especializados (revisor, tester…) que Claude puede lanzar para tareas concretas. Se definen en .claude/agents/.

Skills y MCP→Skills y MCP

Mismo nombre y misma idea: habilidades empaquetadas y conectores a herramientas externas. Compatibles entre ambos mundos.

/init→/init

Idéntico: analiza el proyecto y genera el archivo de contexto inicial. Es siempre el primer comando en un proyecto nuevo.

04

Instalación

Idea clave: extensión «Claude Code» de Anthropic en VS Code (≥ 1.98) + cuenta Pro, Max, Team o Enterprise. Abres tu carpeta, pulsas el icono ✱ e inicias sesión.

Marca cada paso a medida que lo completes:

1

Abrir Extensiones: Ctrl+Shift+X (Mac: Cmd+Shift+X)

2

Buscar «Claude Code» de Anthropic → Instalar

3

Archivo → Abrir carpeta… (tu proyecto)

4

Pulsar el icono ✱ (arriba a la derecha) o «✱ Claude Code» en la barra inferior

5

Iniciar sesión con tu cuenta de Claude

0 de 5 pasos completados

💡 Si no aparece el icono ✱, es porque no hay ningún archivo abierto: usa el botón de la barra de estado o busca «Claude Code» en la paleta de comandos (Ctrl+Shift+P). Requisito: VS Code 1.98 o superior y cuenta Pro, Max, Team o Enterprise.

05

La interfaz

Idea clave: icono ✱ para abrir · el editor muestra los cambios en verde (añadido) y rojo (quitado) · el panel lateral lleva la conversación · la caja de entrada, tu petición y el modo.

Pasa el ratón (o pulsa los botones) para localizar cada zona:

mi-proyecto — VS Code✱

// app.js
- const precio = 10;
+ const precio = calcularPrecio(producto);
+ mostrarTotal(precio);
console.log(precio);

Tú: añade el cálculo del precio

Claude: He editado app.js: nueva función calcularPrecio()…

Escribe tu petición… [modo: Plan ▾]

06

Comandos ( / )

Idea clave: /init es lo primero en cualquier proyecto; /clear entre tareas distintas mantiene a Claude centrado. Escribe / en la caja y aparece el menú completo.

Selecciona un comando para ver qué hace:

07

Atajos de teclado

Idea clave: el más útil es Alt+K (Mac: Option+K): seleccionas unas líneas y Claude recibe exactamente ese trozo, p. ej. @app.js#12-20.

	Salta del editor a Claude y viceversa
	⭐ Mete el archivo y las líneas seleccionadas como contexto
	Da un archivo o carpeta como contexto
	Nueva línea sin enviar
	Nueva conversación
	Conversación en pestaña nueva

08

Modos de trabajo

Idea clave: empieza en Plan (piensa y espera tu aprobación) y pasa a Auto-aceptar para construir rápido. Normal pide permiso en cada paso: el más prudente para aprender.

Se cambian con un clic en el indicador de modo, bajo la caja de entrada. Elige uno y observa cómo cambia el comportamiento ante la misma petición:

09

Flujo recomendado

Idea clave: Planifica → Revisa → Construye → Prueba → Guarda. Los pasos 3–4 se repiten muchas veces; el commit frecuente es la red de seguridad.

Haz clic en cada paso para ampliarlo:

Planifica — modo Plan, describe la idea

Cuenta qué quieres conseguir y para quién. Claude propone un plan sin tocar ningún archivo todavía.

Revisa — corrige el plan antes de que escriba

Es el momento barato de cambiar de rumbo: quita pasos, añade requisitos, ajusta el alcance. Después, cada corrección cuesta más.

Construye — Auto-aceptar, paso a paso

Con el plan aprobado, cambia a Auto-aceptar para avanzar rápido. Una funcionalidad cada vez, no todo de golpe.

Prueba — si falla, pega el error tal cual

Abre la app, prueba lo que se acaba de construir. El mensaje de error completo, copiado literal, es la mejor pista que puedes darle a Claude.

Guarda — pide un commit cuando funcione

«Haz commit de esto» cuando algo funcione. Si lo siguiente se rompe, siempre puedes volver atrás.

🔁 Los pasos 3 (Construye) y 4 (Prueba) se repiten muchas veces por cada funcionalidad.

10

Prompts que funcionan

Idea clave: la fórmula es qué + para qué + cómo + el error exacto. Cuanto más contexto das, menos idas y vueltas.

Compara la versión vaga con la versión eficaz de cada petición:

haz una web

Claude tendrá que adivinar el tipo de web, el contenido y el estilo. Resultado: muchas vueltas hasta acercarse a lo que querías.

no funciona

¿Qué no funciona? ¿Dónde? ¿Qué esperabas? Sin esa información, Claude solo puede probar a ciegas.

La fórmula:

qué+ para qué+ cómo+ el error exacto

11

Reglas de oro

Idea clave: pasos pequeños, git siempre, CLAUDE.md con las normas — y tres reglas de seguridad: revisar antes de aceptar, nada de claves en el chat, y revisión experta antes de publicar.

Tu lista de verificación de buenas prácticas — márcalas cuando las tengas interiorizadas:

🪜 Pasos pequeñosUna funcionalidad cada vez: iterar rápido gana a pedirlo todo de golpe.

🌳 Git siempreCommit cuando algo funcione: es tu botón de deshacer.

📋 CLAUDE.md con las normas del proyectoLa memoria del proyecto: estilo, librerías, qué no tocar.

👀 Revisa los cambios antes de aceptar seguridadEl verde y el rojo del editor están ahí para que los leas.

🔑 Nada de contraseñas ni claves en el chat seguridadNi en el prompt, ni en los archivos que compartas.

🧑‍💻 Antes de publicar, revisión de alguien con experiencia seguridadEl código generado también necesita ojos expertos antes de producción.

0 de 6 reglas interiorizadas

12

Ponte a prueba

Idea clave: comprueba que dominas los conceptos de la sesión con 6 preguntas rápidas (el quiz vive en la vista completa).

Seis preguntas, una respuesta correcta cada una. La puntuación aparece al final.

13

Síntesis de la sesión

1

Vibe coding — describes, Claude construye, tú pruebas y ajustas. Pasos pequeños, siempre.

2

Claude Code — trabaja dentro de VS Code sobre tu proyecto real: lo entiende, edita, ejecuta y corrige.

3

Desde Copilot — mismos conceptos, otros nombres: Rules → CLAUDE.md · Prompt Files → /comandos · Agents → subagentes.

4

Modos — Plan para pensar antes de construir · Auto-aceptar para construir rápido · Normal para aprender con prudencia.

5

Flujo — Planifica → Revisa → Construye → Prueba → Guarda (commit = botón de deshacer).

6

Prompts — qué + para qué + cómo + el error exacto, pegado literal.

7

Seguridad — revisa antes de aceptar, nada de claves en el chat, y revisión experta antes de publicar.

¡Copiado!