Tutorial de Claude Code: aprende a usarlo en un fin de semana

Para usar Claude Code, lo inicias en una carpeta de proyecto, describes con tus palabras el resultado que quieres, dejas que haga un plan, apruebas o revisas lo que cambia y compruebas tú el resultado antes de seguir. Este tutorial muestra ese ciclo en un proyecto pequeño y real que puedes terminar en un fin de semana: una web de una sola página para un negocio local. Verás exactamente qué escribir, cómo funcionan los permisos y el modo plan, y cómo deshacer un paso que salió mal.

El negocio del ejemplo es inventado: Muddy Paws Grooming, una peluquería canina. Cámbialo por tu propio negocio, o por el de un amigo, y terminarás el fin de semana con algo realmente útil.

Lo que necesitas antes de empezar

• Claude Code instalado y con la sesión iniciada. Si todavía no lo has hecho, sigue primero la guía de instalación para Mac y Windows.
• Un plan de pago de Claude, porque el plan gratis no incluye Claude Code.
• Los datos del negocio: nombre, qué vende, tres servicios con precios, horario, zona, teléfono, un enlace de reservas si lo hay, y dos o tres reseñas reales de clientes.
• Un par de sesiones de trabajo concentrado: una el sábado para construir y otra el domingo para pulir.

Abajo uso la versión de terminal. La pestaña Code de la app de escritorio tiene los mismos controles, con el selector de modo de permisos junto al botón de enviar.

Sábado por la mañana: prepara el proyecto

Paso 1: crea una carpeta e inicia una sesión

Cada proyecto tiene su propia carpeta. Claude Code puede leer todo lo que hay dentro de la carpeta donde lo inicias, así que una carpeta limpia lo mantiene concentrado y deja tus otros archivos fuera de su alcance.

En Mac:

$ mkdir -p ~/claude-projects/muddy-paws
$ cd ~/claude-projects/muddy-paws
$ claude
$ 

En Windows, en PowerShell:

PS> mkdir -Force "$HOME\claude-projects\muddy-paws"
PS> cd "$HOME\claude-projects\muddy-paws"
PS> claude
PS> 

En la app de escritorio, abre la pestaña Code, elige Local, haz clic en Select folder (elegir carpeta) y crea ahí la misma carpeta.

Paso 2: elige cuánto control quieres

Claude Code tiene modos de permisos: ajustes que deciden qué acciones puede hacer sin preguntarte. Pasas de uno a otro con Shift+Tab, la línea que hay bajo el campo de texto muestra el modo actual, y las versiones actuales inician las sesiones nuevas de terminal en modo auto.

Cuando Claude Code te pide permiso, Yes aprueba solo esa acción, Yes, and don't ask again guarda una regla para que ese comando se ejecute sin preguntar en este proyecto a partir de entonces, y No lo rechaza (Esc hace lo mismo). Con Yes o No resaltado, presiona Tab para añadir una nota como "No: usa mejor las fotos de la carpeta images", y Claude se adapta.

Paso 3: escribe el encargo en modo plan

Presiona Shift+Tab hasta que la línea de estado diga ⏸ plan mode on, o escribe /plan al principio de tu mensaje. Después pega un encargo como este, con tus datos:

Quiero una web de una sola página para Muddy Paws Grooming, una peluquería canina en [CIUDAD].

Público: dueños de perros con poco tiempo que viven cerca y casi siempre reservan desde el teléfono.
Objetivo: que toquen "Reservar cita" ([ENLACE DE RESERVAS]) o llamen al [TELÉFONO].

Secciones, en este orden:
1. Un titular que diga qué hacemos y dónde, con el botón de reserva
2. Tres servicios con precios: [SERVICIO Y PRECIO] x3
3. Horario y dirección
4. Dos reseñas de clientes: [PEGA RESEÑAS REALES]
5. Contacto: teléfono, correo y un enlace al mapa

Estilo: cercano y limpio, mucho espacio en blanco, texto grande, fácil de usar en el teléfono.
Restricciones: un archivo index.html y un archivo styles.css. Sin frameworks. Ninguna foto que yo no haya aprobado.
Terminado significa: puedo abrir index.html en mi navegador, todo lo anterior está ahí y se lee bien en el teléfono.

Antes de escribir nada, hazme hasta cinco preguntas sobre lo que falte y luego propón un plan.

Claude lee la carpeta vacía, te hace sus preguntas (a veces con opciones para elegir) y luego presenta un plan: qué archivos va a crear, qué va en cada sección y qué necesita todavía de ti. Para cambiar el plan directamente, presiona Ctrl+G y se abrirá en tu editor de texto.

Sábado por la tarde: construye, mira, reacciona

Paso 4: aprueba la construcción paso a paso

Ahora Claude crea index.html y luego styles.css, y antes de cada archivo te muestra lo que va a escribir y espera tu respuesta. Aprueba cuando coincida con el plan, y mira con más atención cualquier comando que borre archivos o que salga de la carpeta.

Cuando termine, abre la página con doble clic en index.html desde Finder o el Explorador de archivos, o en Mac escribe ! open index.html en Claude Code. El ! al principio ejecuta un comando directamente, sin pasar por Claude.

Paso 5: da comentarios como un cliente

Aquí está la mayor parte del valor. Reacciona como lo haría un cliente exigente: corto, concreto y una cosa cada vez.

Si escribes @ seguido del nombre de un archivo, como @brand.txt, le señalas a Claude ese archivo exacto para que lo lea antes de actuar. Para mostrar un problema en lugar de describirlo, haz una captura de pantalla y pégala en Claude Code con Ctrl+V en la mayoría de las terminales, Cmd+V en iTerm2 o Alt+V en Windows.

No tienes que esperar en silencio mientras trabaja. Escribe una corrección y presiona Enter, y Claude la leerá en cuanto termine el paso en curso, o presiona Esc para detenerlo al instante.

Paso 6: deshaz un cambio que no te gusta

Tarde o temprano, algún cambio empeora las cosas. Tienes tres formas de volver atrás:

1. Pídelo. "Deshaz el último cambio" funciona en los casos sencillos.
2. Rebobina. Presiona Esc dos veces con el campo de texto vacío, o escribe /rewind, elige el mensaje de antes de que todo se torciera y luego elige Restore code and conversation (restaura el código y la conversación), Restore code (mantiene el chat y revierte los archivos) o Restore conversation (mantiene los archivos y rebobina el chat).
3. Vuelve a una versión guardada, si usas git, una herramienta gratuita que guarda instantáneas de un proyecto, cada una con su nombre.

Si quieres una red de seguridad de verdad, pídela. La mayoría de los Mac ya traen git; en Windows, instala antes Git for Windows.

Convierte esta carpeta en un repositorio de git y guarda la versión actual con una descripción clara de lo que funciona.

Domingo: déjalo sólido

Paso 7: deja por escrito lo que decidiste

A estas alturas ya tomaste decisiones sobre colores, tono y "revisa siempre el ancho de teléfono". Guárdalas para no tener que repetirlas nunca:

Crea un archivo CLAUDE.md para este proyecto con los datos del negocio, las reglas de estilo que acordamos y una regla para revisar la página con el ancho de un teléfono antes de decir que terminaste.

CLAUDE.md es un archivo de texto plano que Claude Code lee al inicio de cada sesión en esta carpeta, y los cambios que le hagas a mitad de sesión se aplican después de /clear o en la siguiente sesión. La guía del archivo CLAUDE.md muestra qué poner en él, con plantillas.

Paso 8: pide una revisión con pruebas

Revisa la página como lo haría un cliente exigente. Comprueba que estén todas las secciones de mi encargo, que funcionen todos los enlaces y el teléfono, que el texto se lea bien con el ancho de un teléfono, que las imágenes tengan texto alternativo y que ningún nombre, precio u horario sea distinto de mi encargo. Corrige lo que puedas y luego haz una lista de lo que cambiaste y de lo que todavía necesitas de mí.

Después revísala tú: haz clic en cada enlace, estrecha la ventana del navegador hasta el ancho de un teléfono y lee en voz alta cada precio comparándolo con tu lista de precios. Si configuraste git en el paso 6, /diff muestra lo que cambió desde la última versión guardada.

Paso 9: decide dónde se publica

Publicar es un trabajo aparte: un dominio, hosting gratuito y algunos ajustes para que los buscadores encuentren la página. La guía para crear una página web con IA explica cómo publicar con Claude Code y Vercel, y el paso a paso de vibe coding añade una lista de comprobación para lanzar la landing page de un negocio.

10 consejos para usar bien Claude Code

1. Un resultado por mensaje. "Haz que el botón de reserva ocupe todo el ancho en el teléfono" funciona mejor que un párrafo con cinco deseos.
2. Señala, no describas. @styles.css hace que Claude lea el archivo correcto en lugar de buscarlo.
3. Deja que te entreviste. Para cualquier cosa más grande que un retoque, termina con "hazme preguntas hasta que tengas lo que necesitas".
4. Planifica cuando no puedas decirlo en una frase. Sáltate el plan en los arreglos pequeños, donde solo añade pasos.
5. Detenlo pronto. Presiona Esc en cuanto vaya en la dirección equivocada, porque esperar solo hace más grande la limpieza.
6. Dos fallos, empieza de cero. Si ya corregiste lo mismo dos veces, ejecuta /clear y escribe un primer prompt mejor con lo que aprendiste.
7. Una tarea por sesión. Usa /clear entre trabajos que no tienen relación, y ejecuta antes /rename si quieres encontrar la conversación anterior más tarde con /resume.
8. Pide pruebas, no que te tranquilice. "Haz una lista de los archivos que cambiaste" o "muéstrame de dónde sale ese número" funciona mejor que "¿ya está?".
9. Deja las preguntas sueltas a un lado. /btw responde una pregunta rápida sin añadirla a la conversación principal.
10. Deja que la herramienta te enseñe. /powerup ofrece lecciones interactivas cortas, la referencia del modo interactivo enumera todos los atajos, y nuestra guía rápida de Claude Code reúne los más útiles en una sola página.

Qué hacer ahora

Elige un segundo proyecto pequeño para el próximo fin de semana, idealmente algo por lo que de otro modo pagarías o que sigues posponiendo, y repite el mismo ciclo: encargo en modo plan, construcción en Manual, revisión con pruebas y lo aprendido guardado en CLAUDE.md. Nuestra lista de ideas de proyectos con Claude Code tiene opciones que van de una hora a un fin de semana. Si prefieres que te acompañen en todo el recorrido, el curso de Claude Code va desde la instalación hasta una landing page publicada, un video con IA y un agente de facturas.