40 prompts para crear páginas web y apps con IA (listos para copiar)

La diferencia entre una web mediocre y una profesional creada con inteligencia artificial está, casi siempre, en el prompt. En este artículo te comparto los prompts para crear páginas web y apps que uso con ChatGPT, Claude y Gemini, organizados por etapa: planificación, diseño, código, contenido, SEO, corrección de errores y publicación. Cópialos, cambia lo que está entre corchetes y adáptalos a tu proyecto.

Cómo escribir un buen prompt para crear webs y apps

Un buen prompt tiene seis partes. Si te acostumbras a incluirlas, la calidad de lo que genera la IA sube muchísimo:

1. Rol: «Actúa como diseñador web y desarrollador experto».
2. Contexto: quién eres, tu negocio y tu público.
3. Tarea: qué quieres exactamente.
4. Requisitos: funciones, secciones, tecnologías, restricciones.
5. Estilo: colores, tono, tipografía, referencias.
6. Formato de entrega: un archivo, varios, con explicación, sin explicación.

Prompts para planificar tu web o app

1. «Quiero crear una web para [negocio] dirigida a [público]. Propón las páginas necesarias, el objetivo de cada una y el contenido principal. Hazme preguntas si te falta información».
2. «Define las funciones de la primera versión de una app para [objetivo]. Sepáralas en imprescindibles, deseables y para el futuro».
3. «Crea el mapa del sitio de un blog sobre [tema] con 5 categorías y 10 ideas de artículos por categoría, cada una con su palabra clave principal».
4. «Analiza estas tres webs de mi competencia: [enlaces o descripción]. Dime qué hacen bien, qué les falta y cómo puedo diferenciarme».
5. «Describe al cliente ideal de [negocio]: problemas, dudas frecuentes y qué necesita ver en una web para confiar».

Prompts para el diseño

6. «Propón tres estilos visuales para la web de [negocio]: paleta de colores en hexadecimal, tipografías de Google Fonts y el tipo de imágenes que encajan».
7. «Diseña la sección de portada (hero) con un titular, un subtítulo, un botón principal y uno secundario. Estilo [minimalista/moderno/elegante]».
8. «Crea una guía de estilos en CSS con variables para colores, tipografías, espaciados, sombras y botones».
9. «Rediseña esta sección para que se vea más profesional, con más espacio en blanco y mejor jerarquía: [código]».
10. «Adapta este diseño para celular primero y después para pantallas grandes».
11. «Añade modo oscuro que respete la preferencia del sistema y un botón para cambiarlo».

Prompts para generar el código

12. «Crea una landing page completa en un solo archivo HTML con CSS y JavaScript integrados, sin librerías externas, para [producto]. Secciones: [lista]. Diseño [estilo]. Textos en español».
13. «Crea una app web para [función] que guarde los datos en localStorage, adaptada al celular y en un solo archivo».
14. «Añade un menú fijo que se convierta en menú hamburguesa en pantallas menores de 768 px».
15. «Crea una galería de imágenes con filtro por categorías y vista ampliada al hacer clic».
16. «Añade un formulario de contacto con validación y conéctalo a [servicio de formularios]».
17. «Incrusta estos videos de YouTube de forma que no ralenticen la carga: [enlaces]».
18. «Convierte esta app en PWA: crea el manifest.json, el service worker y dime qué iconos necesito».
19. «Divide este código en archivos HTML, CSS y JS separados y explícame cómo se enlazan».
20. «Dame el CSS adicional para mi tema de WordPress para que [cambio concreto]».

Prompts para el contenido

21. «Escribe 5 titulares para la portada de [negocio] centrados en el beneficio para [público]».
22. «Redacta la página de servicios con un párrafo por servicio, incluyendo para quién es, qué incluye y el resultado».
23. «Escribe la página Sobre mí a partir de estos datos reales: [datos]. Tono cercano y profesional».
24. «Crea 10 preguntas frecuentes con respuestas breves sobre [servicio]».
25. «Escribe la descripción de mi app para Google Play: descripción breve de 80 caracteres y completa de 2.000 caracteres con palabras clave».

Prompts para SEO

26. «Propón el meta título (máximo 60 caracteres) y la meta descripción (máximo 155) para esta página: [contenido]».
27. «Revisa este HTML y corrige el SEO on page: un solo H1, jerarquía de encabezados, textos alternativos, enlaces descriptivos».
28. «Genera los datos estructurados JSON-LD de tipo [LocalBusiness/Article/FAQ] para esta página».
29. «Dame 20 palabras clave de cola larga para [tema] agrupadas por intención de búsqueda». Confírmalas después con datos reales.
30. «Escribe un esquema de artículo de blog para la palabra clave [palabra], con H2 y H3 y preguntas frecuentes».
31. «Sugiere enlaces internos entre estas páginas de mi web: [lista de URL y temas]».

Prompts para corregir errores y mejorar

32. «Al pulsar [botón] pasa [problema] y la consola muestra este error: [error]. Encuentra la causa y dame el archivo corregido completo».
33. «Revisa este código y dime si tiene errores, problemas de seguridad o malas prácticas».
34. «Optimiza esta página para que cargue más rápido».
35. «Revisa la accesibilidad: contraste, navegación con teclado, etiquetas de formularios y textos alternativos».
36. «Explícame este código línea por línea como si nunca hubiera programado».

Prompts para publicar y mantener

37. «Explícame paso a paso cómo publicar esta web en [Netlify/GitHub Pages/mi hosting]».
38. «Crea la política de privacidad para una web que usa [servicios]». Revísala después con cuidado.
39. «Dame una lista de comprobación antes de publicar una web: técnica, SEO, legal y contenido».
40. «Propón un plan de contenidos para los próximos 3 meses con 2 artículos por semana».

Consejos para sacar más provecho a estos prompts

• Sé específico: cuantos más datos reales des, menos genérico será el resultado.
• Pide de a poco: una tarea grande dividida en pasos sale mejor que todo en un mensaje.
• Pide el archivo completo cada vez que cambies código.
• Revisa siempre: la IA puede inventar datos o cometer errores.
• Guarda tus mejores prompts en un documento para reutilizarlos.

Ejemplo: un prompt malo y el mismo prompt mejorado

Prompt malo: «Hazme una página web para mi gimnasio».

El resultado será genérico: un titular tipo «Bienvenidos a nuestro gimnasio», fotos de ejemplo y secciones que podrían ser de cualquier gimnasio del mundo.

Prompt mejorado:

Actúa como diseñador web y redactor publicitario. Crea la página de inicio de «Fuerza Norte», un gimnasio pequeño en San Nicolás de los Garza enfocado en principiantes de 30 a 50 años que nunca han entrenado. Su diferencia: grupos de máximo 8 personas y un entrenador que te acompaña las primeras 4 semanas. Secciones: portada con titular centrado en «empezar sin miedo», cómo funciona en 3 pasos, horarios, precios con 3 planes, testimonios (deja espacios para testimonios reales), preguntas frecuentes y contacto con botón de WhatsApp. Estilo cálido y cercano, colores verde oscuro y crema, tipografía redondeada. Un solo archivo HTML, adaptado a celular, con meta título y meta descripción optimizados para «gimnasio para principiantes San Nicolás».

Con el segundo prompt, la IA sabe a quién habla, qué hace diferente al negocio, qué secciones necesita, cómo debe verse y qué búsqueda quiere posicionar. El resultado será mucho más útil desde el primer intento.

Prompts extra para apps móviles y AppCreator24

• «Tengo una app de [tema] en AppCreator24. Propón la estructura de secciones del menú, el contenido de cada una y el orden ideal».
• «Escribe los textos de bienvenida, la sección Acerca de y la política de privacidad de mi app de [tema] que usa AdMob».
• «Dame 10 ideas de nombre para una app de [tema] que sean cortas, fáciles de buscar en Google Play y no usen marcas registradas».
• «Describe las 5 capturas de pantalla que debería mostrar en Google Play y el texto que pondría encima de cada una».
• «Genera una lista de comprobación para revisar mi app antes de enviarla a Google Play».

Si estás empezando con AppCreator24, aquí tienes el tutorial completo.

Cómo organizar tu biblioteca de prompts

Cuando encuentres un prompt que funciona, guárdalo. Yo uso un documento con secciones (planificación, diseño, código, SEO, contenido) y para cada prompt anoto con qué IA funcionó mejor y qué resultado dio. También puedes guardarlos como instrucciones de un Proyecto en Claude o de un GPT personalizado en ChatGPT, para que la IA ya conozca tu marca y tu forma de trabajar cada vez que empiezas una conversación nueva.

Errores comunes al usar prompts para crear webs

• Copiar el prompt sin cambiar los corchetes: la IA rellenará con datos inventados.
• Pedir demasiadas cosas a la vez: si el resultado empeora, divide la petición en pasos.
• No dar ejemplos: si te gusta el estilo de una web, descríbelo o pega una captura; las IA entienden imágenes.
• Aceptar textos con datos falsos: premios, cifras o testimonios inventados pueden dañar tu reputación.
• Olvidar el objetivo de la página: recuerda siempre a la IA qué quieres que haga el visitante (comprar, escribir, suscribirse).

Preguntas frecuentes

¿Estos prompts funcionan en ChatGPT, Claude y Gemini?

Sí. Están escritos para funcionar en cualquiera. Puedes comparar las tres en ChatGPT vs Claude vs Gemini.

¿Necesito saber programar para usarlos?

No, aunque entender lo básico te ayuda a detectar errores. Pide siempre que te expliquen el código.

Ponlos en práctica con mis guías de cómo crear una página web con ChatGPT y con Claude. Soy Estutos y hasta luego.