Crea tu Página Web
con IA
De idea a página publicada usando Stitch + Claude Code + Vercel.
Copia los prompts, personaliza y publica hoy.
Lo que vas a encontrar
Esta guía tiene todo lo que necesitas para crear tu propia página web profesional sin saber programar.
Smart Prompt
Claude te hace las preguntas correctas y genera el prompt perfecto para Stitch.
Configura Next.js
Convierte el código de Stitch en un proyecto real, organizado y fácil de editar.
Inspiración
4 plataformas donde encontrar diseños y landing pages para tu visión.
Publica con Vercel
Instala el MCP de Vercel y publica tu página con un solo comando.
El flujo completo: Abres Claude Code → pegas el Smart Prompt → respondes las preguntas → copias el prompt generado → lo pegas en Stitch → descargas el código → lo abres en Claude Code → pegas el Prompt de Next.js → personalizas → publicas con Vercel.
Requisitos: Una cuenta de Claude (claude.ai), Claude Code instalado, Node.js instalado, y una cuenta gratuita en Vercel.
Paso 1Smart Prompt
Copia este prompt y pégalo en Claude Code. Claude te va a hacer preguntas sobre tu proyecto y al final te genera automáticamente el prompt perfecto para crear tu página en Stitch.
# Smart Prompt — Generador de páginas web con Stitch
Eres un asistente experto en diseño web y UX. Tu trabajo
es ayudarme a definir mi página web perfecta haciéndome
preguntas claras y concretas. Al terminar, vas a generar
un prompt completo y detallado que yo pueda copiar y pegar
directamente en Google Stitch para crear mi landing page.
## INSTRUCCIONES
1. Hazme las siguientes preguntas UNA POR UNA (espera mi
respuesta antes de continuar)
2. Si en cualquier momento digo "continúa", "sigue tú"
o "decide tú", toma decisiones creativas por mí
basándote en lo que ya te dije
3. Al final de las preguntas, genera el prompt completo
para Stitch
## PREGUNTAS (haz una a la vez)
1. ¿DE QUÉ SE TRATA?
"Cuéntame: ¿de qué es tu página? ¿Es un proyecto
personal, un negocio, un portafolio, un servicio?
Descríbelo en 2-3 frases."
2. ¿PARA QUIÉN ES?
"¿Quién va a visitar tu página? ¿Qué tipo de
persona es tu visitante ideal?"
3. ¿QUÉ QUIERES QUE HAGAN?
"Cuando alguien visite tu página, ¿qué acción
principal quieres que tome? (comprar, suscribirse,
contactarte, descargar algo, ver tu trabajo...)"
4. ¿QUÉ ESTILO VISUAL TE GUSTA?
"Describe el vibe que quieres. ¿Moderno y limpio?
¿Oscuro y techy? ¿Colorido y divertido? ¿Elegante
y editorial? Si tienes una página de referencia,
compártela."
5. ¿QUÉ COLORES?
"¿Tienes colores de marca? Si no, dime qué colores
te gustan o qué sensación quieres transmitir y yo
te sugiero una paleta."
6. ¿QUÉ SECCIONES NECESITAS?
"¿Qué secciones debe tener tu página? Ejemplos:
hero, sobre mí, servicios, portafolio, precios,
testimonios, contacto, newsletter, FAQ..."
7. ¿TIENES CONTENIDO?
"¿Ya tienes textos, fotos, logos? ¿O necesitas que
genere textos placeholder basados en tu descripción?"
8. ¿ALGUNA FUNCIONALIDAD ESPECIAL?
"¿Necesitas algo interactivo? Formulario de contacto,
galería de fotos, animaciones, mapa, integración con
redes sociales, tienda..."
9. ¿QUÉ NO QUIERES?
"¿Hay algo que NO quieras en tu página? Cosas que
odias de otras páginas web, estilos que detestas..."
10. ¿ALGO MÁS?
"¿Hay algo más que deba saber? Cualquier detalle
extra, deadline, inspiración, lo que sea."
## DESPUÉS DE LAS PREGUNTAS
Cuando tengas todas mis respuestas (o cuando yo diga
"continúa"), genera un prompt COMPLETO para Google
Stitch que incluya:
1. Descripción general de la página
2. Cada sección con copy exacto (textos en español)
3. Colores hex específicos
4. Estilo tipográfico
5. Estilo de botones y cards
6. Reglas de diseño (spacing, bordes, etc.)
7. Indicaciones para mobile responsive
8. Placeholders para imágenes si no las tengo
Formatea el prompt como un bloque de texto que yo pueda
copiar y pegar directamente en Stitch. Debe ser tan
detallado que Stitch genere algo casi listo para publicar.Pro tip: No te preocupes si no sabes todas las respuestas. Puedes decir "decide tú" en cualquier pregunta y Claude tomará decisiones creativas por ti.
Paso 2Primer Prompt para Claude Code
Cuando descargues tu proyecto de Stitch y lo abras en Claude Code, pega este prompt. Va a organizar todo el código en componentes separados.
¿Qué hace este prompt?
Organiza el código
Separa cada sección en su propio archivo.
Configura Next.js
Convierte el HTML en un proyecto real con Tailwind.
Mantiene el diseño
No cambia nada visual — solo reorganiza.
Listo para deploy
Se puede publicar directo en Vercel.
Toma este código de Stitch y conviértelo en un proyecto Next.js con Tailwind CSS. Cada sección de la página debe ser un componente separado en /components. Identifica todas las secciones que tiene la página y crea un componente para cada una. Ejemplo de nombres (adapta según tu página): Hero.tsx, Navbar.tsx, Features.tsx, About.tsx, Pricing.tsx, Testimonials.tsx, Contact.tsx, Newsletter.tsx, Footer.tsx Reglas: - Mantén el diseño visual EXACTO de Stitch - Usa Tailwind CSS para todos los estilos - Haz cada componente responsive (mobile + desktop) - Muéstrame la estructura de archivos antes de empezar para que yo la apruebe # Si tu página tiene navegación flotante o elementos # fijos, también sepáralos en componentes propios
Importante: Claude Code te va a mostrar la estructura de carpetas antes de hacer cambios. Revísala, y si se ve bien, dile "dale" o "aprobado".
Después de esto: Ya puedes decirle a Claude Code cosas como "hazme el botón más grande", "cambia el color del hero" y va a saber exactamente qué archivo editar.
Paso 3Inspiración antes de crear
Antes de escribir tu prompt para Stitch, mira estas plataformas. Encuentra un diseño que te guste y úsalo como referencia.
Dribbble
La plataforma más grande de diseño. Busca "landing page" o "website design" para encontrar estilos modernos.
dribbble.comLapa Ninja
Colección curada de landing pages reales. Perfecto para ver cómo se ven páginas ya publicadas.
lapa.ninjaLand-book
Galería de diseños web organizados por tipo: portfolios, agencias, startups, apps.
land-book.com21st.dev
Componentes y assets listos para usar. Headers, footers, cards y secciones completas.
21st.devCómo usar estas referencias: Encuentra 1-2 páginas que te gusten. Toma screenshots. Cuando estés con el Smart Prompt, puedes decir: "Quiero algo parecido a [página]" y Claude adapta el prompt a ese estilo.
¿No tienes inspiración?
No pasa nada. El Smart Prompt del Paso 1 te hace las preguntas correctas para que Claude diseñe algo bonito por ti.
Paso 4Publica con Vercel
Vercel es donde tu página va a vivir en internet. Gratis. Conectas el MCP a Claude Code y con un solo prompt publicas tu página.
Crea tu cuenta en Vercel
Ve a vercel.com y crea una cuenta gratis con tu GitHub o email.
Genera tu Token
En Vercel, ve a Settings → Tokens → Create Token. Dale un nombre como "Claude Code" y cópialo.
Instala el MCP de Vercel en Claude Code
Abre tu terminal y corre este comando. Reemplaza tu_token_aqui con el token que acabas de copiar:
claude mcp add vercel-mcp \ -e VERCEL_TOKEN=tu_token_aqui \ -- npx -y @vercel/mcp@latest
¿Qué es un MCP? Es una conexión que permite a Claude Code hablar directamente con Vercel. Así Claude puede crear proyectos y hacer deploy sin que tú tengas que salir de Claude Code.
Publica tu página
Una vez instalado el MCP, simplemente dile a Claude Code:
Publica este proyecto en Vercel. El nombre del proyecto es: mi-pagina-web
Listo: En menos de 1 minuto tu página va a estar en internet con una URL tipo mi-pagina-web.vercel.app.
⚠️ Nunca compartas tu token
Tu token de Vercel es como una contraseña. Si alguien lo tiene, puede publicar cosas en tu cuenta. Mantenlo privado.
Ahora te toca a ti.
Copia los prompts, personaliza y publica.
No necesitas saber código. Solo necesitas empezar.
Sígueme para más recursos gratis
YouTube · Instagram · TikTok
@dontomyy