# Diseñar y probar un prototipo de tres pantallas

> Objetivo: crear un recorrido para reservar un taller. Requisitos: editor completo de escritorio o iPad. Entrada: nombres de pantalla y transiciones siguientes. Resultado: un recorrido editable que…

Source: https://docs.vectorboard.app/es/flujos-completos/disenar-y-probar-un-prototipo-de-tres-pantallas/ · FLUJOS COMPLETOS

Objetivo: crear un recorrido para reservar un taller. Requisitos: editor completo de escritorio o iPad. Entrada: nombres de pantalla y transiciones siguientes. Resultado: un recorrido editable que puedes reproducir y revisar junto a los requisitos.

| Pantalla | Contenido | Transición esperada |
|---|---|---|
| Lista de talleres | Título, tarjeta y control Ver detalles | Ver detalles → Detalles del taller |
| Detalles del taller | Descripción, horario, aforo y control Reservar | Reservar → Confirmación |
| Confirmación | Mensaje de confirmación y Volver a la lista | Volver a la lista → Lista de talleres |

1. Crea la página Diseño y tres marcos con los nombres de la tabla.
2. Construye el contenido con Texto, Figura e iconos. Define un token de color principal y aplícalo a las acciones repetidas.

![Tamaños de marco predefinidos](https://assets.vectorboard.app/docs/fig/fig-915.webp)
*Diseñar para distintos tamaños de pantalla*

3. Crea un componente de tarjeta de taller y utiliza instancias cuando se repita. Mantén textos específicos mediante variaciones locales cuando corresponda.
4. Configura las tres transiciones mediante enlaces de prototipo, no flechas de diagrama.
5. Inicia Reproducir en Lista de talleres. Sigue Ver detalles, Reservar y Volver a la lista. Comprueba cada destino y el regreso al inicio.

![Enlaces de prototipo](https://assets.vectorboard.app/docs/fig/fig-921.webp)
*Conectar pantallas en un recorrido*

6. Duplica una versión de pantalla para explorar alternativas sin sobrescribir la elegida. Conserva las anotaciones vinculadas al marco.
7. Exporta el marco como HTML o React cuando necesites entregar código. Revisa el archivo por separado; el comportamiento real del servicio se añade en el entorno de aplicación.

> **Resultado esperado:** Tres marcos, estilos reutilizables y un recorrido verificado. El prototipo demuestra navegación, no un pago o una reserva real en un servicio externo.