🎉
¡Felicidades!
Tu entorno de desarrollo para Sitio web con Next.js está listo
Herramientas instaladas
GitVS CodeClaude CodeNode.js
Estructura del proyecto creada en tu PC
📁 ~/my-first-app/ ├── 📂 src/ │ ├── 📂 domain/ ← Lógica de negocio │ │ ├── models/ │ │ └── services/ │ ├── 📂 ports/ ← Definición de interfaces │ ├── 📂 adapters/ ← Conexiones externas │ │ ├── api/ │ │ └── ui/ │ └── 📂 app/ ← Páginas (Next.js) ├── 📄 CLAUDE.md ← Reglas de arquitectura para IA └── 📄 package.json
Tu primera frase para Claude Code
No tienes que escribirlo perfecto a la primera. Puedes ir mejorándolo mientras conversas.
Llena los espacios en blanco
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?
Así puedes escribirlo
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 ¿Por dónde debería empezar?
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.
“¿Puedo probarlo?”
“Hazme el texto más grande”
“Cambia el fondo a azul”
“Quiero agregar inicio de sesión”
“Me sale un error, ¿puedes ayudarme? (pega el mensaje de error)”
“Explícame lo que hemos hecho hasta ahora”
No te preocupes si no lo dices perfecto. Puedes decir "Cancela lo anterior y hazlo de nuevo" y listo.
Si no sabes cómo diseñar
v0.dev En v0.dev puedes crear pantallas con IA y luego traerlas a tu proyecto.
- 1En v0.dev describe la pantalla que quieres, por ejemplo "Hazme una página de login"
- 2Si te gusta, haz clic en Download ZIP para descargarlo
- 3Descomprime y coloca los archivos en la carpeta ~/my-first-app/
- 4Dile a Claude Code "Aplica este código a mi proyecto"
Siguiente paso
¿Listo para poner tu sitio en internet de verdad?
Sube tu código a GitHub y publícalo con Vercel: obtendrás una URL real que puedes compartir con tus amigos. Te guiamos paso a paso.
Inicia sesión con Google para vincular automáticamente el proyecto que acabas de crear.