El diseño web combina estrategia, estética y psicología del usuario, y cada etapa exige una forma distinta de pensar. Los prompts de ChatGPT para diseño web adecuados agilizan el análisis inicial, la arquitectura del sitio, los conceptos visuales, los textos, las presentaciones al cliente y la optimización tras el lanzamiento.
Estos 28 prompts se organizan en cuatro etapas: análisis y planificación; diseño visual y composición; textos, SEO y conversión; y clientes, lanzamiento y optimización. Están pensados para diseñadores web, freelancers y agencias, y funcionan en ChatGPT o cualquier otro chatbot de IA.
Cómo usar los prompts de ChatGPT para diseño web
Las descripciones genéricas producen sitios genéricos. Añade contexto a cada prompt:
El negocio y su público: a qué se dedica la empresa, quién visita el sitio y por qué
El objetivo de cada página: la acción principal que debe realizar el visitante
El posicionamiento de marca: personalidad, voz y aquello que diferencia al negocio
Una comprobación práctica: cuestiona respuestas aplicables a cualquier sitio y verifica los consejos de SEO y rendimiento con herramientas y datos reales
Para briefs detallados y explicaciones dirigidas al cliente, Claude Sonnet 5 es una buena opción inicial.
Prompts de ChatGPT para diseño web: análisis y planificación
Siete prompts para definir las bases antes de diseñar. Gemini 3 Pro puede trabajar con briefs extensos e inventarios de contenido en una sola sesión.
1. Cuestionario inicial para el cliente
Redacta un cuestionario inicial para un nuevo cliente de diseño web del sector [sector]. Incluye objetivos de negocio, público objetivo, competidores, personalidad de marca, funciones imprescindibles, contenido disponible, presupuesto, calendario y cómo medirá el éxito.
2. Arquitectura del sitio
Diseña la arquitectura de información de un sitio para [tipo de negocio, tamaño y objetivos]. Público: [descripción]. Acciones principales de los visitantes por orden de prioridad: [lista]. Crea un mapa del sitio con secciones principales, subpáginas, estructura de URL, CTA principal y tipo de contenido para cada página clave. Explica la jerarquía y señala páginas habituales en la competencia que los visitantes apenas utilizan.
3. Brief de UX
Redacta un brief de UX para la [página de inicio / página de producto / página de pago] de [sitio y negocio]. Objetivo de negocio: [descripción]. Objetivo del usuario: [descripción]. Información que necesita: [lista]. Conversión principal: [descripción]. Incluye cómo llega a la página y cómo sale, las tareas que debe facilitar, jerarquía de información, principios de UX, accesibilidad y métricas de éxito. Sé específico para un diseñador que acaba de conocer el negocio.
4. Análisis de la competencia
Estas son mis notas sobre tres sitios de la competencia: [describe estructura, mensajes, recursos visuales y CTA]. Compara sus aciertos y problemas, identifica los patrones que espera el público del sector y sugiere cómo puede destacar el sitio de nuestro cliente.
5. Estrategia de rediseño
Justifica el rediseño del sitio de [marca]. Situación actual: [antigüedad, rendimiento, problemas y datos disponibles]. Cambios recientes: [público, productos, nueva identidad de marca, competencia]. Explica el coste de no actuar, objetivos y métricas, alcance, fases y principales riesgos. Añade un resumen ejecutivo de un párrafo para solicitar la aprobación del presupuesto.
6. Propuesta y alcance
Redacta una propuesta de diseño web para [cliente y proyecto]. Incluye objetivos, entregables por fase, exclusiones del alcance, número de rondas de revisión, calendario, responsabilidades del cliente y procedimiento para gestionar solicitudes adicionales.
7. Inventario de contenido
Esta es la lista de páginas y contenidos del sitio actual del cliente: [pega la lista]. Clasifica cada elemento como conservar, actualizar, fusionar o eliminar, y enumera el contenido que debemos crear para el nuevo sitio.
Separar el objetivo del negocio del objetivo del usuario en el prompt 3 es clave para la conversión. Para profundizar en investigación, flujos y pruebas de usabilidad, consulta nuestros prompts de ChatGPT para diseñadores de UI/UX.
Prompts de ChatGPT para diseño web: diseño visual y composición
Siete prompts para definir la apariencia y la estructura del sitio. Para convertir un concepto en imágenes de referencia para el cliente, prueba Nano Banana Pro.
8. Conceptos visuales
Desarrolla tres conceptos visuales claramente distintos para el sitio de [marca]. Personalidad: [descripción]. Público: [descripción]. Valores: [lista]. Para cada concepto, indica un nombre y una filosofía de diseño en una frase, tono visual, dirección de la paleta de colores, enfoque tipográfico, estilo de imágenes y cómo la composición y el espacio en blanco expresan la marca. No presentes simples variaciones de color de una misma idea.
9. Estructura de una landing page
Propón la estructura, sección por sección, de una landing page que venda [oferta] a [público]. Explica la función de cada sección, su contenido y dónde aparece el CTA. Mantén la página tan breve como sea posible sin dejar de responder las preguntas principales de los visitantes.
10. Componentes del sistema de diseño
Define la biblioteca de componentes de [producto: tipo, público y tecnologías] con esta dirección de diseño: [descripción]. Agrupa los componentes en composición, navegación, formularios, presentación de contenido, feedback y elementos interactivos. Indica su función, variantes y requisitos de accesibilidad, y ordénalos por frecuencia de aparición en el sitio.
11. Colores y tipografías
Sugiere tres paletas de colores y tres combinaciones tipográficas para un sitio del sector [sector] con personalidad [personalidad de marca]. Explica qué sensación transmite cada propuesta, cómo aplicarla a textos, botones y fondos, y qué problemas de contraste comprobar.
12. Dirección fotográfica
Redacta un brief de dirección de imágenes para el sitio de [marca]: temas, iluminación, tratamiento del color, composición, representación de personas y diversidad, y elementos que deben evitarse. Explica cómo deben diferenciarse las imágenes de la página de inicio, las páginas de producto y el blog.
13. Prompt para la imagen principal
Redacta un prompt de generación de imágenes para la cabecera de un sitio de [negocio], en formato 16:9, que comunique [valor principal] con estilo [estilo]. Coloca el sujeto a un lado y deja un espacio vacío y tranquilo al otro para un titular y un botón.
14. Checklist mobile-first
Crea una lista de comprobación de diseño mobile-first para [tipo de sitio]: navegación, áreas táctiles, tamaños de texto legibles, campos de formulario, carga de imágenes, CTA fijos y elementos que conviene ocultar o simplificar en pantallas pequeñas.
Tres conceptos con filosofías distintas ofrecen al cliente una elección creativa real. Usa el prompt 13 en el generador de imágenes con IA y sustituye el resultado por fotografías reales de la marca siempre que sea posible.
Prompts de ChatGPT para diseño web: textos, SEO y conversión
Siete prompts para textos y estructuras que atraigan visitas y generen conversiones. Claude Haiku 4.5 permite generar rápidamente grupos de titulares y metadescripciones.
15. Textos para la página de inicio
Redacta los textos de la página de inicio de [marca], un negocio de [actividad]. Público: [descripción]. Voz: [descripción]. Incluye una cabecera con tres titulares alternativos centrados en beneficios, aspiraciones y problemas, un subtítulo y un CTA, tres beneficios principales, una frase introductoria para la prueba social, descripciones breves de 3–4 productos o servicios y un CTA final. Dirígete al visitante, evita hablar solo de la empresa y no uses voz pasiva ni jerga.
16. Página «Sobre nosotros»
Redacta una página «Sobre nosotros» para [negocio] a partir de estos datos: [historia de origen, equipo, valores e hitos]. Empieza explicando por qué existe el negocio para sus clientes. Usa un tono humano y concreto, y termina con un siguiente paso claro.
17. Página de servicio o producto
Redacta una página sobre [servicio o producto] dirigida a [público]. Incluye el problema que resuelve, cómo funciona, beneficios principales, qué incluye, respuestas a objeciones frecuentes y un CTA convincente. Utiliza marcadores de posición en lugar de inventar testimonios o resultados.
18. Estructura SEO
Planifica el SEO on-page de un sitio de [negocio y sector]. Palabras clave comerciales: [lista]. Palabras clave informativas: [lista]. Asigna palabras clave a cada página y propón un H1 y un título para las páginas prioritarias, un plan de enlaces internos, contenido adecuado para cada intención y elementos útiles como FAQ, datos estructurados y migas de pan. Prioriza según las oportunidades.
19. Títulos y metadescripciones
Escribe una etiqueta de título de menos de 60 caracteres y una metadescripción de menos de 155 caracteres para cada página: [lista de páginas, palabras clave y objetivos]. Haz que sean específicas y atractivas para el clic, sin clickbait.
20. Auditoría de conversión
Actúa como especialista en CRO y audita esta página: [describe objetivo, composición, textos, CTA y datos disponibles]. Meta: [descripción]. Puntúa del 1 al 5 la claridad del CTA, prueba social, carga cognitiva, relevancia del contenido visible sin desplazarse respecto a la fuente de tráfico, señales de confianza y experiencia móvil. Identifica las tres barreras principales y propón para cada una una solución concreta que pueda probarse.
21. Flujo de usuario
Traza el flujo de usuario para [tarea, por ejemplo descubrir un producto y comprarlo] en [sitio]. En cada paso describe qué ve el usuario, qué hace, puntos de decisión, posibles causas de abandono y cómo el diseño puede reducir la fricción. Incluye el recorrido ideal y dos alternativas habituales, y señala los tres momentos con mayor fricción.
Planifica el SEO junto con el diseño. Para profundizar en palabras clave y optimización on-page, consulta nuestros prompts de Claude para SEO; para campañas que atraigan tráfico al nuevo sitio, revisa nuestros prompts de ChatGPT para marketing.
Prompts de ChatGPT para diseño web: clientes, lanzamiento y optimización
Siete prompts para presentar el trabajo, lanzar el sitio sin problemas y mejorarlo después. El redactor de correos con IA ayuda con las comunicaciones al cliente entre cada etapa.
22. Guion de presentación
Redacta un guion para presentar [conceptos de diseño / un rediseño / resultados de investigación] a [cliente y responsables de decidir]. Empieza por el marco estratégico antes de mostrar imágenes, explica la razón de cada decisión antes de que el cliente reaccione, prepara respuestas a posibles objeciones y termina orientando la conversación hacia comentarios útiles en lugar de gustos personales.
23. Gestión del feedback
Este es el feedback del cliente sobre el último diseño: [pega el texto]. Clasifícalo en cambios claros, comentarios ambiguos que requieren preguntas de seguimiento y solicitudes fuera del alcance acordado. Redacta una respuesta cordial que confirme los siguientes pasos.
24. QA antes del lanzamiento
Crea una lista de comprobación previa al lanzamiento de un [tipo de sitio] construido en [plataforma]. Incluye enlaces, formularios, redirecciones desde URL antiguas, analítica, SEO básico, favicon, página 404, pruebas en distintos navegadores y dispositivos, avisos de privacidad y cookies, y copias de seguridad.
25. Revisión de accesibilidad
Revisa este diseño para detectar problemas de accesibilidad: contraste, orden de encabezados, textos alternativos, foco del teclado, textos de enlaces y etiquetas de formularios: [describe o sube el diseño]. Explica cada problema y su solución, y recuérdame comprobar el resultado con herramientas automáticas y un lector de pantalla.
26. Mejora de la velocidad
Estos son los resultados de rendimiento de nuestra página de inicio: [pega resultados de una herramienta de velocidad]. Explica los problemas principales con palabras sencillas y prepara una lista priorizada de mejoras en imágenes, fuentes, scripts y desplazamientos del diseño.
27. Pruebas tras el lanzamiento
El sitio lleva publicado [tiempo] y estos son sus resultados: [pega métricas principales]. Propón cinco pruebas A/B ordenadas por impacto probable y esfuerzo. Incluye una hipótesis, la métrica que debemos observar y la duración de cada prueba.
28. Guía de entrega
Redacta una guía sencilla de entrega para [cliente] que explique cómo editar páginas, añadir entradas al blog y actualizar imágenes, dónde se encuentran los accesos y las copias de seguridad, y qué hacer o a quién contactar si algo falla.
Los clientes que entienden las razones del diseño aportan mejores comentarios; empieza cada presentación por la estrategia. Para profundizar en analítica y resultados de pruebas tras el lanzamiento, consulta nuestros prompts de ChatGPT para análisis de datos.
Usa los prompts de ChatGPT para diseño web en Chat Smith
Chat Smith reúne ChatGPT, Claude, Gemini, Grok y DeepSeek, además de modelos de imágenes, en una app. Prueba el mismo brief de textos de la página de inicio con varios modelos de IA y compara cómo se dirigen al visitante. Guarda los prompts de briefs de UX, conceptos y presentaciones como plantillas para cada proyecto nuevo.
Un buen diseño web parte de entender quién visita el sitio y qué necesita. Para aprender técnicas más allá del diseño, consulta la guía principal de prompts de ChatGPT.
Los prompts de ChatGPT para diseño web son instrucciones que le pides a la IA para que sugiera estructuras de página, paletas de color o fragmentos de código para tu sitio. Te ayudan a ahorrar tiempo en la etapa de planificación inicial. En Chat Smith puedes probar estos prompts con ChatGPT y otros modelos en un solo lugar.
El equipo editorial de Chat Smith está formado por entusiastas de la IA, investigadores y creadores de contenido apasionados por hacer que la inteligencia artificial sea más accesible y práctica. A través del blog de Chat Smith, compartimos las últimas tendencias de IA, reseñas de herramientas, análisis del sector y guías prácticas para ayudar a personas y empresas a obtener más valor de la IA. Nuestra misión es simple: ofrecer contenido claro, confiable y fácil de entender que ayude a los lectores a mantenerse informados, ser más productivos y mantenerse a la vanguardia en el dinámico mundo de la IA.
