106.9K+Baixar
Ir para o guia de uso
Critique Compositionpor owl-listener

Critique Composition Skill.

Explique por que um layout renderizado parece desequilibrado ou desconectado.

  • Composição
  • Hierarquia
Baixar OpenDesignVer guia de uso
Análise da fonte · critique-compositionSKILL.md
Tarefa Explique por que um layout renderizado parece desequilibrado ou desconectado. Entregáveis Uma revisão de composição organizada em quatro dimensões explícitas. Antes de começar A skill critica a composição renderizada, em vez de inventar constatações com base apenas no briefing.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Explique por que um layout renderizado parece desequilibrado ou desconectado

Avalie equilíbrio, espaço em branco, ritmo e agrupamento perceptual de uma tela renderizada com observações específicas e correções práticas de layout.

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

A abordagem de trabalho

Critique Composition examina as qualidades espaciais de uma tela renderizada. Analisa peso visual, espaço vazio, intervalos repetidos e agrupamento perceptual para explicar por que o layout parece instável ou desconectado. A fonte é especialmente útil quando a hierarquia básica é compreensível, mas a disposição ainda parece inadequada.

O relatório separa observação, problema e correção em quatro dimensões: equilíbrio, espaço em branco, ritmo e gestalt. Essa estrutura transforma comentários como ‘a página está estranha’ em uma discussão concreta sobre uma seção sobrecarregada, um controle isolado ou um padrão repetido cujo espaçamento muda sem motivo.

Entregas esperadas

  • Uma revisão de composição organizada em quatro dimensões explícitas.
  • Observações neutras ligadas a problemas espaciais específicos.
  • Correções práticas e uma classificação de gravidade para cada dimensão.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Leia a composição inteira

    Inspecione a tela renderizada e identifique a distribuição de peso visual. Considere se a simetria ou assimetria parece intencional e onde fica o centro de gravidade da composição.

  2. 02
    Inspecione espaçamento e ritmo

    Compare os intervalos maiores entre seções com os menores dentro dos grupos. Procure padding inconsistente, repetições que perdem regularidade e transições bruscas entre áreas densas e vazias.

  3. 03
    Confira o agrupamento perceptual

    Revise proximidade, semelhança, separação figura-fundo, continuidade e fechamento. Identifique elementos que parecem afastados do conteúdo relacionado ou agrupados com controles sem relação.

  4. 04
    Escreva correções específicas

    Para equilíbrio, espaço em branco, ritmo e gestalt, apresente observação, problema e correção concreta. Classifique cada dimensão sem transformar uma crítica focada em um redesign completo sem explicação.

02 Quando usar

Quando usar

A skill critica a composição renderizada, em vez de inventar constatações com base apenas no briefing.

Bom encaixe

  • O layout parece instávelO conteúdo está presente, mas peso, intervalos ou agrupamento dificultam a leitura da composição.
  • Uma rodada de refinamento focadaA equipe quer corrigir relações espaciais mantendo a direção de design já aceita.

Limites a verificar

  • É necessária uma tela realA skill critica a composição renderizada, em vez de inventar constatações com base apenas no briefing.
  • Foco específicoA fonte direciona a análise de ênfase e percurso do olhar para uma crítica separada de hierarquia visual.
  • Recomendações precisam de verificaçãoUma correção proposta de espaçamento ainda precisa ser inspecionada depois de implementada.

Traga estas entradas

  • Visualização renderizadaForneça a tela e os tamanhos de viewport ou estados de conteúdo relevantes.
  • Contexto de designExplique o equilíbrio e o agrupamento pretendidos, além da direção visual já estabelecida.
  • Sistema de espaçamentoInclua os valores conhecidos de grid e espaçamento quando as correções precisarem segui-los.

03 Decisões importantes

Decisões importantes

  1. Linguagem espacial concreta

    O feedback nomeia a relação que faz o layout parecer errado.

  2. Dimensões separadas

    Espaço em branco e ritmo podem ser avaliados independentemente do peso visual.

  3. Crítica acionável

    Cada problema vem acompanhado de uma proposta de alteração.

04 Exemplo de briefing

Experimente um briefing específico

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

Confira a fonte e a configuração

Forneça a tela e os tamanhos de viewport ou estados de conteúdo relevantes.

Arquivo-fonte original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-composition/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

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

Briefing de exemplo
Use critique-composition para revisar a visão geral renderizada do projeto. Mantenha o conteúdo e a direção visual atuais e concentre-se em equilíbrio, espaço em branco, ritmo e agrupamento perceptual. Identifique áreas específicas que pareçam apertadas, desconectadas ou visualmente mais pesadas do que o pretendido. Compare os espaçamentos repetidos de cartões e seções com nossa escala existente. Para cada dimensão, apresente uma observação neutra, explique sua consequência e proponha um ajuste concreto. Classifique como aprovado, problema menor ou problema maior. Não redesenhe a página durante esta revisão e sinalize julgamentos que dependam de um viewport não observado.

Inspecione o resultado

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

  • As observações descrevem relações espaciais visíveis e específicas.
  • As correções propostas tratam da dimensão identificada, não de estilos sem relação.
  • Viewports não observados e recomendações não implementadas continuam claramente identificados.

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 OpenDesignLer 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
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 9a6930cf84a8
Resumo editorial da fonte
Explique por que um layout renderizado parece desequilibrado ou desconectado.

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

06 Perguntas antes de começar

Perguntas antes de começar

Isso substitui uma revisão de hierarquia?

O foco é composição. A fonte trata ênfase e percurso do olhar como um foco separado de crítica.

O que conta como ritmo?

A revisão examina espaçamentos, tamanhos, linhas, cartões e separações de seções repetidos que criam uma cadência visual coerente.

Qual é o formato esperado do relatório?

Cada uma das quatro dimensões recebe observação, problema, correção e classificação como aprovado/problema menor/problema maior.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

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

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/visual-critique/skills/critique-composition/SKILL.md