Mejores Prompts de IA para Diseño y UX

Actúa como un diseñador de producto sénior. Haz una crítica constructiva de este diseño de interfaz (UI): [describe la pantalla o pega una descripción/captura] Evalúa: jerarquía visual, espaciado, tipografía, uso del color y consistencia. Sé específico sobre qué mejorar y por qué.

Audita esta interfaz (UI) en busca de problemas de accesibilidad según las pautas WCAG 2.1 AA: [describe la UI o enumera sus componentes] Comprueba: contraste de color, navegación por teclado, estados de foco, compatibilidad con lectores de pantalla, tamaños de áreas táctiles y uso de atributos ARIA. Clasifica los problemas según su gravedad.

Revisa este diseño de interfaz para evaluar su adaptabilidad a dispositivos móviles: [describe el diseño o lista los componentes] Identifica: elementos que no escalarán adecuadamente, áreas táctiles demasiado pequeñas, contenidos que se desbordarán y problemas de espaciado en pantallas reducidas. Sugiere soluciones específicas.

Analiza la jerarquía visual de esta interfaz de usuario: [describe la distribución de la pantalla y sus elementos] Identifica: en qué elemento se fijará primero la mirada del usuario, si la jerarquía se ajusta al objetivo previsto para el usuario y qué modificaciones mejorarían el escaneo visual y la comprensión.

Escribe una guía de entrevista con usuarios para investigar [tema o funcionalidad, ej. 'cómo gestionan las personas sus finanzas']. Incluye: 3 preguntas de calentamiento o introducción, de 8 a 10 preguntas centrales y 2 preguntas de cierre. Utiliza formulaciones abiertas. Evita preguntas tendenciosas que condicionen la respuesta.

Crea una persona de usuario (user persona) realista para [producto o funcionalidad]. Usuario objetivo: [describe a grandes rasgos, ej. 'diseñadores gráficos freelance, 28–40 años'] Incluye: nombre, edad, ocupación, metas, frustraciones, comportamientos clave y una cita textual breve. Mantenla fundamentada en la realidad y práctica para el diseño.

Escribe un guion para una prueba de usabilidad sobre [funcionalidad o flujo, ej. 'el proceso de compra o checkout']. Incluye: introducción del facilitador, recordatorio de consentimiento, de 4 a 6 escenarios de tareas con contexto realista y preguntas de sondeo posteriores a cada tarea. Evita desvelar la ruta correcta.

Diseña una encuesta de usuarios para recopilar opiniones sobre [funcionalidad, ej. 'nuestro nuevo flujo de bienvenida / onboarding']. Incluye: 1 pregunta de tipo NPS o CSAT, de 4 a 6 preguntas de valoración numérica o de opción múltiple y 2 preguntas abiertas. El tiempo para completarla debe ser inferior a 3 minutos. Sugiere el orden de preguntas más idóneo.

Propón una convención de nomenclatura para componentes de interfaz en nuestro sistema de diseño. Contexto: [ej. 'Usamos React, Figma y combinamos componentes atómicos y compuestos'] Cubre: nombres de componentes, nomenclatura de variantes, nombres de props y estructura de nombres para archivos y capas en Figma. Proporciona ejemplos para Botón, Modal y Campo de Formulario.

Escribe una documentación clara para este componente de interfaz: Componente: [nombre del componente, ej. 'Notificación Toast'] Props/variantes: [enuméralas] Contexto de uso: [dónde se utiliza] Incluye: descripción general, cuándo usarlo frente a cuándo no usarlo, tabla de propiedades (props), notas de accesibilidad y un ejemplo de uso.

Propón una estructura de design tokens para [nombre del producto o sistema de diseño]. Colores de marca: [enumera los colores clave] Tipografía: [enumera familias tipográficas o escala] Contexto: [ej. app web, app móvil o ambas] Organiza los tokens en: color, tipografía, espaciado, radio de bordes (border-radius), sombras y animaciones (motion). Muestra ejemplos de tokens tanto primitivos como semánticos.

Ayúdame a auditar nuestra biblioteca de patrones en busca de inconsistencias. Aquí tienes la lista de nuestros componentes y variantes actuales: [pega la lista de componentes] Identifica: patrones duplicados que cumplen el mismo fin, incoherencias de nomenclatura, lagunas donde falta un componente reutilizable y componentes que puedan ser excesivamente específicos para resultar reutilizables.

Diseña el flujo de usuario para [funcionalidad, ej. 'restablecer la contraseña']. Objetivo del usuario: [describe qué desea lograr el usuario] Punto de entrada: [dónde comienza el usuario] Enumera cada paso que da el usuario, las decisiones que afronta y posibles rutas de error o casos extremos. Preséntalo como un flujo numerado con bifurcaciones donde sea preciso.

Propón la arquitectura de información para [sección de la aplicación, ej. 'el área de configuración de un panel de control SaaS']. Tipos de usuario: [enumera si hay varios] Tareas clave que realizan los usuarios: [lista de 4 a 6 tareas] Sugiere una estructura de navegación con secciones principales, subsecciones y el contenido o acciones en cada una. Justifica tus agrupaciones.

Propón una estructura de navegación para [producto, ej. 'una herramienta B2B de gestión de proyectos']. Funcionalidades principales: [lista las funcionalidades centrales] Roles de usuario: [lista roles si aplica] Recomienda: elementos de navegación principal, navegación secundaria y cómo gestionar el acceso basado en roles. Ten en cuenta patrones tanto de barra lateral en escritorio como de navegación inferior en móviles.

Diseña un flujo de incorporación (onboarding) para [producto, ej. 'una aplicación móvil de seguimiento de hábitos']. Meta del nuevo usuario: [qué necesita lograr para experimentar valor] Pasos de configuración obligatorios: [enumera los indispensables, ej. 'crear primer hábito'] Propón: secuencia de pantallas, qué pedir de inmediato frente a qué posponer, indicador de progreso y cómo gestionar las opciones de omitir o configurar más tarde. Mantén el tiempo hasta obtener valor lo más corto posible.

Escribe mensajes de error claros y comprensibles para el usuario en estos escenarios: [enumera los escenarios de error, ej. 'formato de correo inválido', 'archivo demasiado grande', 'sesión caducada'] Para cada uno: redacta el título del error, una explicación sencilla de lo ocurrido y la acción que debe realizar el usuario. Tono: [ej. cercano, profesional, minimalista].

Escribe textos para pantallas de estado vacío en estos casos de interfaz: [enumera estados, ej. 'sin resultados de búsqueda', 'aún no hay notificaciones', 'ningún archivo subido'] Para cada uno: escribe un encabezado, una explicación de 1 o 2 frases y un llamado a la acción si corresponde. Tono: [ej. motivador, neutro, desenfadado]. Evita frases de relleno vacías como 'Nada que ver por aquí'.

Escribe variaciones de texto para botones y llamados a la acción (CTA) para [acción o funcionalidad, ej. 'iniciar prueba gratuita']. Contexto: [dónde aparece el botón, ej. 'página de precios', 'estado vacío', 'cabecera de modal'] Tono: [ej. directo, enfocado en el beneficio, sin fricción] Proporciona de 6 a 8 opciones de texto ordenadas de mayor a menor asertividad. Explica los pros y contras de cada una.

Escribe tooltips y textos de ayuda para los siguientes elementos de interfaz: [enumera elementos, ej. 'campo de clave de API', 'selector de ciclo de facturación', 'ajuste de frecuencia de notificaciones'] Para cada uno: escribe un tooltip conciso (menos de 15 palabras) y un texto de ayuda opcional más largo para usar en línea. Prioriza la claridad sobre el ingenio.

Ayúdame a redactar una justificación sólida para esta decisión de diseño: Decisión: [describe lo que se decidió, ej. 'Cambiamos de un diseño con pestañas a una página única desplazable'] Contexto: [qué problema resuelve o qué dato/aprendizaje motivó el cambio] Alternativas consideradas: [enumera 1 o 2] Escribe una explicación concisa que pueda compartir con las partes interesadas que cubra: el problema, la decisión tomada, por qué es la solución idónea y las concesiones asumidas.

Crea un esquema de presentación para una sesión de revisión de diseño sobre [nombre de la funcionalidad o proyecto]. Audiencia: [ej. 'equipo de producto + líderes de ingeniería'] Objetivo de la sesión: [ej. 'obtener aprobación final antes de desarrollo' o 'recoger opiniones sobre la dirección conceptual'] Fase: [ej. 'concepto inicial', 'maquetas refinadas', 'diseños finales'] Incluye: secciones sugeridas, qué mostrar en cada una, distribución del tiempo y cómo formular la petición de feedback.

Escribe una narrativa de 'antes y después' para esta mejora de diseño: Antes: [describe el diseño anterior y sus problemas] Después: [describe el nuevo diseño y qué cambió] Métricas o feedback de usuarios (si existen): [pega si están disponibles] Redacta una historia concisa que pueda usar en un caso de estudio o en una actualización a stakeholders explicando el problema, el hallazgo y el impacto del cambio.

Ayúdame a resumir y sintetizar las notas de feedback de los stakeholders tras una sesión de revisión de diseño: [pega las notas o comentarios brutos] Organízalo en: temas principales, peticiones concretas aplicables, dudas que requieren aclaración y opiniones que entran en conflicto entre sí. Señala cualquier comentario que contradiga la investigación con usuarios o los principios de diseño.