Prompts Maestros logo
Prompts Herramientas Agentes

Prompt: Diseñar una Interfaz de Usuario para una Aplicación

Genera un diseño de interfaz de usuario claro y funcional para aplicaciones web o móviles, centrado en las tareas reales de tus usuarios.

Este prompt está diseñado para ayudar a definir la estructura y el contenido de la interfaz de usuario de una aplicación web o móvil, empezando por las tareas reales del usuario y la claridad de los flujos. La versión gratuita ofrece una visión general de pantallas y navegación, mientras que la versión extendida añade arquitectura de información, estados críticos y recomendaciones de accesibilidad y responsive.

Actúa como diseñador de experiencia de usuario (UX/UI). Genera un diseño conceptual de interfaz de usuario para una aplicación centrada en la tarea principal del usuario. # INFORMACIÓN DEL USUARIO: - Tipo de aplicación (web o móvil): [PLATAFORMA] - Objetivo o tarea principal del usuario: [OBJETIVO_USUARIO] - Público objetivo: [PUBLICO_OBJETIVO] Devuelve: 1. Lista de pantallas principales necesarias. 2. Descripción del contenido y componentes clave de cada pantalla. 3. Resumen del flujo principal que sigue el usuario desde el inicio hasta la tarea completada.
# CONTEXTO: Eres un diseñador UX/UI senior especializado en productos digitales. Tu objetivo es definir una propuesta de interfaz de usuario clara, escalable y centrada en las tareas del usuario, apta para ser convertida en wireframes o maquetas de alta fidelidad. # INFORMACIÓN DEL USUARIO: - Tipo de aplicación (web, móvil o ambas): [PLATAFORMA] - Objetivo principal de la aplicación: [OBJETIVO_USUARIO] - Público objetivo: [PUBLICO_OBJETIVO] - Secciones o módulos clave de la app: [SECCIONES] - Estilo visual deseado (referencias o adjetivos): [ESTILO_VISUAL] # BLOQUES DE RESPUESTA: ## 1. Arquitectura de Información y Flujos Describe la estructura general de la aplicación y los flujos principales del usuario (inicio de sesión, tarea principal, gestión de cuenta, etc.). ## 2. Pantallas Clave y Componentes Presenta una tabla con las pantallas más importantes: | Pantalla | Objetivo principal | Componentes clave | Acciones del usuario | |---|---|---|---| ## 3. Jerarquía Visual y Navegación Explica cómo se organizan los elementos en cada pantalla (zonas prioritarias, llamadas a la acción, navegación superior/inferior o lateral) y qué patrón de navegación recomiendas. ## 4. Estados de Interfaz Críticos Incluye recomendaciones para estados de: - Pantalla vacía. - Carga. - Error. - Éxito o confirmación. ## 5. Consideraciones de Accesibilidad y Responsive Propón buenas prácticas básicas (contraste, tamaño de texto, áreas táctiles, mensajes claros) y cómo adaptar el diseño a diferentes tamaños de pantalla. # CRITERIOS DE CALIDAD: - Priorizar claridad y facilidad de uso sobre elementos decorativos. - Centrar el diseño en las tareas reales del usuario final. - Mantener consistencia entre pantallas y patrones de navegación.
# CONTEXTO: Eres un diseñador UX/UI en productos digitales. # INFORMACIÓN DEL USUARIO: - Tipo de aplicación (web, móvil o ambas): [PLATAFORMA] - Objetivo principal de la aplicación: [OBJETIVO_USUARIO] - Público objetivo: [PUBLICO_OBJETIVO] - Secciones o módulos clave de la app: [SECCIONES] - Estilo visual deseado (referencias o adjetivos): [ESTILO_VISUAL] # BLOQUES DE RESPUESTA: ## 1. Arquitectura de Información y Flujos # CRITERIOS DE CALIDAD: - Priorizar claridad y facilidad de uso sobre elementos decorativos. - Centrar el diseño en las tareas reales del usuario final.
Este prompt pertenece a la categoría de Programación y Código

¿Qué hace el prompt?

Versión Básica

  • Propone un layout básico de pantallas principales para una aplicación web o móvil.
  • Define la estructura general de navegación según el objetivo principal del usuario.
  • Sugiere componentes clave (botones, formularios, listas, tarjetas) en cada pantalla.
  • Incluye una breve descripción del flujo principal que debe seguir el usuario.

Versión Extendida

  • Propone un layout básico de pantallas principales para una aplicación web o móvil.
  • Define la estructura general de navegación según el objetivo principal del usuario.
  • Sugiere componentes clave (botones, formularios, listas, tarjetas) en cada pantalla.
  • Incluye una breve descripción del flujo principal que debe seguir el usuario.
  • Define arquitectura de información y flujos principales de la aplicación.
  • Propone layouts detallados con jerarquía visual clara y prioridades de contenido.
  • Incluye estados clave de la interfaz (vacío, carga, error, éxito).
  • Sugiere patrones de navegación y microcopys funcionales para cada pantalla.
  • Añade recomendaciones de accesibilidad básica y adaptación responsive.

Versión Eficiente

  • Define arquitectura de información y flujos principales de la aplicación
  • Propone layouts detallados con jerarquía visual clara y prioridades de contenido
  • Incluye estados clave de la interfaz (vacío, carga, error, éxito)

¿Cómo usar este prompt?

Versión Básica

  • Pega el prompt en tu modelo de IA favorito.
  • Completa las variables con tu contexto real:
  • [PLATAFORMA] Ej.: 'aplicación móvil'.
  • [OBJETIVO_USUARIO] Ej.: 'registrar gastos diarios de forma rápida'.
  • [PUBLICO_OBJETIVO] Ej.: 'adultos jóvenes sin experiencia contable'.
  • Ejecuta el prompt y usa la salida como base para tus primeros bocetos o wireframes.

Versión Extendida

  • Rellena las variables con tu contexto real:
  • [PLATAFORMA] Ej.: 'aplicación web y móvil (responsive)'.
  • [OBJETIVO_USUARIO] Ej.: 'organizar proyectos y tareas en equipo'.
  • [PUBLICO_OBJETIVO] Ej.: 'equipos pequeños de trabajo remoto'.
  • [SECCIONES] Ej.: 'panel principal, tablero de tareas, chat, ajustes de cuenta'.
  • [ESTILO_VISUAL] Ej.: 'minimalista, profesional, con acentos de color azul'.
  • Ejecuta el prompt y utiliza la salida como guía para crear wireframes detallados o pasársela a tu equipo de diseño y desarrollo.

Versión Eficiente

  • Rellena las variables con tu contexto real:
  • [PLATAFORMA] Ej.: 'aplicación web y móvil (responsive)'
  • [OBJETIVO_USUARIO] Ej.: 'organizar proyectos y tareas en equipo'
  • [PUBLICO_OBJETIVO] Ej.: 'equipos pequeños de trabajo remoto'

Tips

Versión Básica

  • Especifica si la aplicación es web o móvil para adaptar el layout.
  • Describe con claridad la tarea principal que el usuario debe completar.
  • Indica el tipo de público (novato, intermedio, experto) para ajustar la complejidad.
  • Si ya tienes referencias visuales, menciónalas para alinear el estilo general.

Versión Extendida

  • Detalla las secciones o módulos principales para obtener una arquitectura más precisa.
  • Indica el estilo visual deseado (minimalista, corporativo, juvenil, etc.).
  • Aclara si la aplicación debe funcionar primero en móvil (mobile first) o escritorio.
  • Puedes pedir que la salida se estructure en tablas para pasarla fácilmente a herramientas de diseño.

Versión Eficiente

  • Detalla las secciones o módulos principales para obtener una arquitectura más precisa
  • Indica el estilo visual deseado (minimalista, corporativo, juvenil, etc.)
  • Aclara si la aplicación debe funcionar primero en móvil (mobile first) o escritorio

¿Para quién es?

Es ideal para diseñadores de producto, desarrolladores front-end y emprendedores digitales que necesitan estructurar visualmente una app sin partir de cero. También es muy útil para equipos ágiles que buscan alinear rápido la experiencia de usuario antes de programar.

¿Qué problema resuelve?

Evita la parálisis del "folio en blanco" al comenzar a diseñar una interfaz. En lugar de perder horas imaginando dónde colocar los elementos, obtienes una guía clara con la estructura de pantallas, navegación y componentes clave, acelerando la creación de prototipos funcionales y reduciendo las iteraciones innecesarias.

Casos de uso prácticos

  • Definir las pantallas principales de una aplicación móvil de control de gastos para usuarios jóvenes.
  • Estructurar el layout de un dashboard web para que un administrador pueda visualizar métricas de negocio de un vistazo.
  • Crear el flujo de registro e inicio de sesión en una app de fitness, pensando para un público novato en tecnología.
  • Esbozar la interfaz de un carrito de compras en una tienda online, optimizando los pasos hasta la confirmación del pedido.

Consejos para mejores resultados

  • Indica claramente si es para web o móvil, ya que el espacio y la navegación cambian por completo.
  • Describe la tarea principal del usuario con una acción concreta, como "reservar una cita médica en menos de 3 pasos".
  • Si tienes referencias visuales de otras apps que te gusten, menciónalas para que el estilo final se alinee con lo que imaginas.