User Flow Diagrampor Owl-Listener

User Flow Diagram Skill.

Muestra los caminos que un usuario puede seguir para completar un objetivo.

Prototipado
Flujos de usuario

Revisión de la fuente · User Flow DiagramSKILL.md

Tarea Prototipado Produce • Un diagrama de flujo para un objetivo del usuario. • Decisiones, disparadores, operaciones en segundo plano y salidas etiquetados. • Rutas de error y recuperación junto a la ruta exitosa. Antes de empezar La fuente no exige ninguna aplicación de diagramación; el formato de salida elegido debe conservar una notación clara.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Mapea rutas, decisiones y recuperación

Una guía de diagramas de flujo a nivel de pantalla con elementos estándar, etiquetas de disparadores, anotaciones del sistema y ramas de recuperación.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

User Flow Diagram mapea el movimiento por un producto a nivel de pantalla y de acción. Distingue puntos de entrada, pantallas, decisiones, acciones del usuario, procesos en segundo plano y puntos finales, de modo que un diagrama comunique tanto la ruta como lo que provoca cada transición.

La fuente recomienda empezar por el camino feliz y después añadir ramas, errores, recuperación y salidas. Ese orden mantiene el flujo legible sin tratar el fallo como una ocurrencia tardía. También diferencia entre un flujo de tareas lineal, un flujo de usuario con ramificaciones y un wire flow con miniaturas de pantallas.

Entregables esperados

Un diagrama de flujo para un objetivo del usuario.
Decisiones, disparadores, operaciones en segundo plano y salidas etiquetados.
Rutas de error y recuperación junto a la ruta exitosa.

Ver el brief de ejemplo

Del brief a la revisión

01
Define el objetivo y la entrada
Identifica qué significa completar la tarea y desde dónde puede empezar el usuario.
02
Dibuja la ruta principal
Mapea pantallas y acciones con una notación coherente antes de añadir ramas.
03
Añade decisiones y recuperación
Etiqueta condiciones, eventos del sistema, demoras, errores y salidas para que cada flecha tenga una razón.

02 Cuándo usarlo

Cuándo usarlo

La fuente no exige ninguna aplicación de diagramación; el formato de salida elegido debe conservar una notación clara.

Buen encaje

Tareas de varias pantallasÚtil cuando los equipos necesitan acordar cómo llega un usuario a un resultado a través de varias pantallas.
Flujos con ramificacionesAyuda a exponer las distintas rutas causadas por permisos, elecciones u operaciones fallidas.

Límites a tener en cuenta

No es un recorrido emocionalNo sustituye un mapa de recorrido integral de emociones y puntos de contacto.
No es una maqueta visual de la interfazUn flujo puede hacer referencia a wireframes, pero describe sobre todo rutas, no el diseño final de las pantallas.

Aporta estos insumos

Objetivo de la tareaIndica el resultado y la condición de finalización.
Pantallas y puntos de entradaProporciona las vistas conocidas y los lugares donde los usuarios pueden empezar.
Reglas de ramificaciónIncluye permisos, validaciones, fallos y eventos del lado del sistema.

03 Decisiones importantes

Decisiones que importan

Las flechas explican el comportamiento
Los conectores etiquetados vuelven accionable un flujo; una línea sin etiqueta oculta el disparador que necesita la implementación.
Un solo objetivo mantiene la legibilidad
Separar objetivos no relacionados evita que un diagrama se convierta en un mapa ilegible de todo el producto.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Usa la vía de instalación documentada del repositorio y conserva los archivos complementarios a los que se haga referencia. Esta entrada describe un método de diseño concreto, no una aplicación ejecutable.

Archivo fuente original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/prototyping-testing/skills/user-flow-diagram/SKILL.md

La fuente no exige ninguna aplicación de diagramación; el formato de salida elegido debe conservar una notación clara.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa user-flow-diagram para invitar a un compañero a un espacio de trabajo. Incluye la entrada desde ajustes y desde una pantalla de equipo vacío, ramas para cuenta existente y cuenta nueva, invitaciones caducadas y errores de permisos. Etiqueta cada conector y distingue las acciones del usuario del envío del correo en segundo plano.

Inspecciona el resultado

Compara la salida real con estos criterios observables.

Cada flecha tiene un disparador o una condición.
La finalización y las salidas anticipadas son explícitas.
Al menos las rutas de fallo conocidas tienen una ruta de recuperación.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales o dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo del skill: prototyping-testing/skills/user-flow-diagram/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Una guía de diagramas de flujo a nivel de pantalla con elementos estándar, etiquetas de disparadores, anotaciones del sistema y ramas de recuperación.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad fechada, no uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Qué es un wire flow?

Combina un diagrama de rutas con miniaturas de wireframes para poder leer juntos el camino y la estructura aproximada de las pantallas.

¿Debe cubrir todo el producto?

La fuente recomienda un flujo por objetivo para que las ramas sean comprensibles.

¿En qué se diferencia de una máquina de estados?

Un flujo de usuario describe el recorrido por pantallas y acciones. Una máquina de estados especifica los estados y transiciones válidos de un comportamiento concreto.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén tu brief, el material de origen y tu trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño