¡Felicidades!

Herramientas instaladas

Estructura del proyecto creada en tu PC

📁 ~/my-first-app/
├── 📂 public/                ← Imágenes, íconos
├── 📂 src/
│   ├── 📂 app/               ← Páginas (Next.js)
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── 📂 domain/            ← Lógica de negocio
│   │   ├── models/
│   │   └── services/
│   ├── 📂 ports/             ← Definición de interfaces
│   └── 📂 adapters/          ← Conexiones externas
│       ├── api/
│       └── ui/
├── 📄 CLAUDE.md               ← Reglas de arquitectura para IA
├── 📄 next.config.ts          ← Configuración de Next.js
├── 📄 tailwind.config.ts      ← Configuración de estilos
├── 📄 tsconfig.json           ← Configuración de TypeScript
└── 📄 package.json

Lánzale tu primera frase a la IA

Claude Code o Cursor — cualquiera funciona. No tiene que ser perfecto al primer intento; seguí mejorándolo en conversación.

Quiero crear un sitio web de ___.

De qué se trata el servicio:
___

Quién lo va a usar:
___

3 funciones esenciales para empezar:
1. ___
2. ___
3. ___

¿Por dónde debería empezar?

Quiero crear un sitio web para agendar reuniones con amigos.

De qué se trata el servicio:
Es muy molesto preguntar "¿cuándo pueden?" en el grupo de WhatsApp,
así que quiero un sitio donde compartas un link y cada uno vote por las fechas que le sirven.

Quién lo va a usar:
Jóvenes de 20 a 30 años. Deben poder usarlo sin registrarse, solo con un link.

3 funciones esenciales para empezar:
1. Poner varias fechas posibles y que los participantes marquen cuándo pueden
2. Participar sin crear cuenta, solo ingresando su nombre
3. Una pantalla donde se vean los resultados de la votación de un vistazo

Empieza creando una landing page para promocionar el sitio.

Después sigue así

Cuando envíes tu primer mensaje, la IA creará código. Después solo pide cosas como si fuera una conversación.

No te preocupes si no lo dices perfecto. Puedes decir "Cancela lo anterior y hazlo de nuevo" y listo.

💡 Tras desplegar tu sitio en el próximo paso, aparece otra guía organizada en 5 categorías (texto · color · nueva sección · gradiente · fuente).

Si no sabes cómo diseñar

Claude Design — Crea pantallas con IA primero y llévalas directamente a tu proyecto.

1. 1Abre claude.ai/design y describe la pantalla que quieres, por ejemplo "Hazme una página de login"
2. 2Cuando te guste, en el menú Export elige "Send to local coding agent" y pulsa Copy command
3. 3Pégalo en un terminal de Claude Code abierto en tu carpeta de proyecto — el diseño se aplica automáticamente
4. 4Si usas otro agente de IA (Cursor, etc.), marca "Download zip instead", descomprime y coloca los archivos en ~/my-first-app/

Solo disponible para suscriptores de Claude Pro, Max, Team y Enterprise. Está en vista previa de investigación con su propio límite semanal independiente; el uso aquí no cuenta para los demás límites de Claude.