ESEN
Hablemos

Primeros pasos con Claude Code

Claude Code convierte una descripción en software real: puede leer y crear archivos, ejecutar el proyecto y ayudarte a publicarlo. Esta guía te lleva desde cero hasta una web real en internet. No necesitas experiencia programando.

1Dónde funciona Claude Code

Claude Code funciona en cuatro sitios: una terminal, la aplicación de escritorio para Mac y Windows, el navegador en claude.ai/code y dentro de un editor como VS Code. Es el mismo Claude en todos. Cambia cuánto ves de lo que hace.

Esta guía usa la terminal: una ventana de texto desde la que hablas directamente con tu ordenador. Es la opción menos vistosa y la que conviene aprender primero, porque no oculta nada. Desde ahí Claude puede ver tus archivos, crear otros nuevos, iniciar una vista previa local y preparar el trabajo para publicarlo.

¿Por qué no usar solo la web de Claude? La web es excelente para escribir y pensar. Claude Code es otra cosa: toca tus archivos. Construye el proyecto en lugar de describirlo.
¿Prefieres botones a comandos? Instala la aplicación de escritorio y salta al paso 4. Todo lo demás funciona igual. Vuelve a la terminal cuando quieras ver lo que ocurre de verdad.

2Elige una terminal

Cuatro opciones que funcionan bien:

  • iTerm2 – la que uso. Lleva años funcionando y aguanta sesiones largas con muchas pestañas.
  • Ghostty – más nueva y muy rápida. La opción para instalar y no configurar nada.
  • Warp – con IA y autocompletado integrados. Útil si quieres ayuda con la terminal, no solo con el código.
  • Terminal – ya viene con macOS en Aplicaciones → Utilidades.
¿Usas Windows? Claude Code ya funciona de forma nativa: abre PowerShell y continúa desde el paso 3. Instala también Git para Windows, que le da a Claude una shell decente. WSL sigue siendo útil si trabajas con herramientas Linux, pero ya no es obligatorio.

3Instala Claude Code

Abre la terminal y ejecuta:

# Instalar Claude Code
curl -fsSL https://claude.ai/install.sh | bash

# En Windows, desde PowerShell
irm https://claude.ai/install.ps1 | iex

El instalador nativo se ocupa del resto y se actualiza automáticamente. Si usas Homebrew, la alternativa es brew install --cask claude-code.

# Crear la carpeta del proyecto
mkdir mi-primera-web && cd mi-primera-web

# Iniciar Claude Code
claude

La primera vez se abrirá el navegador para iniciar sesión. Aquí es donde se atasca mucha gente: el plan gratuito de Claude no incluye Claude Code. Necesitas Pro como mínimo. Con Pro se construyen cosas reales; Max es para jornadas largas en las que llegas al límite y quieres seguir.

Comandos útiles:
  • /help – muestra los comandos disponibles
  • /clear – inicia una conversación limpia
  • /model – cambia de modelo. Opus es el más capaz, Sonnet es más rápido
  • /init – crea un CLAUDE.md inicial
  • Esc – interrumpe una acción que va en mala dirección
  • Esc dos veces, con el campo vacío – abre el menú para volver atrás: recupera tus archivos y la conversación en un punto anterior
  • Mayús+Tab – cambia entre pedir permiso, editar sin preguntar y planificar primero

4Construye tu primera web

Describe lo que quieres con lenguaje normal:

Tú: Crea una web sencilla de una página para mi cafetería.
     Se llama Grounds y está en Málaga.
     Incluye carta y datos de contacto.

Después, continúa de forma natural:

Haz la carta más visible y añade un espacio para la imagen principal
Usa una tipografía más cálida
Añade un botón de WhatsApp en una esquina

Para verla en el navegador, pídeselo: inicia una vista previa local y dame la dirección. Claude levanta el servidor y te pasa el enlace. Si prefieres hacerlo tú, pnpm dlx serve ..

5Haz que planifique antes de construir

La costumbre más útil de todas: antes de un cambio grande, pulsa Mayús+Tab hasta que el indicador diga plan. Claude lee el proyecto y escribe lo que piensa hacer sin tocar ningún archivo. Lo lees, corriges lo que no encaja y solo entonces le dejas construir.

# Mayús+Tab hasta ver el modo plan, y entonces
Tú: Añade reservas online a la sección de contacto

Claude: este es el plan. 1. Formulario con nombre, fecha
y personas. 2. Enviar las reservas a tu correo. 3. Mensaje
de confirmación. ¿Lo hago?

Ahí es donde lo pillas eligiendo una pasarela de pago que no quieres, o reescribiendo tres archivos cuando bastaba con uno. Corregir un plan cuesta una frase. Corregir código terminado cuesta una tarde.

Regla sencilla. Si es pequeño y obvio, pídelo sin más. Si toca más de un archivo, o si te costaría revisarlo después, planifica primero.

6Explica el proyecto con CLAUDE.md

CLAUDE.md es una nota que Claude lee al empezar cada sesión. Incluye la tecnología, el tono, qué debe evitar y cómo comprobar el trabajo. Así no repites las mismas instrucciones.

# Proyecto: Grounds Coffee

## Tecnología
- HTML y CSS, sin proceso de compilación
- Publicado en Vercel

## Voz de marca
- Frases breves y cálidas, sin jerga
- Español primero, inglés después

## Comprobación
- Abrir la web local antes de afirmar que está terminada
Empieza rápido: ejecuta /init y deja que Claude cree un primer borrador. Después edítalo como un documento vivo. Si empiezas un mensaje con #, Claude añade esa línea al archivo por ti.
Dos sitios más donde mira. Un CLAUDE.md en ~/.claude/CLAUDE.md se aplica a todos tus proyectos, así que tus reglas de escritura viven ahí y no en diez copias. Y una línea como @AGENTS.md importa otro archivo, que es como se comparten reglas entre proyectos.

7Guarda el código en GitHub

GitHub guarda cada versión del proyecto y lo conecta con plataformas de publicación. Crea una cuenta en github.com, instala su herramienta e inicia sesión:

# Instalar e iniciar sesión
brew install gh
gh auth login

# Guardar y publicar el repositorio
git init && git add . && git commit -m "primera versión"
gh repo create mi-primera-web --public --source . --push

8Publícala con Vercel

Crea una cuenta en vercel.comcon GitHub. El resto hazlo desde la terminal, donde ves lo que ha pasado:

# Instalar la herramienta de Vercel e iniciar sesión
pnpm add -g vercel && vercel login

# Desde la carpeta del proyecto
vercel --prod

# ¿Ha funcionado de verdad?
vercel ls
Hay dos formas de publicar y no son iguales. Si conectas el repositorio en el panel de Vercel, cada push publica solo. Si únicamente enlazaste desde la terminal, hacer push no cambia nada y publicas con vercel --prod. Ten claro cuál montaste: cuando la web sigue mostrando la versión de ayer, casi siempre es esto.
Editar en local→Publicar→Comprobar que está Ready→Web publicada

Cloudflare Pages es una buena alternativa gratuita con el mismo modelo.

9Añade tu propio dominio

Compra un dominio en Porkbun. En Vercel, abre Settings → Domains, añádelo y copia exactamente los registros DNS indicados.

# Ejemplo de registros DNS
Registro A:     @ → 76.76.21.21
Registro CNAME: www → cname.vercel-dns.com
Copia los registros que te muestre Vercel, no los de arriba. Esos dos son el caso habitual, pero los proyectos nuevos reciben un CNAME propio que parece una cadena aleatoria. Pega lo que indique tu proyecto.
No es instantáneo. Los cambios DNS pueden tardar desde unos minutos hasta 48 horas. Normalmente se completan en menos de una hora. Para salir de dudas: curl -sI https://tu-dominio.com, y busca un 200.

10Protege tus secretos

Las claves de API funcionan como contraseñas. Nunca las pongas directamente en el código. Guárdalas en .env.local y excluye ese archivo con .gitignore.

# .env.local
ANTHROPIC_API_KEY=tu-clave
STRIPE_SECRET_KEY=tu-clave

# .gitignore
.env.local
node_modules/
¿Publicaste una clave por accidente? Revócala y crea otra inmediatamente. Borrarla del último commit no basta porque puede seguir en el historial.

11El flujo diario

# Abrir el proyecto e iniciar Claude
cd mi-primera-web
claude

Tú: Añade un formulario de reserva

# Guardar y publicar el cambio
git add . && git commit -m "añadir reservas" && git push

# Y publicar, salvo que GitHub lo haga por ti
vercel --prod
Atajo: puedes pedir a Claude que haga el commit y el push. Si se desvía, pulsa Esc y explica de nuevo lo que querías. Si te ha dejado los archivos hechos un lío, pulsa Esc dos veces con el campo vacío y elige un punto al que volver. Usa /clear si la sesión entera está atascada.
Míralo antes de darlo por hecho. Publicado no es lo mismo que funcionando. Abre la URL real, y ábrela en el móvil: el texto que se sale por el lado de la pantalla es lo que más se publica sin querer. Treinta segundos mirando valen más que enterarte por un cliente.

12Deja de confirmar cada acción

Claude pide permiso antes de escribir archivos o ejecutar comandos. Cada pulsación de Mayús+Tab pasa al siguiente modo, y el indicador sobre el campo de texto te dice dónde estás:

Manual→Aceptar ediciones→Plan→Manual otra vez

Aceptar ediciones deja que Claude escriba archivos sin preguntar, y es donde vas a pasar la mayor parte del tiempo. Plan es el paso 5. Manual es por donde se empieza.

También puedes permitir acciones concretas con /permissions o escribirlas en .claude/settings.json. Evita --dangerously-skip-permissions salvo en proyectos desechables: elimina todas las barreras.

+Qué aprender después

  • Skills – instrucciones reutilizables para tareas como revisión de diseño o mapas de código.
  • Servidores MCP – conexiones directas con bases de datos, calendarios, Stripe o GitHub.
  • Subagentes – ayudantes paralelos para investigación, revisiones y cambios por lotes.
  • Tus propios comandos – un texto que repites siempre, guardado en .claude/commands/. Es lo más barato por lo que empezar.
  • Hooks – ejecutar algo automáticamente en un momento fijo, como formatear cada archivo que Claude guarda. Para reglas que quieres cumplidas, no recordadas.

Apréndelos cuando resuelvan un problema real. Primero construye algo sencillo y publícalo.

✓Ya está.

Ahora tienes:

  • Una terminal donde funciona Claude Code
  • Un proyecto construido con instrucciones normales
  • El modo plan, para aprobar el trabajo antes de que ocurra
  • Un CLAUDE.md con las reglas del trabajo
  • GitHub guardando cada versión
  • Vercel sirviendo la web publicada
  • Un dominio propio conectado
  • Las claves fuera del código

Es la misma base que usan los profesionales. Sigue pidiendo cambios concretos y, cuando algo falle, pega el error completo en Claude y pídele que lo diagnostique.