Revisão de Design Frontend
Revise implementações de UI conforme padrões de qualidade de design e seu sistema de design OU crie interfaces frontend distintas e de nível de produção do zero.
Dois Modos
Modo 1: Revisão de Design
Avalie UI existente quanto à conformidade com o sistema de design, três pilares de qualidade (Sem Atritos, Qualidade Artesanal, Confiável), acessibilidade e qualidade de código.
Modo 2: Design Frontend Criativo
Crie interfaces distintas que evitem estéticas genéricas de "IA sem alma", tenham direção conceitual clara e executem com precisão.
Design Frontend Criativo
Antes de codificar, defina uma direção estética:
- Propósito: Qual problema isso resolve? Quem usa?
- Tom: minimalista, maximalista, retro-futurista, 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 de Estética
- Tipografia: Fontes distintas que elevam a estética. Combine uma fonte de exibição com uma fonte de corpo refinada. Evite Inter, Roboto, Arial, Space Grotesk.
- Cor e Tema: Paleta coesa com variáveis CSS. Cores dominantes + acentos fortes > paletas tímidas e uniformemente distribuídas.
- Movimento: Preferencialmente CSS puro. 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: Gradientes mesh, texturas de ruído, padrões geométricos, transparências em camadas, sombras dramáticas, sobreposições granulares.
EVITE: Fontes excessivamente usadas, esquemas de cores clichê, layouts previsíveis, design genérico sem caráter contextual.
A complexidade da implementação deve corresponder à visão. Maximalista = código elaborado. Minimalista = contenção e precisão.
Revisão de Design
Fluxo de Trabalho do Sistema de Design
Antes de implementar:
- Revise o componente no Storybook / biblioteca de componentes para API e uso
- Use o Modo Dev do Figma para obter especificações exatas (espaçamento, tokens, propriedades)
- Implemente usando componentes do sistema de design + tokens de design
Durante a revisão:
- Compare a implementação com o design do Figma
- Verifique se os tokens de design estão sendo usados (e não valores fixos)
- Verifique se todas as variantes/estados estão implementados corretamente
- Sinalize desvios (necessita aprovação do design)
Se o componente não existir:
- Verifique se um componente existente pode ser adaptado
- Entre em contato com o design para criar um novo componente
- Documente a exceção e justificativa no código
Processo de Revisão
- Identifique a tarefa do usuário
- Verifique no sistema de design se há padrões correspondentes
- Avalie a direção estética
- Identifique o escopo (componente, funcionalidade ou fluxo)
- Avalie cada pilar
- Pontue e priorize problemas (bloqueante/maior/menor)
- Forneça recomendações com exemplos do sistema de design
Princípios Fundamentais
- Conclusão da tarefa: Mínimo de cliques. Cada tela responde "O que posso fazer?" e "O que acontece depois?"
- Hierarquia de ações: 1-2 ações principais por visualização. Revelação progressiva para ações secundárias.
- Onboarding: Explique recursos na introdução. Padrões inteligentes em vez de configuração.
- Navegação: Pontos de entrada/saída claros. Botões voltar/cancelar sempre disponíveis. Breadcrumbs para fluxos profundos.
Pilares de Qualidade
1. Experiência Sem Atritos (Insight para Ação)
Avalie: A tarefa pode ser concluída em ≤3 interações? A ação principal é óbvia e única?
Sinais de alerta: Cliques excessivos, múltiplos botões primários concorrentes, ações enterradas, becos sem saída.
2. Qualidade é Artesanato
Avalie:
- Conformidade com o sistema de design: corresponde às especificações do Figma, usa tokens de design
- Direção estética: tipografia distinta, cores coesas, movimento intencional
- Acessibilidade: Nota C mínima (WCAG 2.1 A), Nota B ideal (WCAG 2.1 AA)
Sinais de alerta: Estética genérica de IA, valores fixos, implementação não corresponde ao Figma, reflow quebrado, indicadores de foco ausentes.
3. Construção Confiável
Avalie:
- Transparência da IA: aviso sobre conteúdo gerado por IA
- Transparência de erros: mensagens de erro acionáveis
Sinais de alerta: Avisos de IA ausentes, erros opacos sem orientação.
Formato de Saída da Revisão
Consulte references/review-output-format.md para o modelo completo de revisão.
Modificadores de Tipo de Revisão
Consulte references/review-type-modifiers.md para áreas de foco de revisão específicas ao contexto (PR, Criativo, Design, Acessibilidade).
Lista de Verificação Rápida
Consulte references/quick-checklist.md para a lista de verificação pré-aprovação que cobre conformidade com o sistema de design, qualidade estética, experiência sem atritos, qualidade artesanal e construção confiável.
Exemplos de Padrões
Consulte references/pattern-examples.md para exemplos bons/ruins de trabalho criativo frontend e de revisão de sistema de design.
Agradecimentos
Princípios criativos frontend inspirados pela skill frontend-design da Anthropic. Princípios de revisão de design e estrutura dos pilares de qualidade criados por @Quirinevwm.