Usa el prompt
Añade tu encargo
Añade tu contexto a continuación. Se incluirá en el prompt cuando lo copies o descargues.
Crea un prototipo de aplicación editable y diseñado primero para móviles utilizando la arquitectura existente del proyecto para [PROJECT] y [AUDIENCE]. La tarea es: Registro de cuidados de mascotas.
Contenido y estructura obligatorios
Registra la alimentación, los paseos y las notas de cuidados proporcionadas por el dueño de varias mascotas; después, reúne en un solo lugar las preguntas y los documentos para las citas.
Pantallas y navegación
Crea tres vistas conectadas: Mascotas; Registro diario; Notas de citas. Mantén visible el registro seleccionado en el título o el resumen de la pantalla. Incluye una acción explícita para volver y conserva los datos en curso al pasar de una vista a otra. Coloca la acción principal cerca del contenido relevante y ten en cuenta las áreas seguras del móvil, un teclado virtual visible y las etiquetas traducidas largas. En anchos de escritorio, adapta la composición sin eliminar ningún paso ni cambiar la tarea.
Datos del proyecto
Usa [APPROVED_CONTENT] para los nombres, registros, etiquetas, cantidades y destinos. Solicita los datos que falten en lugar de inventar afirmaciones operativas. Los registros de demostración pueden usar la marca ficticia Companion; identifícalos como datos de muestra. 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 se completó una transacción, salvo que esa integración se haya implementado y probado explícitamente.
Dirección de diseño
Sigue [BRAND_RULES]. Si no se proporciona una marca, usa crema cálido, albaricoque, marrón chocolate y fotografías de retratos de mascotas. 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. Usa una escala de espaciado uniforme y una jerarquía de texto 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
- Mantén los registros vinculados a la mascota correcta y evita convertir las observaciones en consejos médicos o diagnósticos.
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 y contenido de referencia
Usa el archivo adjunto reference.webp como referencia visual para el Registro de cuidados de mascotas. Antes de crearlo, identifica las regiones principales de arriba abajo, sus anchuras y alturas relativas, la alineación, el espaciado, la jerarquía tipográfica, los colores de las superficies, los bordes, las imágenes y los componentes repetidos. Conserva esas relaciones en lugar de sustituirlas por una plantilla genérica. Contenido obligatorio de la tarea: registra la alimentación, los paseos y las notas de cuidados proporcionadas por el dueño de varias mascotas; después, reúne en un solo lugar las preguntas y los documentos para las citas. Usa las siguientes directrices de diseño específicas de la tarea al convertir la imagen en elementos editables: empieza con Mascotas como pantalla de entrada, asigna a Registro diario una acción principal clara y haz que Notas de citas explique qué ocurrió y qué puede suceder después. Usa crema cálido, albaricoque, marrón chocolate y fotografías de retratos de mascotas como punto de partida, adaptándolos a la marca proporcionada. Mantén visibles la identidad del registro y el contexto de navegación en las tres pantallas. Prioriza los controles accesibles con el pulgar y las etiquetas legibles frente a los paneles decorativos; en pantallas más anchas, mantén la coherencia del flujo de trabajo en lugar de estirar una composición móvil de borde a borde.
Dirección visual de los requisitos de ejemplo
crema cálido, albaricoque, marrón chocolate y fotografías de retratos de mascotas.
Especificación de las interacciones
La referencia es un concepto estático: el comportamiento que se describe a continuación es un requisito que debe implementarse, no una prueba de que la imagen ya funcione. Copia el prompt personalizado en tu proyecto y crea el flujo conectado: registra la alimentación, los paseos y las notas de cuidados proporcionadas por el dueño de varias mascotas; después, reúne en un solo lugar las preguntas y los documentos para las citas. Mantén los registros vinculados a la mascota correcta y evita convertir las observaciones en consejos médicos o diagnósticos. Para cada control visible, especifica su activador, el estado afectado y la respuesta; implementa los cambios locales con un estado coherente entre las vistas relacionadas. Haz que las búsquedas y los filtros produzcan resultados reales, que los controles de selección tengan un estado activo explícito y que las acciones de guardado muestren, cuando corresponda, indicaciones visibles de estado pendiente, correcto o fallido. No añadas flujos de trabajo ajenos. Usa enlaces adecuados para la navegación, botones para las acciones y nombres accesibles para los controles con iconos. No des a entender que una operación de backend se realizó correctamente cuando solo cambió una demostración local.
Comparación visual y entrega
- 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.
- Después, prueba el diseño estrecho sin comprimir el texto de escritorio en etiquetas diminutas.
- 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.
Descargar prompt + imagen
Incluye el prompt completo y la imagen de referencia a tamaño completo. Adjunta ambos en OpenDesign para orientar la composición.
Cómo redactar un prompt de diseño de un registro de cuidados de mascotas
Usa este prompt de diseño de un registro de cuidados de mascotas para registrar la alimentación, los paseos y las notas de cuidados aportadas por sus dueños para varias mascotas, y luego reunir en un solo lugar las preguntas y los documentos para las citas.
La referencia es un concepto generado por IA. Las instrucciones siguientes describen qué se debe crear y probar; la imagen no demuestra un comportamiento funcional.
Mantén cada registro asociado a la mascota correcta
Una aplicación de registro de cuidados de mascotas organiza las observaciones y rutinas de sus dueños.
La mascota seleccionada debe seguir siendo claramente visible al añadir un registro o recopilar preguntas para una cita. Empieza con Mascotas como pantalla de entrada, asigna una acción principal clara a Registro diario y haz que Notas de la cita explique qué ocurrió y qué puede suceder después. Usa crema cálido, albaricoque, marrón chocolate y fotografías de retratos de mascotas como punto de partida, adaptándolos a la marca proporcionada. Mantén visibles la identidad del registro y el contexto de navegación en las tres pantallas. Prioriza los controles accesibles con el pulgar y las etiquetas legibles frente a los paneles decorativos; en pantallas más anchas, mantén la coherencia del flujo de trabajo en lugar de estirar una composición móvil de borde a borde.
Del prompt
Crea tres vistas conectadas: Mascotas; Registro diario; Notas de la cita.
Personalízalo
Muestra [PETS] con historiales separados de alimentación, paseos y cuidados. Asocia las notas y los documentos a la mascota seleccionada, y recopila las preguntas para las citas sin interpretar los síntomas.
Prepara el contenido del registro de cuidados de mascotas
El registro diario agrupa distintos registros de cuidados bajo una misma mascota y fecha seleccionadas; describe los campos de cada tipo de registro.
Prepara perfiles separados para al menos dos mascotas, con ejemplos de alimentación, paseos y notas de sus dueños. Incluye preguntas y documentos para las citas, y define cómo se comporta una entrada sin terminar cuando cambia la mascota seleccionada.
Del prompt
Registra la alimentación, los paseos y las notas de cuidados proporcionadas por el dueño de varias mascotas; después, reúne en un solo lugar las preguntas y los documentos para las citas.
Personalízalo
Para [PROJECT], usa [APPROVED_CONTENT] como fuente de este registro de cuidados de mascotas. Incluye los registros y las etiquetas de campo aprobados para Mascotas; Registro diario; Notas de la cita; las reglas de acciones y persistencia; los recursos de marca y los requisitos de permisos. Identifica los datos que falten antes de sustituirlos por contenido de demostración.
Cambia de mascota durante la introducción de datos
Las preguntas y los documentos aparecen debajo de los detalles de la cita; consérvalos como notas del propietario y evita presentar la interfaz como si fuera un diagnóstico.
Evita que una nota sin terminar se guarde en el perfil equivocado. Las observaciones deben seguir siendo registros introducidos por los dueños y no convertirse en diagnósticos. Prueba primero este límite específico: mantén los registros asociados a la mascota correcta y evita convertir las observaciones en consejos médicos o diagnósticos. Después, ejecuta el flujo principal con un título de registro largo, sin registros guardados y con una acción fallida. El usuario debe poder distinguir qué está guardado, qué está pendiente y qué se puede deshacer sin depender del color. Verifica que volver a la pantalla anterior conserve los datos introducidos y que un lector de pantalla encuentre el título, el estado y la acción principal en un orden lógico.
Del prompt
Mantén los registros vinculados a la mascota correcta y evita convertir las observaciones en consejos médicos o diagnósticos.
Personalízalo
Revisa el registro de cuidados de mascotas conforme a este requisito: mantén los registros asociados a la mascota correcta y evita convertir las observaciones en consejos médicos o diagnósticos. Prueba primero este límite específico: mantén los registros asociados a la mascota correcta y evita convertir las observaciones en consejos médicos o diagnósticos. Después, ejecuta el flujo principal con un título de registro largo, sin registros guardados y con una acción fallida. El usuario debe poder distinguir qué está guardado, qué está pendiente y qué se puede deshacer sin depender del color. Verifica que volver a la pantalla anterior conserve los datos introducidos y que un lector de pantalla encuentre el título, el estado y la acción principal en un orden lógico. Conserva el contenido aprobado y revisa únicamente las partes que no superen esta comprobación.
Revisa el resultado de tu registro de cuidados de mascotas
El ejemplo es un concepto visual generado por IA. Los servicios conectados, los permisos del dispositivo y los datos persistentes requieren implementación y pruebas por separado.
- Mantén los registros vinculados a la mascota correcta y evita convertir las observaciones en consejos médicos o diagnósticos.
Prompt de seguimiento
Úsalo después del primer resultado. Centra la revisión en la parte más importante de esta tarea.
Perfecciona únicamente la transición de Registro diario a Notas de citas. Mantén los registros vinculados a la mascota correcta y evita convertir las observaciones en consejos médicos o diagnósticos. Muestra los estados relevantes de pendiente, error y completado con etiquetas explícitas. Conserva la navegación, la tipografía y las demás pantallas aprobadas. Devuelve las vistas modificadas y describe cómo se conservan los datos introducidos durante un reintento.
