Prompts para Google Stitch

Diseña la interfaz completa de “Veterinaria Huella”, una clínica para perros y gatos ubicada en Pachuca, Hidalgo. El producto incluye una landing pública, un flujo de reservas sin cuenta, páginas de acciones desde correo y un panel privado para veterinarios.

La experiencia debe sentirse moderna, alegre, familiar, cercana y profesional. Evita una apariencia hospitalaria fría, infantil o excesivamente decorada.

Sistema visual:
- Color principal: verde azulado #0F766E.
- Fondo suave: #FFFDF8.
- Superficies secundarias: menta clara #DFF7F3.
- Acento principal: coral #FF7A66.
- Acento secundario: amarillo cálido #F6C85F.
- Texto principal: #20333A.
- Éxito: #2E9D64.
- Advertencia: #D98E04.
- Error: #C94B4B.
- Tipografía de títulos: Nunito Sans, peso 700 u otra sans serif redondeada equivalente.
- Tipografía de contenido: Inter u otra sans serif altamente legible.
- Bordes redondeados de 12 a 18 píxeles.
- Sombras suaves y discretas.
- Espaciado generoso en el área pública y densidad media en el panel.
- Iconografía lineal simple.
- Estados comprensibles sin depender únicamente del color.

Crea un logotipo provisional con las iniciales VH y una referencia sutil a una huella o corazón, sin repetir huellas como decoración en toda la interfaz.

Usa fotografías provisionales luminosas de perros, gatos y profesionales veterinarios en ambientes tranquilos. Evita procedimientos médicos explícitos, animales angustiados y fotografías oscuras.

Diseña primero para computadora, manteniendo una adaptación completa para móvil y tableta. En móvil utiliza una sola columna, botones amplios y navegación compacta. Los formularios deben conservar etiquetas visibles y mensajes de error próximos a cada campo.

El botón principal “Agendar una cita” debe tener jerarquía consistente. El botón secundario será “Consultar disponibilidad”.

Mantén el mismo encabezado, navegación, paleta, tipografía, espaciado, botones, campos, tarjetas, estados, iconos y estilo fotográfico en todas las pantallas.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado, componentes, iconografía y estilo fotográfico. Diseña únicamente la landing pública de Veterinaria Huella.

Incluye un encabezado con logotipo VH, enlaces a Servicios, Equipo, Horarios, Preguntas frecuentes y Contacto, además de un botón destacado “Agendar una cita”.

Crea una sección principal con el título “Cuidado cercano para quienes dejan huella”, el texto “Atención veterinaria para perros y gatos, con reservas sencillas y un equipo que trata a cada mascota como parte de la familia”, un botón “Agendar una cita” y otro “Consultar disponibilidad”. Acompáñala con una fotografía luminosa de un perro, un gato y una veterinaria en un ambiente amable.

Añade una sección de servicios con cinco tarjetas:
- Consulta general, 30 min, $433 MXN.
- Vacunación, 20 min, $347 MXN.
- Desparasitación, 15 min, $260 MXN.
- Control y seguimiento, 20 min, $312 MXN.
- Urgencia, 40 min, $693 MXN.

Cada tarjeta debe mostrar nombre, descripción breve, duración, precio y una acción para reservar.

Incluye una sección “Por qué elegirnos” con tres beneficios: reservas sencillas, atención cercana e información clara.

Añade la sección de equipo con una tarjeta provisional para la Dra. Valeria Soto, especialidad Medicina preventiva y consulta general, fotografía cuadrada y una biografía breve.

Muestra los horarios:
- Lunes a viernes, 9:00 a 19:00.
- Sábado, 9:00 a 14:00.
- Domingo, cerrado.
- Urgencias dentro del mismo horario.

Incluye cuatro preguntas frecuentes:
- ¿Necesito crear una cuenta para reservar?
- ¿Cómo cancelo una cita?
- ¿Atienden perros y gatos?
- ¿El pago se realiza en línea?

Añade una sección de contacto con dirección, teléfono, correo, tarjeta de mapa y botones de acción. Utiliza los datos provisionales aprobados.

Diseña un pie de página con enlaces de privacidad, contacto, acceso para veterinarios y aviso de que el chatbot no sustituye una valoración profesional.

Coloca un botón flotante del chatbot en la esquina inferior derecha. En móvil, muestra una navegación compacta y un botón de reserva persistente sin cubrir contenido.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado, componentes, iconografía y estilo fotográfico. Diseña únicamente la página de reserva sin cuenta.

Crea un flujo de cuatro pasos:
1. Servicio.
2. Fecha y hora.
3. Tus datos y mascota.
4. Revisar y confirmar.

En el primer paso muestra tarjetas seleccionables con los cinco servicios, precios y duraciones aprobados.

En el segundo paso incluye calendario, fecha seleccionada y horarios disponibles en intervalos de 15 minutos. Añade estados visibles de carga, sin disponibilidad y horario ocupado. Explica que se requiere una anticipación mínima de dos horas y que el veterinario se asignará automáticamente.

En el tercer paso incluye campos con etiquetas visibles:
- Nombre del cliente.
- Correo electrónico.
- Nombre de la mascota.
- Especie con opciones Perro y Gato.
- Raza.
- Motivo de consulta.

En el cuarto paso presenta un resumen claro con servicio, duración, precio, fecha, hora, mascota y aviso de pago directo en la clínica. Incluye una casilla para aceptar el aviso de privacidad y la política de cancelación.

Usa botones “Continuar”, “Volver” y “Confirmar cita”. Desactiva la confirmación mientras se procesa para evitar envíos duplicados.

Diseña estados para formulario incompleto, correo inválido, horario perdido antes de confirmar, reserva en proceso, reserva confirmada y error técnico.

En móvil usa una sola columna, resumen compacto y botones de ancho completo.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado, componentes, iconografía y estilo fotográfico. Diseña únicamente la pantalla de confirmación de reserva.

Muestra un estado de éxito con el título “Tu cita está confirmada” y una tarjeta con servicio, mascota, fecha, hora, duración, precio y forma de pago en clínica.

Añade el mensaje “Enviamos los detalles y el enlace de cancelación a tu correo”. Incluye acciones “Agregar al calendario” y “Volver al inicio”.

Muestra un aviso claro: “Puedes cancelar desde el correo hasta dos horas antes de la cita”.

Diseña una variante donde la cita está confirmada pero el correo todavía está pendiente, sin presentar la reserva como fallida. Incluye los datos de contacto de la clínica como alternativa.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado, componentes, iconografía y estilo fotográfico. Diseña únicamente la plantilla de página para acciones iniciadas desde un correo.

Crea variantes consistentes para:
- Confirmar cancelación.
- Cancelación completada.
- Aceptar una reprogramación.
- Rechazar una reprogramación.
- Nueva fecha confirmada.
- Cita cancelada por rechazo.
- Enlace vencido.
- Enlace ya utilizado.
- Acción no disponible por faltar menos de dos horas.

Antes de una acción irreversible, muestra los datos de la cita y un botón explícito de confirmación. Después de procesarla, muestra el estado final sin volver a ofrecer la misma acción.

Utiliza mensajes directos, una única acción principal por estado y un enlace secundario para volver a la landing o contactar con la clínica.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado, componentes, iconografía y estilo fotográfico. Diseña únicamente el inicio de sesión para veterinarios.

Crea una pantalla centrada y profesional con logotipo, título “Acceso para veterinarios”, campo de correo, campo de contraseña, opción para mostrar la contraseña, botón “Iniciar sesión” y enlace “Recuperar contraseña”.

Incluye estados de envío, credenciales incorrectas, demasiados intentos y error temporal. Los mensajes no deben confirmar si un correo está registrado.

Añade una nota discreta: “Las cuentas son creadas por la clínica”. No incluyas registro público.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado, componentes, iconografía y estilo fotográfico. Diseña únicamente el flujo de recuperación de contraseña.

Incluye tres estados:
- Solicitar enlace mediante correo.
- Confirmación genérica de que se enviaron instrucciones si la cuenta existe.
- Crear una nueva contraseña.

La nueva contraseña debe mostrar requisitos, confirmación y medidor sencillo de seguridad. Incluye variantes para enlace vencido, enlace inválido, contraseña actualizada y error temporal.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado y componentes. Diseña únicamente el panel privado de citas del veterinario.

Usa navegación lateral con Citas, Disponibilidad, Mi perfil y Cerrar sesión. En la parte superior muestra el nombre y fotografía del veterinario autenticado.

La vista principal debe mostrar:
- Título “Mis citas”.
- Selector de fecha.
- Resumen con total del día, próximas, pendientes de reprogramación y correos fallidos.
- Lista o tabla ordenada por hora.
- Hora, mascota, cliente, servicio, duración, estado y acción “Ver detalle”.

Usa etiquetas diferenciadas para Confirmada, Pendiente de reprogramación, Cancelada, Completada y No asistió.

Incluye estados de carga, sin citas, error y actualización exitosa. En móvil sustituye la tabla por tarjetas y conserva el selector de fecha visible.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado y componentes. Diseña únicamente el detalle de una cita y el flujo de reprogramación.

El detalle debe mostrar cliente, correo, mascota, especie, raza, motivo, servicio, precio, fecha, hora, duración, estado e historial breve de cambios.

Incluye acciones según estado:
- Marcar completada.
- Marcar no asistió.
- Reprogramar.
- Cancelar.

Las acciones destructivas deben abrir una confirmación clara.

En reprogramación muestra la fecha y hora actuales, calendario, horarios disponibles del mismo veterinario y un resumen del cambio. Explica que el cliente tendrá dos horas para aceptar o rechazar y que ambos horarios quedarán reservados temporalmente.

Incluye estados sin disponibilidad, conflicto al guardar, propuesta enviada, propuesta ya existente y correo fallido. No permitas seleccionar una hora con menos de dos horas de anticipación.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado y componentes. Diseña únicamente la sección de disponibilidad del veterinario.

Incluye calendario mensual, resumen del horario general y una vista del día seleccionado.

Permite crear:
- Bloqueo de día completo.
- Bloqueo de un rango de horas.
- Motivo opcional.

Muestra los bloqueos existentes y la acción “Reabrir horario”.

Diseña estados de guardado, eliminación, conflicto con citas existentes y error. Cuando exista un conflicto, muestra las citas afectadas y evita confirmar el bloqueo hasta resolverlas.

Utiliza colores accesibles y patrones o iconos para distinguir citas, bloqueos y horarios libres.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado y componentes. Diseña únicamente la sección Mi perfil.

Incluye fotografía cuadrada, nombre y especialidad. Añade vista previa de cómo aparecerá el perfil en la landing.

Muestra requisitos de imagen: JPG, PNG o WebP, máximo 5 MB y recorte cuadrado.

Incluye estados de carga, guardado, error de formato, imagen demasiado grande y cambios guardados. El veterinario no debe ver opciones para editar otros perfiles.

Basándote en los diseños ya generados, no alteres el sistema visual aprobado: conserva paleta, tipografía, espaciado y componentes. Diseña únicamente el chatbot flotante de atención.

Crea un panel expandible con el saludo “Hola, soy el asistente de Veterinaria Huella. Puedo ayudarte con servicios, precios, horarios, disponibilidad y reservas”.

Añade accesos rápidos:
- Ver servicios.
- Consultar precios.
- Revisar horarios.
- Consultar disponibilidad.
- Agendar una cita.

Diseña mensajes del usuario y del asistente, indicador de escritura, carga, error temporal y disponibilidad encontrada. Cuando muestre un horario, aclara que no queda reservado hasta terminar el formulario.

Para preguntas médicas, utiliza un aviso visible: “No puedo diagnosticar ni recomendar tratamientos. Si consideras que es urgente, contacta de inmediato con la clínica”.

Cuando no pueda resolver una consulta, muestra un formulario dentro del chat con nombre, correo, teléfono y mensaje, casilla de consentimiento y botón “Enviar al equipo”. Incluye estados de envío correcto y error.

En móvil el chatbot debe abrirse como panel de altura completa y mantener visible el botón para cerrarlo.