Prompts Maestros logo
Prompts Workflows PRO

Prompt para 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.
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.

¿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.

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.