Prompt de diseño de una agenda complementaria para eventos

Crea un prototipo de aplicación editable y diseñado primero para dispositivos móviles con la infraestructura actual del proyecto para [PROJECT] y [AUDIENCE]. La tarea es: agenda complementaria del evento.

Contenido y estructura obligatorios

Explora las sesiones por hora y categoría, crea una agenda personal y muestra los conflictos, los cambios de sala y los avisos del evento.

Pantallas y navegación

Crea tres vistas conectadas: Agenda; Detalles de la sesión; Mi día. Mantén visible el registro seleccionado en el título o el resumen de la pantalla. Admite una acción explícita para volver y conserva los datos introducidos que estén en curso al cambiar de vista. Mantén la acción principal cerca del contenido pertinente y ten en cuenta las áreas seguras de los dispositivos móviles, un teclado virtual visible y las etiquetas traducidas largas. En anchos de escritorio, adapta la composición sin eliminar pasos ni cambiar la tarea.

Datos del proyecto

Utiliza [APPROVED_CONTENT] para nombres, registros, etiquetas, cantidades y destinos. Solicita los datos que falten en lugar de inventar afirmaciones operativas. Los registros de demostración pueden utilizar la marca ficticia Gather; etiquétalos como datos de ejemplo. Explica qué acciones son interacciones locales del prototipo y cuáles requerirían autenticación, persistencia, permisos o un backend. No conectes servicios externos ni afirmes que una transacción se completó, salvo que esa integración se haya implementado y probado explícitamente.

Dirección de diseño

Sigue [BRAND_RULES]. Cuando no se proporcione una marca, utiliza negro, blanco, amarillo ácido y una tipografía de conferencia en negrita. Haz que el flujo de trabajo sea reconocible por su propio contenido y sus controles, en lugar de repetir tarjetas genéricas de panel de control. Utiliza una escala de espaciado coherente y una jerarquía textual clara. Incluye un foco de teclado visible, nombres accesibles, contraste suficiente y etiquetas de estado que no dependan del color. Respeta la preferencia de movimiento reducido y mantén opcionales las transiciones animadas.

Comprobación de aceptación específica de la tarea

• Muestra explícitamente las sesiones guardadas que se solapen y los cambios de zona horaria, en lugar de eliminar selecciones sin avisar.

Estados de interacción

Implementa el recorrido ideal de tres pantallas con datos de muestra locales. Incluye un estado vacío útil, validación antes de completar una acción, un estado de carga o pendiente y un estado de error recuperable. Los cambios destructivos requieren una opción de revisión o deshacer. Mantén el estado de cada registro coherente en las tres vistas. No descartes silenciosamente datos introducidos parcialmente ni cambies la elección de una persona después de reintentar.

Entrega y revisión

Entrega las vistas editables de la aplicación y explica el modelo de datos, cualquier comportamiento de almacenamiento local y las integraciones no implementadas. Prueba a 320px y en un área de visualización más ancha, con navegación mediante teclado y contenido largo. Usa la comprobación de aceptación específica de la tarea anterior para revisar el resultado antes de añadir funciones. Mantén el comportamiento de demostración claramente diferenciado de un servicio de producción en funcionamiento.

Archivo de referencia y objetivo de reconstrucción

Adjunta reference.webp, incluido en el paquete de descarga de este prompt, junto con el prompt en OpenDesign. Crea un resultado editable con una composición y jerarquía similares; no incrustes la imagen de referencia completa como interfaz final. Conserva el contenido aprobado del proyecto y las reglas de marca si entran en conflicto con las etiquetas ficticias de ejemplo. Si la imagen falta o no se puede leer, solicítala en lugar de afirmar que existe fidelidad visual.

Composición de referencia: tres pantallas conectadas de la aplicación

La imagen adjunta muestra Gather, una aplicación ficticia para conferencias, como tres pantallas móviles del mismo ancho sobre un fondo de presentación amarillo ácido pálido. Crea Agenda, Detalles de la sesión y Mi día como vistas conectadas de la aplicación. No representes el montaje de tres pantallas como una sola página ni utilices toda la referencia como fondo. En anchos móviles, muestra una vista cada vez. Una vista previa más ancha puede mostrar las vistas una junto a otra para compararlas, pero la aplicación funcional debe conservar su navegación y estado.

Pantalla Agenda

Utiliza un lienzo casi blanco con un borde exterior fino y oscuro. El encabezado combina un logotipo tipográfico Gather negro y de gran peso a la izquierda con información compacta sobre las fechas y el recinto del evento a la derecha, además de un icono de búsqueda. Debajo, coloca un título Agenda de gran tamaño y en negrita, seguido de una breve introducción de una sola línea. Añade un selector de fechas de tres columnas para mar. 14 oct., mié. 15 oct. y jue. 16 oct.; la fecha seleccionada aparece en amarillo ácido y las demás, en blanco con separadores claros. Debajo, incluye los filtros Todas las categorías y Todos los tipos, junto con un control compacto de vista de lista. La lista principal utiliza una columna de hora estrecha, una barra vertical con el color de la categoría y, a continuación, una etiqueta de categoría en mayúsculas, el título de la sesión en negrita y una etiqueta de sala más pequeña. Cada fila tiene una acción circular con el signo más alineada a la derecha y un fino divisor horizontal. Las categorías ilustradas utilizan azul, amarillo, rosa, verde y morado; muestra también sus nombres para que el color no sea la única señal. La navegación inferior es negra e incluye Agenda, Mi día, Avisos y Más; el icono y la etiqueta activos aparecen en amarillo.

Pantalla Detalles de la sesión

Contrasta la vista de lista clara con una superficie de detalle casi negra. Distribuye los controles de volver, marcar y compartir por la parte superior. Usa una fotografía sutil de una conferencia detrás de la sección superior, con una superposición oscura que mantenga el contraste del texto. Muestra una pequeña etiqueta amarilla PRODUCT, un gran título amarillo Design Systems at Scale en dos líneas y una línea de apoyo blanca. Debajo, coloca los metadatos de calendario/hora y recinto/sala en dos columnas con iconos de contorno. Continúa con etiquetas temáticas de contorno fino, una descripción breve y una fila del ponente con retrato circular, nombre, cargo, organización y flecha de despliegue. Usa un botón ancho en amarillo ácido Guardar en Mi día y, después, un botón oscuro de contorno Añadir al calendario. Un separador introduce Sesiones relacionadas, con una pequeña acción Ver todo y filas compactas de sesiones. Mantén clara la ruta de navegación para volver; no inventes ponentes reales ni recomendaciones al sustituir los datos de demostración.

Pantalla Mi día

Vuelve a la superficie casi blanca y repite el encabezado de Gather, la fecha, el recinto y el icono de ajustes. Usa un encabezado grande Mi día y un subtítulo breve. Un banner de notificación amarillo pálido contiene una campana, el título en negrita Cambio de zona horaria, un texto de apoyo y un control para descartarlo. Debajo, muestra Mi agenda, Conflictos (1) y Avisos (2) como tres segmentos; el segmento seleccionado es negro con texto blanco. Las sesiones guardadas reutilizan la estructura de las filas del horario. Una sesión solapada usa un panel rosa pálido, la hora y el indicador de la categoría en rojo, una etiqueta explícita Se solapa con una sesión guardada y un control Conservar ambas. Un cambio de recinto aparece como una línea roja Cambio de sala: B1 → B2. Repite la navegación inferior negra con Mi día activo y una insignia amarilla con el recuento en Avisos.

Jerarquía visual y tokens

Usa una tipografía grotesca neutra y pesada para el logotipo tipográfico y los títulos grandes, una sans serif legible para el cuerpo y los controles, superficies principales negras y casi blancas, y amarillo ácido para las acciones principales y los estados seleccionados. Parte de una escala de espaciado de 8px, un relleno horizontal de página de 16–24px, objetivos táctiles mínimos de 44px y un contraste marcado entre títulos, cuerpo y metadatos. Trátalos como valores iniciales de implementación, no como especificaciones exactas medidas en píxeles. Conserva el horario compacto de la captura, el título de detalle en negrita y el contraste claro entre superficies claras y oscuras. Usa fotografías de conferencias originales o con licencia y un retrato ficticio del ponente; mantén las etiquetas como texto editable. Los controles redondeados de este ejemplo forman parte de la referencia visual de Gather y son independientes de los botones del sitio de la biblioteca de prompts.

Contrato de interacción y datos — implementar y verificar

Usa registros locales de demostración con identificadores de sesión estables, título, categoría, tipo, inicio/fin en UTC, zona horaria del evento, sala, previousRoom, ponente y estado de guardado. Mantén explícitos selectedDate, searchQuery, los filtros de categoría/tipo, savedSessionIds y dismissedNoticeIds. La imagen es conceptual: sus fechas y la redacción de la zona horaria no constituyen un horario oficial del evento. Corrige las fechas incoherentes de la demostración sin alterar la jerarquía mostrada. Al seleccionar un día, se actualizan el resaltado de la fecha y la lista. La búsqueda encuentra coincidencias en los nombres de las sesiones y los ponentes; los filtros se combinan y ofrecen un estado vacío útil y una acción para borrarlos. Al abrir una fila, se muestra el detalle de esa misma sesión; Volver restaura la lista anterior, los filtros y la posición de desplazamiento. Los controles de suma y Guardar en Mi día guardan exactamente una vez la misma sesión y cambian a un estado guardado claro. Al eliminarla, Mi día y los avisos se actualizan de forma coherente. Detecta solapamientos con startA < endB y startB < endA en las sesiones guardadas de la misma fecha. Muestra una advertencia y ambos registros; Conservar ambas confirma el conflicto sin eliminar silenciosamente ninguna selección. Conflictos muestra los pares afectados y enlaza con sus detalles. Un cambio de zona horaria convierte los mismos instantes UTC a la zona horaria con nombre elegida, actualiza las fechas y horas mostradas y vuelve a calcular la agrupación; no debe alterar la duración real de los eventos. Mantén visible una etiqueta de zona horaria y una explicación que pueda descartarse. Un aviso de cambio de sala muestra la sala anterior y la nueva; descartar el aviso no revierte la sala nueva. Para Añadir al calendario, proporciona un archivo de calendario local válido o etiqueta claramente la acción como demostración; no se presupone ninguna conexión con un calendario externo. Compartir puede usar la hoja para compartir de la plataforma con la opción alternativa de copiar el enlace. Marcar, descartar notificaciones y navegar requieren un foco de teclado visible y nombres accesibles. Mantén las acciones principales accesibles por encima del área segura móvil. Incluye estados sin sesiones guardadas, sin resultados coincidentes y de fallo de almacenamiento recuperable. No implementes pagos, creación de cuentas ni actualizaciones del evento en tiempo real, salvo que se soliciten por separado.

Comparación visual y entrega

1. Compara el resultado con la imagen adjunta usando las mismas proporciones. Revisa la ubicación de las regiones principales, los tamaños relativos de las imágenes, los saltos de línea, el espaciado, la jerarquía tipográfica, el contraste, los estados activos y la densidad del contenido antes de perfeccionar los detalles decorativos.
2. Después, prueba el diseño estrecho sin comprimir el texto de escritorio en etiquetas diminutas.
3. Mantén los logotipos, las fotos y los iconos como recursos independientes y todas las etiquetas relevantes editables. Enumera las fuentes o los recursos no disponibles y cualquier desviación deliberada. Devuelve los archivos funcionales junto con una descripción concisa del comportamiento implementado y las integraciones pendientes; no prometas un resultado idéntico píxel a píxel basándote únicamente en el prompt.