Revisão do Design Front-end

Analise as implementações da interface do usuário (UI) em relação aos padrões de qualidade de design e ao seu sistema de design OU crie do zero interfaces front-end exclusivas e prontas para produção.

Dois modos

Modo 1: Revisão de Design

Avalie a interface do usuário existente quanto à conformidade com o sistema de design, aos três pilares de qualidade (Sem Atrito, Acabamento de Qualidade, Confiável), acessibilidade e qualidade do código.

Modo 2: Design criativo de front-end

Crie interfaces diferenciadas que evitem a estética genérica e “desleixada” da IA, tenham uma direção conceitual clara e sejam executadas com precisão.

Design criativo de front-end

Antes de codificar, defina uma direção estética:

• Objetivo: Que problema isso resolve? Quem o utiliza?
• Tom: minimalista, maximalista, retrofuturista, orgânico, luxuoso, lúdico, editorial, brutalista, art déco, suave/pastel, industrial, etc.
• Restrições: framework, desempenho, requisitos de acessibilidade.
• Diferenciação: O que torna isso distinto e adequado ao contexto?

Diretrizes estéticas

• Tipografia: Fontes distintas que elevam a estética. Combine uma fonte de destaque com uma fonte de corpo refinada. Evite Inter, Roboto, Arial e Space Grotesk.
• Cor e tema: paleta coesa com variáveis CSS. Cores dominantes + detalhes marcantes > paletas tímidas e uniformemente distribuídas.
• Movimento: De preferência apenas com CSS. Um carregamento de página bem orquestrado com revelações escalonadas > microinterações dispersas.
• Composição espacial: assimetria, sobreposição, fluxo diagonal, elementos que quebram a grade, espaço negativo generoso OU densidade controlada.
• Fundos: Malhas de gradiente, texturas de ruído, padrões geométricos, transparências em camadas, sombras dramáticas, sobreposições granuladas.

EVITE: fontes excessivamente utilizadas, esquemas de cores clichês, layouts previsíveis, design padronizado sem características específicas ao contexto.

Adapte a complexidade da implementação à visão. Maximalista = código elaborado. Minimalista = moderação e precisão.

Revisão do Design

Fluxo de Trabalho do Sistema de Design

Antes da implementação:

1. Revise o componente no seu Storybook/biblioteca de componentes para verificar a API e o uso
2. Use o Modo de Desenvolvimento do Figma para obter especificações exatas (espaçamento, tokens, propriedades)
3. Implemente usando componentes do sistema de design + tokens de design

Durante a revisão:

1. Compare a implementação com o design do Figma
2. Verifique se os tokens de design estão sendo usados (em vez de valores codificados diretamente)
3. Verifique se todas as variantes/estados foram implementados corretamente
4. Sinalizar desvios (necessita de aprovação do design)

Se o componente não existir:

1. Verifique se um componente existente pode ser adaptado
2. Entre em contato com a equipe de design para a criação de um novo componente
3. Documente a exceção e a justificativa no código

Processo de revisão

1. Identifique a tarefa do usuário
2. Verifique se há padrões correspondentes no sistema de design
3. Avaliar a direção estética
4. Identificar o escopo (componente, recurso ou fluxo)
5. Avaliar cada pilar
6. Pontuar e priorizar os problemas (bloqueantes/graves/leves)
7. Apresentar recomendações com exemplos do sistema de design

Princípios fundamentais

• Conclusão da tarefa: mínimo de cliques. Cada tela responde às perguntas “O que posso fazer?” e “O que acontece a seguir?”
• Hierarquia de ações: 1 a 2 ações principais por tela. Divulgação progressiva para as ações secundárias.
• Integração: Explique os recursos na introdução. Padrões inteligentes em vez de configuração.
• Navegação: Pontos de entrada/saída claros. Botões “Voltar” e “Cancelar” sempre disponíveis. Trilha de navegação para fluxos complexos.

Pilares de qualidade

1. Da percepção à ação sem atritos

Avaliação: A tarefa pode ser concluída em ≤3 interações? A ação principal é óbvia e única?

Sinais de alerta: cliques excessivos, vários botões principais que competem entre si, ações ocultas, becos sem saída.

2. Qualidade é arte

Avalie:

• Conformidade com o sistema de design: está de acordo com as especificações do Figma, utiliza tokens de design
• Direção estética: tipografia diferenciada, cores coesas, movimento intencional
• Acessibilidade: nota C no mínimo (WCAG 2.1 A), nota B é o ideal (WCAG 2.1 AA)

Sinais de alerta: estética genérica de IA, valores codificados, implementação que não corresponde ao Figma, reajuste de layout incorreto, ausência de indicadores de foco.

3. Construção confiável

Avaliação:

• Transparência da IA: aviso sobre conteúdo gerado por IA
• Transparência de erros: mensagens de erro que permitem ação

Pontos negativos: Ausência de avisos legais sobre IA, erros pouco claros sem orientação.

Formato de saída da revisão

Consulte references/review-output-format.md para obter o modelo completo de revisão.

Modificadores de tipo de revisão

Consulte references/review-type-modifiers.md para conhecer as áreas de foco da revisão específicas para cada contexto (PR, Criativo, Design, Acessibilidade).

Lista de verificação rápida

Consulte references/quick-checklist.md para acessar a lista de verificação pré-aprovação, que abrange os pilares de conformidade com o sistema de design, qualidade estética, experiência sem atritos, acabamento de qualidade e confiabilidade.

Exemplos de padrões

Consulte references/pattern-examples.md para ver exemplos positivos e negativos de revisão criativa de front-end e do sistema de design.

Agradecimentos

Princípios de front-end criativo inspirados na especialidade em design de front-end da Anthropic. Princípios de revisão de design e estrutura dos pilares de qualidade criados por @Quirinevwm para avaliação sistemática da interface do usuário.