Visual Hierarchypor Owl-Listener

Visual Hierarchy Skill.

Escolha o que deve ser notado primeiro e faça a composição sustentar essa escolha.

Design de UI
Composição

Revisão da fonte · Visual HierarchySKILL.md

Tarefa Design de UI Produz • Uma hierarquia de conteúdo priorizada para uma tela. • Uma justificativa de composição que usa vários sinais de atenção. • Uma lista rápida de verificação visual e de teste de tarefas. Antes de começar Exige conteúdo real e revisão da interface renderizada; nenhuma ferramenta de pontuação visual está incluída.

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

01 Funcionalidades

Torne Visível a Ordem de Leitura Pretendida

Uma referência de composição visual para distribuir a atenção entre níveis de conteúdo com vários sinais que se reforçam.

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

A abordagem de trabalho

Visual Hierarchy trata da ordem em que uma interface atrai a atenção. Combina tamanho, peso, contraste, espaço em branco, posição e densidade, em vez de depender de um título enorme ou de um botão colorido. A fonte separa as informações em primárias, secundárias, terciárias e de fundo.

É um guia de composição para trabalhos novos, não um substituto para testar uma tela existente. Os padrões comuns de leitura e as diferenças de tamanho sugeridas são heurísticas. A hierarquia real deve ser verificada de acordo com a tarefa e o público, inclusive em layouts cuja direção de leitura difere dos exemplos da fonte, que seguem da esquerda para a direita.

Entregas esperadas

Uma hierarquia de conteúdo priorizada para uma tela.
Uma justificativa de composição que usa vários sinais de atenção.
Uma lista rápida de verificação visual e de teste de tarefas.

Ver o briefing de exemplo

Do briefing à revisão

01
Ordene o conteúdo
Escolha a ação ou mensagem principal e identifique o que deve ser visto em seguida ou lido sob demanda.
02
Atribua peso visual
Use mudanças coordenadas de tamanho, espaçamento, contraste e agrupamento, em vez de deixar todos os elementos em destaque.
03
Verifique a ordem de leitura
Use o teste de apertar os olhos e a observação de tarefas reais para ver se a atenção segue a sequência pretendida.

02 Quando usar

Quando usar

Exige conteúdo real e revisão da interface renderizada; nenhuma ferramenta de pontuação visual está incluída.

Bom para

Composição de uma nova telaÚtil quando vários blocos de conteúdo disputam destaque.
Prioridade das açõesAjuda a distinguir uma ação principal dos controles de apoio.

Limites a verificar

Não é uma crítica completa de telaA fonte a posiciona como estabelecimento de hierarquia; auditar uma tela existente é uma tarefa relacionada.
Heurísticas dependem do contextoAs premissas de posição e de leitura devem ser verificadas para o público e a direção de escrita.

Traga estas entradas

Conteúdo e açõesForneça o texto, os controles, as imagens e os metadados reais.
Prioridade da tarefaIndique o que o visitante deve notar ou fazer primeiro.
Contexto do layoutInforme a viewport, a direção de leitura e as restrições de marca existentes.

03 Decisões importantes

Decisões que importam

O espaço em branco carrega ênfase
O isolamento pode reforçar um elemento sem acrescentar outra cor ou uma fonte mais pesada.
O agrupamento muda a leitura dinâmica
Itens relacionados podem ser lidos como uma unidade, enquanto um item isolado chama a atenção como exceção.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira 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-fonte upstream

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md

Exige conteúdo real e revisão da interface renderizada; nenhuma ferramenta de pontuação visual está incluída.

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 visual-hierarchy para compor uma tela de revisão contendo o título de um documento, feedback não resolvido, metadados de versão e uma ação de aprovar. Defina quatro níveis de prioridade e explique os sinais de tamanho, espaçamento e contraste. Mantenha uma única ação principal e considere a ordem de leitura em dispositivos móveis.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

O elemento principal pretendido continua claro no teste de apertar os olhos.
Os metadados de apoio não competem com a tarefa principal.
O agrupamento reflete o significado, não uma proximidade arbitrária.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte indicada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Proprietário da fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: ui-design/skills/visual-hierarchy/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Uma referência de composição visual para distribuir a atenção entre níveis de conteúdo com vários sinais que se reforçam.

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

06 Perguntas antes de começar

Perguntas antes de começar

Hierarquia é só tamanho de fonte?

Não. A fonte combina tamanho com peso, contraste, espaçamento, posição e densidade.

Toda seção deve ter um CTA principal?

A orientação favorece uma ação principal por tela, em vez de vários controles igualmente dominantes.

O teste de apertar os olhos substitui o teste com usuários?

Não. É uma verificação rápida de composição; ainda é preciso observar tarefas para avaliar se os usuários seguem a ordem pretendida.

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 espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Ver skills de design