Claude Code para Archivos Simples

npm install -g @anthropic-ai/claude-code

claude --version

# Navega a tu carpeta de proyecto
cd mi-proyecto

# Inicia Claude Code
claude

Crea un archivo index.html con una página básica que muestre "Hola Mundo"
con estilos bonitos en un fondo oscuro

Edita el archivo styles.css para agregar una animación de fadeIn
al elemento con clase .hero

¿Qué hace exactamente la función calcularTotal en el archivo app.js?

¿Cuáles son los archivos más importantes de este proyecto?

Muéstrame la estructura de carpetas y explica qué hace cada una

mkdir mi-landing
cd mi-landing
claude

Crea una landing page completa para una cafetería llamada "Café Aurora" con:

Archivos a crear:
- index.html
- styles.css
- script.js

La página debe incluir:
1. Header con logo y navegación (Inicio, Menú, Contacto)
2. Hero section con título llamativo, subtítulo y botón de llamada a la acción
3. Sección de productos con 3 tarjetas (Espresso, Cappuccino, Latte)
4. Sección de contacto con formulario (nombre, email, mensaje)
5. Footer

Diseño:
- Colores: fondo oscuro (#0a0a0f), texto blanco, acento en #7c3aed (violeta)
- Fuente: Inter desde Google Fonts
- Responsive: debe verse bien en móvil
- Animaciones sutiles al hacer scroll

El header se ve bien, pero quiero que:
- Se ponga semi-transparente al hacer scroll
- El logo tenga un efecto glow en violeta
- Los links de navegación tengan un underline animado al hover

Agrega al script.js:
- Validación del formulario de contacto (todos los campos requeridos, email válido)
- Mostrar un mensaje de éxito en verde cuando se envíe
- Contador animado en la sección de estadísticas que cuente hasta el número al hacer scroll

Revisa el código que generaste y:
1. Asegúrate que el HTML tenga metaetiquetas SEO correctas
2. Agrega atributos alt a todas las imágenes
3. Mejora la accesibilidad con ARIA labels donde sea necesario
4. Minimiza las clases CSS duplicadas

1. PROMPT    → Pide lo que quieres crear o cambiar
     ↓
2. REVISA    → Mira los archivos que Claude creó/editó
     ↓
3. PRUEBA    → Abre el archivo en el navegador o ejecuta el código
     ↓
4. ITERA     → Si algo no está bien, describe el problema
     ↓
5. REPITE    → Hasta que estés satisfecho

El botón del hero no tiene el color correcto. Debe ser violeta (#7c3aed)
con texto blanco y un glow effect. Actualmente se ve gris.

Solo cambia el tamaño de fuente del título principal.
Que sea 72px en desktop y 36px en móvil.

Basándote en el sistema de colores que ya definiste en styles.css,
agrega un modo oscuro que se active con un toggle en el header.