Prompts Maestros logo
Prompts Herramientas Agentes

Prompt: Diseñar una Maqueta de Interfaz de Usuario

Genera una maqueta conceptual de interfaz web o móvil basada en objetivos del usuario y estructura funcional.

Este prompt genera maquetas conceptuales y estructuradas para aplicaciones web o móviles. La versión extendida amplía el resultado con wireframes detallados, user flows y patrones de interacción.

Es útil tanto para principiantes como para profesionales de ui que buscan genera una maqueta conceptual de interfaz web o móvil basada en objetivos del usuario y estructura funcional. El prompt está diseñado para funcionar bien en ChatGPT, Gemini, Claude y otros modelos populares de IA.

Gracias a su diseño, el prompt logra crea un esquema de pantallas básico., algo que no siempre se consigue con instrucciones genéricas. La estructura probada garantiza que la IA interprete correctamente la solicitud.

Actúa como diseñador UX. Genera una maqueta conceptual para una aplicación [TIPO_APP] centrada en [OBJETIVO_USUARIO]. Incluye: 1. Lista de pantallas. 2. Layout básico. 3. Elementos UI esenciales.
# CONTEXTO Eres un diseñador UX senior especializado en arquitectura visual. # INFORMACIÓN DEL USUARIO - Tipo de aplicación: [TIPO_APP] - Objetivo principal del usuario: [OBJETIVO_USUARIO] - Público objetivo: [PUBLICO] - Nivel de fidelidad de la maqueta: [FIDELIDAD] - Restricciones o requerimientos clave: [REQUERIMIENTOS] # BLOQUES DE RESPUESTA 1. Flujo UX completo. 2. Wireframes por pantalla. 3. Principios de diseño aplicados. 4. Recomendaciones de interacción y accesibilidad. # CRITERIOS DE CALIDAD - Claridad visual. - Estructura consistente. - Enfoque centrado en el usuario.
# CONTEXTO Eres un diseñador UX en arquitectura visual. # INFORMACIÓN DEL USUARIO - Tipo de aplicación: [TIPO_APP] - Objetivo principal del usuario: [OBJETIVO_USUARIO] - Público objetivo: [PUBLICO] - Nivel de fidelidad de la maqueta: [FIDELIDAD] - Restricciones o requerimientos clave: [REQUERIMIENTOS] # BLOQUES DE RESPUESTA 1. Flujo UX completo. 2. Wireframes por pantalla. 3. Principios de diseño aplicados. 4. Recomendaciones de interacción y accesibilidad. # CRITERIOS DE CALIDAD - Claridad visual. - Estructura consistente.
Este prompt pertenece a la categoría de Síntesis y Comprensión de Textos

¿Qué hace el prompt?

Versión Básica

  • Crea un esquema de pantallas básico.
  • Define elementos clave de UI según tarea del usuario.
  • Sugiere layout y jerarquía visual.

Versión Extendida

  • Crea un esquema de pantallas básico.
  • Define elementos clave de UI según tarea del usuario.
  • Sugiere layout y jerarquía visual.
  • Diseña flujo de usuario completo y casos de uso.
  • Incluye wireframes detallados por pantalla.
  • Sugiere patrones de interacción sensibles y accesibles.
  • Añade guía visual y principios de diseño aplicados.

Versión Eficiente

  • Diseña flujo de usuario completo y casos de uso
  • Incluye wireframes detallados por pantalla
  • Sugiere patrones de interacción sensibles y accesibles

¿Cómo usar este prompt?

Versión Básica

  • Reemplaza [TIPO_APP] por 'web' o 'móvil'.
  • [OBJETIVO_USUARIO] Ej.: 'gestionar tareas diarias'.
  • Pide un diagrama ASCII si deseas algo visual.

Versión Extendida

  • Rellena [TIPO_APP] ('web', 'móvil').
  • [OBJETIVO_USUARIO] Ej.: 'comprar productos fácilmente'.
  • [PUBLICO] Ej.: 'adultos jóvenes'.
  • [FIDELIDAD] Ej.: 'media'.
  • [REQUERIMIENTOS] Ej.: 'modo oscuro, login social'.

Versión Eficiente

  • Rellena [TIPO_APP] ('web', 'móvil')
  • [OBJETIVO_USUARIO] Ej.: 'comprar productos fácilmente'
  • [PUBLICO] Ej.: 'adultos jóvenes'
  • [FIDELIDAD] Ej.: 'media'

Tips

Versión Básica

  • Indica si es web o móvil.
  • Explica brevemente la tarea principal del usuario.
  • Puedes pedir estilos: minimalista, profesional, educativo.

Versión Extendida

  • Indica estilo visual o brand guidelines si existen.
  • Define nivel de fidelidad: baja, media o alta.
  • Solicita un user flow en formato diagrama.

Versión Eficiente

  • Indica estilo visual o brand guidelines si existen
  • Define nivel de fidelidad: baja, media o alta
  • Solicita un user flow en formato diagrama

¿Para quién es?

Es ideal para diseñadores UX/UI, product managers, emprendedores digitales y desarrolladores front-end que necesitan visualizar una interfaz antes de escribir código. También es útil para estudiantes de diseño que buscan estructurar sus primeras maquetas conceptuales de forma rápida.

¿Qué problema resuelve?

Resuelve el bloqueo creativo y la pérdida de tiempo al comenzar un diseño desde cero. En lugar de saltar directamente a herramientas complejas, obtienes un esquema funcional básico con la jerarquía visual y los elementos clave ya definidos. Esto acelera la toma de decisiones y alinea al equipo sobre la estructura de la interfaz antes de invertir horas en detalles gráficos.

Casos de uso prácticos

  • Planificar la pantalla principal de una app de productividad personal, definiendo la barra de navegación, el área de tareas y los filtros.
  • Crear un layout para un panel de control (dashboard) educativo, organizando gráficos, tablas y accesos directos según la prioridad del usuario.
  • Diseñar el flujo de registro en una web profesional, indicando campos obligatorios, botones de acción y mensajes de validación.
  • Esbozar una vista de detalle de producto en una tienda móvil, mostrando imagen, descripción, precio y botón de compra.

Consejos para mejores resultados

  • Especifica si es web o móvil al inicio del prompt, ya que el espacio disponible cambia la jerarquía visual y el tamaño de los elementos.
  • Describe brevemente la tarea principal del usuario (por ejemplo, "encontrar un curso rápido" o "comparar precios") para que el layout se adapte a su objetivo real.
  • Si buscas una guía visual inmediata, pide un diagrama ASCII en la respuesta; te ayudará a ver la distribución sin necesidad de abrir un programa de diseño.