Contexto: Videos de demo para Gerardo Reyna mostrando el avance de la plataforma. Videos cortos por sección, narración en vivo. Desktop para nutriólogo, mobile para portal paciente.
01
Login + Dashboard
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Abrir la app, mostrar /login | "Gerardo, te voy a mostrar el avance de tu plataforma. Empezamos con el login." |
| 0:10 | Mostrar campos email y contraseña | "Ingresas con tu correo y contraseña. También hay opción de recuperar contraseña." |
| 0:25 | Escribir credenciales y dar click en Iniciar Sesión | "Ponemos las credenciales..." |
| 0:35 | Login exitoso, redirige a /dashboard | "Y entramos directo al dashboard." |
| 0:45 | Recorrido rápido del dashboard: KPIs arriba | "Aquí ves tus números clave: total de pacientes, planes activos, adherencia." |
| 1:00 | Scroll a alertas y citas del día | "Alertas de pacientes que necesitan atención y tus citas de hoy." |
| 1:15 | Mostrar gráficas y actividad reciente | "Gráficas de métricas y la actividad reciente de tu clínica." |
02
Crear Paciente + QR + Onboarding
Este video muestra el flujo completo: nutriólogo crea paciente, genera QR, y luego se ve lo que el paciente experimenta al escanear.
Parte A Crear Paciente (Desktop) ~2 min
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Click "Pacientes" en sidebar | "Ahora vamos a crear un paciente nuevo desde cero." |
| 0:10 | En /pacientes, click boton "Nuevo" (+) | "Damos click en Nuevo..." |
| 0:15 | Se abre el modal CrearPacienteModal | "Se abre el formulario de nuevo paciente." |
| 0:20 | Llenar Nombre completo | "Ponemos el nombre del paciente." |
| 0:30 | Llenar Email y Teléfono | "Su correo y teléfono de contacto." |
| 0:40 | Llenar Edad, Peso, Estatura | "Datos básicos: edad, peso y estatura." |
| 0:55 | Seleccionar Género y Objetivo | "Seleccionamos género y su objetivo: puede ser pérdida de peso, ganancia muscular, mantenimiento o salud general." |
| 1:10 | Seleccionar Fecha de Nacimiento | "La fecha de nacimiento." |
| 1:20 | Click "Guardar" | "Guardamos y listo, el paciente queda registrado." |
| 1:30 | Redirige al perfil del paciente /pacientes/[id] | "Entramos directo a su perfil. Aquí ves todas las pestanas: resumen, expediente, mediciones, planes, pagos, historial, cuestionarios y archivos." |
| 1:45 | Mostrar brevemente el tab Resumen | "En resumen ves sus datos básicos y estado actual." |
Parte B Generar QR y Enviar Acceso (Desktop) ~1.5 min
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 2:00 | En el header del paciente, click boton "QR" | "Ahora le vamos a dar acceso. Click en QR..." |
| 2:10 | Se abre diálogo con código QR (240x240) | "Se genera un código QR único para este paciente." |
| 2:20 | Mostrar el QR y la URL generada | "Este QR contiene un enlace único que lleva al registro del paciente." |
| 2:30 | Click "Copiar enlace" | "Puedes copiar el enlace para enviarlo por WhatsApp o donde quieras." |
| 2:40 | Cerrar diálogo QR | "También existe la opción de Enviar Acceso..." |
| 2:45 | Click boton "Enviar Acceso" | "...que manda un correo automatico." |
| 2:55 | Mostrar modal con mensaje personalizable | "Puedes personalizar el mensaje que recibe el paciente. Incluye sus credenciales y el enlace." |
| 3:10 | Click "Enviar Acceso" | "Lo enviamos..." |
| 3:15 | Mostrar animacion de envio y luego checkmark de exito | "Y listo, el paciente recibe el correo con su acceso." |
Parte C Onboarding del Paciente (Mobile) ~3.5 min
Cambiar a vista mobile (Chrome DevTools iPhone 14 Pro) o grabar en celular.
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 3:30 | Abrir el enlace del QR en mobile | "Ahora veamos que pasa cuando el paciente escanea el QR o abre el enlace." |
| 3:40 | Se carga /onboarding/[token], validación del token | "El enlace valida el token y carga los datos que ya capturaste como nutriólogo." |
| 3:50 | Paso 1 - Crear Cuenta: nombre y email pre-llenados | "Paso 1: crear cuenta. El nombre y correo ya vienen pre-llenados. Solo necesita poner su contraseña." |
| 4:05 | Escribir contraseña, mostrar validación en tiempo real | "Las reglas de contraseña se validan en tiempo real: 8 caracteres, una mayúscula, un número." |
| 4:20 | Click Continuar | "Continuamos..." |
| 4:25 | Paso 2 - Datos Personales: fecha nacimiento, género pre-llenados | "Datos personales, ya viene pre-llenada la información que capturaste." |
| 4:35 | Click Continuar | "Siguiente..." |
| 4:40 | Paso 3 - Composición Corporal: peso y estatura pre-llenados | "Composición corporal, peso y estatura ya estan. El paciente puede actualizar si cambio algo." |
| 4:50 | Click Continuar | "Siguiente..." |
| 4:55 | Paso 4 - Historial Clínico | "Historial clínico: condiciones médicas, alergias, medicamentos." |
| 5:10 | Click Continuar | "Siguiente..." |
| 5:15 | Paso 5 - Actividad Fisica | "Nivel de actividad fisica, frecuencia de ejercicio, deportes que practica." |
| 5:30 | Click Continuar | "Siguiente..." |
| 5:35 | Paso 6 - Perfil Alimenticio | "Perfil alimenticio: preferencias, restricciones, alergias alimentarias." |
| 5:50 | Click Continuar | "Siguiente..." |
| 5:55 | Paso 7 - Cocina | "Preferencias de cocina: habilidad, tiempo disponible, si quiere variedad o lo mismo cada dia." |
| 6:10 | Click Continuar | "Siguiente..." |
| 6:15 | Paso 8 - Revision | "Y al final, una revision completa de todo lo que capturo." |
| 6:25 | Scroll por las secciónes colapsables | "Cada sección es expandible. Si algo está mal, puede regresar a editar." |
| 6:40 | Click boton final "Crear Cuenta" | "Da click en crear cuenta..." |
| 6:50 | Redirige a /portal | "Y entra directo a su portal de paciente. Listo para recibir su plan nutricional." |
Nota: Si el paciente es mujer, se agrega un paso extra de "Salud Femenina" entre Historial Clínico y Actividad Fisica (9 pasos en total).
03
Gestión de Pacientes
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | En /pacientes, mostrar vista tarjetas | "Veamos las vistas de pacientes. Por defecto ves tarjetas con nombre, objetivo, último contacto y estado." |
| 0:15 | Usar buscador | "Buscas por nombre rápidamente." |
| 0:25 | Abrir filtros avanzados | "Filtras por objetivo, estado, etiquetas o prioridad." |
| 0:40 | Cambiar a vista tabla | "Vista tabla para algo más compacto." |
| 0:55 | Cambiar a vista Kanban | "Y la vista Kanban: pacientes organizados por etapa del pipeline - nuevo, contactado, agendado, pendiente dieta, en seguimiento, completado." |
| 1:20 | Click en un paciente con datos | "Entramos a un paciente que ya tiene información." |
| 1:30 | Tab Resumen | "Resumen con datos personales y métricas." |
| 1:45 | Tab Expediente | "Expediente medico completo: historial, alergias, medicamentos." |
| 2:00 | Tab Mediciones | "Mediciones: peso, circunferencias, graficas de progreso." |
| 2:15 | Tab Planes | "Planes nutricionales activos e históricos." |
| 2:30 | Recorrer tabs restantes rápido | "También tienes pagos, historial de actividad, cuestionarios y archivos." |
04
Crear Plan Nutricional
La funcionalidad estrella de la plataforma.
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Desde perfil de paciente, click "Crear Plan" | "Ahora el proceso estrella: crear un plan nutricional. Son 5 pasos." |
| 0:15 | Paso 0 - Verificación de datos | "Primero verifica los datos del paciente: peso, talla, edad, actividad." |
| 0:35 | Paso 1 - Dietocálculo | "Paso 1: calcular el gasto energético." |
| 0:45 | Seleccionar formula TMB | "Eliges entre 3 formulas: Mifflin-St Jeor, Harris-Benedict o FAO/OMS." |
| 1:00 | Mostrar cálculo de TMB | "La TMB se calcula automáticamente con los datos del paciente." |
| 1:15 | Ajustar factor de actividad | "Ajustas el factor de actividad y ves el GET: gasto energético total." |
| 1:30 | Definir calorías objetivo | "Defines las calorías objetivo: déficit para bajar, mantenimiento o superávit para subir." |
| 1:50 | Paso 2 - Grupos de Alimentos | "Paso 2: macronutrientes." |
| 2:00 | Mover sliders de macros lentamente | "Estos sliders ajustan proteínas, carbohidratos y grasas. Mira cómo se recalcula todo en tiempo real." |
| 2:30 | Mostrar tabla SMAE | "Abajo ves los 12 grupos de alimentos del sistema SMAE mexicano con las porciones." |
| 2:50 | Paso 3 - Distribucion | "Paso 3: distribuir las porciones en los 6 tiempos de comida." |
| 3:10 | Asignar porciones: desayuno, colaciones, comida, cena | "Desayuno, colacion 1, comida, colacion 2, cena y colacion 3. Defines cuantas porciones de cada grupo van en cada tiempo." |
| 3:40 | Paso 4 - Recetas | "Paso 4: asignar recetas." |
| 3:55 | Mostrar porcentajes de match | "La plataforma sugiere recetas con un porcentaje de compatibilidad según los macros del plan." |
| 4:15 | Filtrar por tiempo de comida | "Filtras por tiempo de comida y seleccionas las que quieras." |
| 4:30 | Seleccionar varias recetas | "Seleccionamos recetas para cada tiempo." |
| 4:50 | Paso 5 - Vista Final | "Y aquí está el plan terminado." |
| 5:00 | Scroll por resumen nutricional | "Resumen nutricional completo: calorías, macros, distribución." |
| 5:20 | Mostrar cada tiempo de comida | "Cada tiempo de comida con sus recetas y porciones." |
| 5:40 | Mostrar opciónes de guardar/exportar | "Guardas el plan y el paciente lo puede ver inmediatamente desde su app." |
05
Recetas e Ingredientes
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Navegar a /recetas | "La biblioteca de recetas." |
| 0:10 | Mostrar grid con imágenes | "Todas las recetas con imagen, nombre, calorías y tags." |
| 0:25 | Filtrar por tiempo de comida | "Filtras por tiempo: solo desayunos, comidas, cenas." |
| 0:40 | Filtrar por tags | "O por etiquetas: sin gluten, alta en proteina, vegetariana." |
| 0:55 | Click en una receta | "Abres una receta y ves ingredientes, información nutricional y pasos de preparación." |
| 1:20 | Navegar a crear receta /recetas/crear | "Puedes crear recetas nuevas." |
| 1:30 | Mostrar formulario de creación | "Agregas ingredientes y la plataforma calcula los macros automáticamente." |
| 1:50 | Buscar y agregar ingredientes | "Buscas ingredientes de la base de datos, defines la cantidad." |
| 2:10 | Navegar a /ingredientes | "La base de ingredientes organizada por los 12 grupos SMAE." |
| 2:25 | Recorrer grupos | "Verduras, frutas, cereales, leguminosas, origen animal, lacteos, grasas... cada uno con su info nutricional por porcion." |
06
Agenda y Citas
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Navegar a /agenda | "Tu agenda de citas." |
| 0:10 | Vista mes | "Vista mensual para ver el panorama completo." |
| 0:25 | Cambiar a vista semana | "Vista semanal con más detalle." |
| 0:40 | Cambiar a vista día | "Y vista de día con horarios." |
| 0:55 | Crear una cita nueva | "Para agendar: seleccionas paciente, tipo de consulta, fecha y hora." |
| 1:15 | Llenar formulario | "Primera vez, seguimiento o valoracion." |
| 1:30 | Guardar, ver en calendario | "La cita aparece en el calendario con color según el tipo." |
| 1:45 | Filtro por nutriólogo | "Si tienes equipo, filtras citas por nutriólogo." |
07
Chat
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Navegar a /chat | "El sistema de mensajeria." |
| 0:10 | Mostrar lista de conversaciones | "A la izquierda tus conversaciones, puedes buscar por nombre." |
| 0:25 | Click en una conversacion | "Seleccionas un paciente y ves el historial." |
| 0:40 | Abrir sidebar expediente | "Lo util es que sin salir del chat puedes ver su expediente..." |
| 0:55 | Sidebar planes | "...sus planes nutricionales..." |
| 1:05 | Sidebar citas | "...sus citas programadas..." |
| 1:15 | Sidebar notas | "...y notas privadas que solo tu ves." |
| 1:30 | Escribir un mensaje | "Y envias mensajes directamente." |
08
Portal del Paciente
Grabar en mobile o Chrome DevTools (iPhone 14 Pro).
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Abrir /portal en mobile | "Ahora lo que ve tu paciente desde su celular." |
| 0:15 | Dashboard del paciente | "Al entrar ve un saludo, sus tiempos de comida del día y estadísticas." |
| 0:35 | Mostrar check-in diario | "Puede hacer check-in diario: energía, digestión, estado de ánimo, adherencia." |
| 0:55 | Swipe a Mi Plan | "Deslizando llega a su plan nutricional." |
| 1:10 | Mostrar calorías y macros | "Ve sus calorías objetivo y la distribución de macros." |
| 1:25 | Expandir un tiempo de comida | "Al tocar un tiempo de comida ve las recetas asignadas con ingredientes y cantidades." |
| 1:45 | Mostrar lista de compras | "Tiene lista de compras organizada por grupo de alimento." |
| 2:05 | Swipe a Recetas | "En recetas ve las que le asignaste, filtradas por tiempo." |
| 2:25 | Abrir una receta | "Cada receta con ingredientes, pasos e info nutricional." |
| 2:45 | Swipe a Chat | "Desde el chat te escribe directamente." |
| 3:00 | Swipe a Perfil | "En su perfil ve sus datos, IMC, y puede cambiar modo claro/oscuro." |
| 3:20 | Toggle dark/light mode | "Mira el cambio de tema." |
| 3:30 | Mostrar navegación inferior | "Toda la navegación con la barra inferior o deslizando entre secciónes." |
09
Configuración
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Navegar a /configuración | "Por último, la configuración de tu clínica." |
| 0:15 | Tab Perfil | "Tu perfil profesional." |
| 0:30 | Tab Clínica | "Datos de la clínica: nombre, dirección, horarios." |
| 0:45 | Tab Roles/Equipo | "Gestión de equipo con roles y permisos." |
| 1:00 | Tab Pipeline | "Personalizas las etapas del pipeline de pacientes." |
| 1:15 | Navegar a /plantillas | "Plantillas de planes reutilizables." |
| 1:30 | Navegar a /ejercicios | "Biblioteca de ejercicios, se amplia en Fase 2." |
| 1:45 | Cerrar con sidebar mostrando todas las secciónes | "Eso es todo lo que llevamos. La plataforma está lista para que empieces a usarla." |
10
Rol: Nutriólogo Asociado
Iniciar sesión con una cuenta de nutriólogo asociado (no admin). Mostrar las diferencias con el admin.
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Login con cuenta de nutriólogo asociado | "Ahora veamos cómo se ve la plataforma para un nutriólogo de tu equipo, no el admin." |
| 0:15 | Dashboard carga — mostrar sidebar | "El sidebar es casi igual, pero fíjate: no aparece Configuración. Solo el admin la tiene." |
| 0:30 | Navegar a /pacientes | "En pacientes solo ve los suyos — los que tiene asignados. No ve los de otros nutriólogos." |
| 0:50 | Abrir un paciente, mostrar tabs | "Puede ver y editar expedientes, crear planes, ver pagos pero no gestionarlos." |
| 1:10 | Navegar a /recetas | "Tiene acceso completo a recetas e ingredientes para crear planes." |
| 1:25 | Navegar a /agenda | "La agenda muestra sus propias citas. Puede crear y gestionar citas." |
| 1:40 | Navegar a /chat | "En chat ve las conversaciones de sus pacientes." |
| 1:55 | Intentar acceder a /configuración (no aparece en sidebar) | "Si intenta entrar a configuración por URL directa, el sistema lo bloquea. Solo el admin gestiona roles y ajustes de la clínica." |
| 2:15 | Mostrar /perfil | "Sí puede editar su propio perfil profesional." |
11
Rol: Asistente
Iniciar sesión con una cuenta de asistente. Mostrar el sidebar reducido y las funciones disponibles.
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Login con cuenta de asistente | "Ahora el rol de asistente — personal de apoyo de la clínica." |
| 0:15 | Dashboard carga — mostrar sidebar reducido | "Mira el sidebar: no tiene Recetas, ni Ingredientes, ni Plantillas, ni Configuración. Solo lo que necesita." |
| 0:30 | Navegar a /pacientes | "Puede ver y editar datos de pacientes — agendar citas, actualizar expedientes." |
| 0:50 | Intentar crear plan desde perfil de paciente | "Pero no puede crear planes nutricionales. El botón 'Crear Plan' no aparece. Eso es exclusivo del nutriólogo." |
| 1:05 | Navegar a /agenda | "Tiene acceso completo a la agenda: puede crear, mover y cancelar citas." |
| 1:20 | Navegar a /chat | "Puede ver y enviar mensajes en el chat — útil para coordinación con pacientes." |
| 1:35 | Navegar a /pagos | "Ve los pagos pero no puede registrar cobros ni modificar montos. Solo consulta." |
| 1:50 | Resumen visual del sidebar | "En resumen: el asistente ayuda con agenda, pacientes y comunicación, pero la parte clínica nutricional queda protegida." |
12
Rol: Recepcionista
Iniciar sesión con una cuenta de recepcionista. El rol más restringido del equipo — enfocado en agenda y cobros.
| Tiempo | Acción en pantalla | Narración sugerida |
|---|---|---|
| 0:00 | Login con cuenta de recepcionista | "Por último, el rol de recepcionista — la persona en el front desk." |
| 0:15 | Dashboard carga — mostrar sidebar mínimo | "El sidebar es el más reducido: Dashboard, Agenda, Pacientes y Pagos. No hay Chat, ni Recetas, ni Configuración." |
| 0:30 | Navegar a /agenda | "Su función principal: gestionar la agenda. Crea, mueve y cancela citas." |
| 0:50 | Navegar a /pagos | "A diferencia de otros roles, la recepcionista sí puede gestionar pagos: registrar cobros, marcar como pagado." |
| 1:10 | Navegar a /pacientes | "Puede ver la lista de pacientes para buscar datos de contacto, pero no puede editar expedientes." |
| 1:25 | Intentar abrir Chat (no aparece en sidebar) | "No tiene acceso al chat — la comunicación clínica es entre nutriólogo y paciente." |
| 1:40 | Resumen visual del sidebar vs admin | "Comparado con el admin: agenda y cobros completos, todo lo clínico protegido. Cada rol ve exactamente lo que necesita." |
Orden de Grabación Recomendado
- Video 1 - Login + Dashboard (fácil, calentar)
- Video 2 - Crear Paciente + QR + Onboarding (el más largo, hacerlo con calma)
- Video 3 - Gestión de Pacientes (flujo natural)
- Video 4 - Crear Plan Nutricional (funcionalidad estrella)
- Video 5 - Recetas e Ingredientes
- Video 6 - Agenda
- Video 7 - Chat
- Video 9 - Configuración (cerrar flujo admin)
- Video 10 - Nutriólogo Asociado (cambiar cuenta, mostrar diferencias)
- Video 11 - Asistente (cambiar cuenta)
- Video 12 - Recepcionista (cambiar cuenta, cerrar desktop)
- Video 8 - Portal Paciente (cambiar a mobile al final)
Checklist Pre-Grabación
npm run devcorriendo sin errores- Datos mock cargados (pacientes, recetas, ingredientes)
- Al menos 1 paciente con plan nutricional ya creado (para Video 8)
- 3 cuentas extra creadas: nutriólogo asociado, asistente y recepcionista (para Videos 10-12)
- Navegador limpio (sin extensiones visibles, bookmarks ocultos)
- Resolución: 1920x1080 para desktop
- Chrome DevTools mobile: iPhone 14 Pro para Videos 2C y 8
- Light mode activado (mostrar toggle de dark mode solo al final del Video 8)
- Micrófono probado
- Notificaciones del sistema desactivadas
- Tener a la mano este guión en una segúnda pantalla o impreso
Duración Total Estimada
| Video | Contenido | Duración |
|---|---|---|
| 01 | Login + Dashboard | ~1.5 min |
| 02 | Crear Paciente + QR + Onboarding | ~7 min |
| 03 | Gestión de Pacientes | ~3 min |
| 04 | Crear Plan Nutricional | ~6 min |
| 05 | Recetas e Ingredientes | ~3 min |
| 06 | Agenda y Citas | ~2 min |
| 07 | Chat | ~2 min |
| 08 | Portal del Paciente (mobile) | ~4 min |
| 09 | Configuración | ~2 min |
| 10 | Rol: Nutriólogo Asociado | ~2.5 min |
| 11 | Rol: Asistente | ~2 min |
| 12 | Rol: Recepcionista | ~2 min |
| Total | ~37 min |