User Flow Diagrampor Owl-Listener

User Flow Diagram Skill.

Mostre as rotas que um usuário pode seguir para concluir um objetivo.

Prototipagem
Fluxos de usuário

Revisão da fonte · User Flow DiagramSKILL.md

Tarefa Prototipagem Produz • Um diagrama de fluxo para um objetivo do usuário. • Decisões, gatilhos, operações em segundo plano e saídas rotulados. • Caminhos de erro e recuperação ao lado da rota de sucesso. Antes de começar A fonte não exige nenhum aplicativo de diagramação; o formato de saída escolhido deve preservar uma notação clara.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Mapeie caminhos, decisões e recuperação

Um guia de diagramas de fluxo no nível de tela, com elementos padrão, rótulos de gatilho, anotações do sistema e ramos de recuperação.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

User Flow Diagram mapeia a movimentação em um produto no nível de tela e ação. Distingue pontos de entrada, telas, decisões, ações do usuário, processos em segundo plano e pontos finais, para que um diagrama comunique tanto a rota quanto o que causa cada transição.

A fonte recomenda começar pelo caminho feliz e depois adicionar ramos, erros, recuperação e saídas. Essa ordem mantém o fluxo legível sem tratar a falha como algo secundário. Também diferencia um fluxo de tarefa linear, um fluxo de usuário com ramificações e um wire flow com miniaturas de telas.

Entregas esperadas

Um diagrama de fluxo para um objetivo do usuário.
Decisões, gatilhos, operações em segundo plano e saídas rotulados.
Caminhos de erro e recuperação ao lado da rota de sucesso.

Ver o briefing de exemplo

Do briefing à revisão

01
Defina o objetivo e a entrada
Identifique o que significa concluir e onde o usuário pode começar.
02
Desenhe a rota principal
Mapeie telas e ações com uma notação consistente antes de adicionar ramos.
03
Adicione decisões e recuperação
Rotule condições, eventos do sistema, atrasos, erros e saídas para que toda seta tenha um motivo.

02 Quando usar

Quando usar

A fonte não exige nenhum aplicativo de diagramação; o formato de saída escolhido deve preservar uma notação clara.

Bom para

Tarefas com várias telasÚtil quando as equipes precisam concordar sobre como o usuário chega a um resultado ao longo das telas.
Fluxos com ramificaçõesAjuda a expor rotas diferentes causadas por permissões, escolhas ou operações com falha.

Limites a verificar

Não é uma jornada emocionalNão substitui um mapa de jornada completo de sentimentos e pontos de contato.
Não é um mockup visual de UIUm fluxo pode referenciar wireframes, mas descreve principalmente rotas, não o design final das telas.

Traga estas entradas

Objetivo da tarefaInforme o resultado e a condição de conclusão.
Telas e pontos de entradaForneça as telas conhecidas e os lugares onde os usuários podem começar.
Regras de ramificaçãoInclua permissões, validações, falhas e eventos do lado do sistema.

03 Decisões importantes

Decisões que importam

As setas explicam o comportamento
Conectores rotulados tornam o fluxo acionável; uma linha sem rótulo esconde o gatilho de que a implementação precisa.
Um objetivo mantém a legibilidade
Separar objetivos não relacionados evita que um diagrama vire um mapa ilegível do produto inteiro.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use o método de instalação documentado no repositório e mantenha os arquivos complementares referenciados. Esta entrada descreve um método de design focado, não um aplicativo executável.

Arquivo de origem upstream

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

A fonte não exige nenhum aplicativo de diagramação; o formato de saída escolhido deve preservar uma notação clara.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use user-flow-diagram para o convite de um colega a um workspace. Inclua a entrada a partir das configurações e de uma tela de equipe vazia, ramos para conta existente e conta nova, convites expirados e erros de permissão. Rotule cada conector e diferencie as ações do usuário do envio de e-mail em segundo plano.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

Toda seta tem um gatilho ou uma condição.
A conclusão e as saídas antecipadas estão explícitas.
Pelo menos os caminhos de falha conhecidos têm uma rota de recuperação.

OpenDesign oferece um workspace de design local para agentes de código. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software venham junto.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: prototyping-testing/skills/user-flow-diagram/SKILL.md
Licença: MIT
Snapshot revisado: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Um guia de diagramas de fluxo no nível de tela, com elementos padrão, rótulos de gatilho, anotações do sistema e ramos de recuperação.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

O que é um wire flow?

Combina um diagrama de rota com miniaturas de wireframes, para que o caminho e a estrutura aproximada das telas possam ser lidos juntos.

Deve cobrir o produto inteiro?

A fonte recomenda um fluxo por objetivo para manter os ramos compreensíveis.

Em que difere de uma máquina de estados?

Um fluxo de usuário descreve a travessia por telas e ações. Uma máquina de estados especifica estados e transições válidos para um comportamento específico.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um workspace local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design