Aprende a construir
con Claude Code
En esta sesión de 3-4 horas aprenderás a utilizar Claude Code para crear y modificar sitios web, y para automatizar tareas repetitivas mediante instrucciones en lenguaje natural.
¿Qué es Claude Code
y por qué lo necesitas?
Antes de tocar el teclado, entendemos qué tenemos entre manos. Claude Code no es un chatbot — es un agente de IA que trabaja directamente en tu código y archivos.
Bienvenido a esta sesión de inmersión. Claude Code es una herramienta de Anthropic que permite a cualquier persona, independientemente de su experiencia técnica, crear, modificar y automatizar proyectos de software mediante instrucciones en lenguaje natural desde la terminal.
Abre Claude Code en una ventana lateral mientras sigues esta guía. Cada vez que veas un bloque de prompt, cópialo directamente.
¿Qué es Claude Code exactamente?
Claude Code es una CLI (interfaz de línea de comandos) creada por Anthropic que conecta el modelo Claude directamente con tu entorno de trabajo. Puede leer archivos, escribir código, ejecutar comandos y trabajar en proyectos completos.
| Herramienta | ¿Qué hace? | Límite |
|---|---|---|
| ChatGPT / Claude.ai | Conversa, genera texto | No accede a tus archivos |
| GitHub Copilot | Autocompleta código | Solo suggestions, no ejecuta |
| Claude Code ✓ | Lee, edita, ejecuta, refactoriza | Trabaja en tu proyecto completo |
¿Cómo funciona por dentro?
Claude Code tiene acceso a herramientas reales en tu máquina. No adivina — actúa.
Cuando le das una instrucción a Claude Code, este puede:
Escanea archivos, entiende la estructura y el contexto antes de actuar.
Diseña una estrategia antes de escribir una sola línea de código.
Crea, modifica o elimina archivos. Ejecuta comandos en la terminal.
Revisa que todo funcione. Si hay errores, los diagnostica y corrige.
Claude Code requiere una cuenta activa en Anthropic. Está disponible mediante una suscripción a Claude.ai Pro (~$20/mes) o Claude.ai Max (~$100/mes), ambas con cuotas de uso incluidas. También puede conectarse directamente a la API de Anthropic con facturación por consumo (pay-as-you-go) desde console.anthropic.com.
¿Por qué es relevante para ti?
Claude Code reduce la barrera de entrada al desarrollo de software, permitiendo ejecutar tareas técnicas complejas mediante lenguaje natural.
Sin una herramienta como Claude Code, crear o modificar un sitio web requería conocimientos en:
- Saber HTML, CSS y JavaScript
- Entender frameworks como React o Vue
- Contratar a un desarrollador (o esperar semanas)
- Describir lo que querías sin poder mostrarlo directamente
Claude Code permite abordar estas tareas mediante instrucciones en lenguaje natural, sin necesidad de dominar ninguno de esos lenguajes o herramientas.
¿Necesito saber programar para usar Claude Code?
No necesitas ser programador. Pero mientras más contexto le das, mejores resultados obtienes. Aprender conceptos básicos (qué es un archivo, qué es una carpeta, qué es un servidor) te va a ayudar a comunicarte mejor con Claude Code.
Esta inmersión está diseñada para que salgas con resultados reales aunque nunca hayas tocado código antes.
¿Y si el código que genera está mal?
Claude Code comete errores — igual que un desarrollador junior. La diferencia es que puedes decirle exactamente qué está mal y lo corrige al instante. En el Bloque 2 aprenderás a iterar y debuggear de forma efectiva.
Piensa en una tarea repetitiva que haces cada semana en tu trabajo o negocio. Escríbela en papel. Al final del Bloque 2, habrás automatizado algo muy similar a esa tarea.
Instalación paso a paso
Vamos a tenerlo funcionando en menos de 5 minutos. Sigue los pasos exactamente.
Necesitas Node.js instalado en tu computadora. Si no lo tienes, descárgalo desde nodejs.org (versión LTS).
Paso 1: Instalar Claude Code
# Instalar Claude Code globalmente
npm install -g @anthropic-ai/claude-code
Paso 2: Verificar la instalación
# Debe mostrar la versión instalada
claude --version
Paso 3: Iniciar Claude Code
# Navegar a tu carpeta de trabajo y ejecutar cd mi-proyecto claude
Al ejecutar claude por primera vez, te pedirá autenticarte
con tu cuenta de Anthropic/Claude. Sigue las instrucciones en pantalla.
Conociendo la interfaz
Claude Code es simple. Una línea de entrada, un agente de IA. Veamos cómo orientarse.
La pantalla de inicio
Cuando ejecutas claude, verás algo así:
╭─────────────────────────────────────╮ │ Claude Code ✨ │ ╰─────────────────────────────────────╯ ? What would you like to do? > _
Comandos de teclado clave
| Atajo | Acción |
|---|---|
Enter | Enviar mensaje |
Shift + Enter | Nueva línea sin enviar |
↑ / ↓ | Navegar historial |
Ctrl + C | Cancelar operación |
/help | Ver comandos disponibles |
/clear | Limpiar contexto de conversación |
Claude Code recuerda toda la conversación actual. Si la conversación
se vuelve muy larga o empieza a "confundirse", usa /clear
para empezar fresco.
Tu primer prompt
Probamos Claude Code con instrucciones reales. Copia los prompts y observa qué hace.
Prompt 1: Exploración del entorno
Dile a Claude Code que analice dónde estás parado:
Hola. Analiza el directorio actual: qué archivos existen, qué tipo de proyecto es, y dame un resumen breve de la estructura. Después dime qué podrías hacer para mejorar o continuar este proyecto.
Prompt 2: Primera creación
Vamos a crear algo desde cero para ver Claude Code en acción:
Crea un archivo llamado "hola-mundo.html" con una página web simple. Debe tener un título grande que diga "Mi primera página con IA", un párrafo de bienvenida, y un botón que muestre una alerta al hacer click. Usa colores oscuros y texto blanco. Sin librerías externas.
Abre el archivo hola-mundo.html en tu navegador.
Luego pídele a Claude Code que cambie el color del botón y que
agregue tu nombre en el título. Experimenta modificando el prompt.
Casos de uso reales
Antes del proyecto del día, veamos el panorama completo de lo que puedes hacer.
| Área | Ejemplos concretos | Dificultad |
|---|---|---|
| Sitios web | Landing pages, portfolios, reformular sitio existente | Fácil |
| Automatización | Renombrar archivos, procesar Excel, enviar reportes | Fácil |
| Scripts de datos | Limpiar CSVs, generar gráficos, conectar APIs | Medio |
| Apps web | Dashboard, formularios, herramientas internas | Medio |
| Agentes IA | Bots, workflows, integración con APIs externas | Avanzado |
Los casos de uso más frecuentes —sitios web estáticos y scripts de automatización— son los más accesibles para usuarios sin experiencia en programación. Representan un punto de partida sólido antes de avanzar hacia proyectos de mayor complejidad.
✓ Antes de seguir al Bloque 2
Verifica que estás listo para la parte práctica.
Si tienes todos los checks, es hora de construir. El Bloque 2 es 100% práctica: vamos a crear un sitio web y automatizar una tarea real de principio a fin.
Vamos a construir
algo real hoy
Dos proyectos concretos. Primero creamos o remodelamos un sitio web. Luego automatizamos una tarea que te quita tiempo cada semana.
¿Qué vamos a hacer?
Hoy tienes dos proyectos. Puedes hacer ambos en el tiempo disponible o profundizar en el que más te interese:
Partimos de cero o tomamos un sitio existente y lo mejoramos con Claude Code. Landing page, portfolio, sitio de negocio, lo que necesites.
Identificamos una tarea que haces manualmente y creamos un script que la haga automáticamente. Renombrar archivos, procesar datos, generar reportes, etc.
Si no tienes un proyecto propio en mente, sigue la guía paso a paso de esta sección. Tenemos proyectos ejemplo listos para usar.
Crear o remodelar un sitio web
Paso a paso, desde cero hasta un sitio funcional. O tomamos uno que ya tengas y lo mejoramos.
Opción 1: Sitio desde cero
Si empezas sin nada, usa este prompt como punto de partida. Personaliza los campos entre corchetes:
Crea una landing page profesional para [mi negocio/servicio/proyecto]. El sitio debe tener: - Header con logo (texto por ahora) y navegación - Sección hero con título impactante y botón de acción - Sección de beneficios/características (3-4 puntos) - Sección de llamado a la acción final - Footer con información de contacto Estilo: moderno, oscuro, colores [elige: azul/verde/rojo/etc]. Todo en un solo archivo HTML con CSS incluido. Sin librerías externas. El texto que uses es de ejemplo — yo lo voy a editar después.
Opción 2: Remodelar sitio existente
Si tienes un sitio web ya hecho y quieres mejorarlo:
Tengo un sitio web en el archivo [nombre-del-archivo.html]. Analízalo y luego remodelalo completamente con estas mejoras: 1. Diseño más moderno y profesional 2. Mejor jerarquía visual (lo importante primero) 3. Colores más coherentes y atractivos 4. Texto más claro y directo al punto 5. Mejor experiencia en móvil Mantén el mismo contenido pero mejora absolutamente todo lo demás. Guarda el resultado como [nombre]-nuevo.html para no perder el original.
Iterando el resultado
Una vez que Claude Code genera el sitio, usa estos prompts para refinarlo:
"El botón principal está muy pequeño. Hazlo más grande y que tenga un efecto hover más llamativo."
"La sección de beneficios se ve muy apretada en móvil. Reorganízala para que quede bien en pantallas pequeñas."
"Agrega una animación suave de entrada para los elementos cuando se hace scroll. Sin librerías externas."
Automatizar una tarea repetitiva
Identificamos qué te quita tiempo y creamos un script que lo haga solo.
¿Qué podemos automatizar?
| Tarea | Ejemplo concreto | Tiempo que ahorra |
|---|---|---|
| Renombrar archivos | Agregar fecha a todos los PDFs de una carpeta | 30 min → 5 seg |
| Procesar Excel/CSV | Limpiar y ordenar una lista de clientes | 2 horas → 1 min |
| Generar reportes | Reporte HTML semanal de ventas desde CSV | 1 hora → automático |
| Organizar archivos | Mover fotos por año/mes automáticamente | Siempre manual → 0 |
| Notificaciones | Email automático cuando llega un archivo nuevo | Manual → automático |
Prompt base para automatizaciones
Quiero automatizar la siguiente tarea que hago manualmente: [Describe exactamente qué haces paso a paso, cuánto tarda, y cuál es el resultado final] Datos importantes: - Sistema operativo: [Windows / Mac / Linux] - Los archivos están en: [ruta de la carpeta] - El resultado debe guardarse en: [ruta o descripción] - Frecuencia: [diario / semanal / cuando yo lo ejecuto] Crea un script en Python que haga esta tarea automáticamente. El script debe ser fácil de ejecutar — solo doble click o un comando simple. Agrega comentarios en español explicando qué hace cada parte.
Ejemplo concreto: Organizar carpeta de descargas
Si no tienes una tarea específica en mente, usa este ejemplo real:
Crea un script Python que organice automáticamente mi carpeta de Descargas. Debe: 1. Mover imágenes (jpg, png, gif, webp) → subcarpeta "Imágenes" 2. Mover documentos (pdf, docx, xlsx) → subcarpeta "Documentos" 3. Mover videos (mp4, avi, mov) → subcarpeta "Videos" 4. Mover archivos comprimidos (zip, rar) → subcarpeta "Archivos" 5. Dejar el resto tal como está 6. Mostrar un resumen de cuántos archivos movió de cada tipo El script debe funcionar en Windows. Si una subcarpeta no existe, créala automáticamente. Antes de mover nada, mostrar cuántos archivos va a mover y pedir confirmación.
Ejecutar el script
# Ejecutar el script generado por Claude Code python organizar.py # Si no tienes Python instalado: # Dile a Claude Code: "Conviértelo a un .exe que funcione sin instalar nada"
Cuando algo no funciona
El debugging es parte del proceso. Aprende a comunicar errores efectivamente.
La fórmula para reportar errores
Tengo un error al ejecutar el script. Aquí está el mensaje de error: [Pega el error completo aquí] Lo que esperaba que pasara: [describe el resultado esperado] Lo que realmente pasó: [describe qué pasó] ¿Qué está mal y cómo lo arreglamos?
Errores comunes y cómo resolverlos
"El archivo no se encuentra" / FileNotFoundError
Claude Code generó el código asumiendo una ruta de archivo que no existe en tu máquina. Dile: "Hay un error de ruta. El archivo está en [ruta real]. Ajusta el script."
"ModuleNotFoundError" / "command not found"
Falta instalar una dependencia. Pídele a Claude Code: "Hay este error de módulo faltante. Dame el comando exacto para instalarlo y actualiza el script si es necesario."
El resultado no es lo que esperaba
Sé específico. En vez de "no funciona", describe exactamente qué ves vs. qué esperabas. Por ejemplo: "El sitio se ve bien en computadora pero en celular el texto se sale de la pantalla en la sección del hero".
Cuando algo no funciona, copia el mensaje de error completo y pégalo directamente en Claude Code. No lo parafrasees. El error exacto es más útil que tu descripción del error.
Buenas prácticas
Lo que separa a alguien que usa IA de alguien que trabaja con IA.
"Mejora el diseño" es vago. "Aumenta el tamaño del título al doble, cambia el fondo a negro y agrega un borde inferior verde neón" es accionable. Mientras más detalle, mejor resultado.
Si pides 10 cambios en un prompt, y 7 quedan bien y 3 quedan mal, es difícil identificar qué salió mal. Itera en pasos pequeños y valida cada uno antes del siguiente.
Antes de pedir cambios grandes, dile a Claude Code que guarde una copia del archivo actual. Así puedes volver atrás si algo sale mal.
Un sitio web hay que abrirlo en el navegador. Un script hay que ejecutarlo. No asumas que funciona porque Claude Code dice que funciona. Prueba siempre antes de dar por terminado.
La versión mínima que funciona primero, las mejoras después. Un sitio de una sola página funcional vale más que un sitio de 10 páginas con la mitad rota.
Tu challenge de cierre
Consolida todo lo aprendido con este reto final en 20 minutos.
Combina los dos proyectos del día: crea una landing page para tu automatización. Una página web simple que explique qué hace tu script, cómo usarlo, y que tenga un botón de descarga. Tienes 20 minutos. Claude Code hace el trabajo — tú diriges.
Crea una landing page para presentar la automatización que hice hoy. La herramienta se llama: [nombre de tu script/herramienta] Lo que hace: [describe brevemente] Cómo se usa: [pasos simples] La página debe tener: - Header con el nombre de la herramienta - Sección explicando el problema que resuelve - Sección de cómo funciona (3 pasos) - Sección de beneficios - Botón de descarga (link ficticio por ahora) Estilo oscuro, moderno. Usa el color verde neón (#95eb00) como acento principal. Todo en un archivo HTML. Sin librerías externas.
¿Y ahora qué?
La consistencia supera a la intensidad. Dedica 15 minutos diarios a pedirle cosas a Claude Code. En un mes, estarás haciendo cosas que hoy te parecen imposibles.
Cuando encuentres un prompt que da resultados consistentemente buenos, guárdalo. Construye tu propia librería de prompts para tu industria.
La IA es una ventaja competitiva — pero solo si la usas. Comparte lo que aprendiste hoy y enseña a alguien más.
Has completado la inmersión de Digital Sh*ts UP. Dispones ahora de los fundamentos para continuar explorando Claude Code de forma autónoma y aplicarlo a proyectos reales.