Direção de Design Frontend
Use esta skill quando o trabalho não é apenas fazer a UI funcionar, mas fazê-la parecer proposital, polida e apropriada ao domínio do produto.
Fonte: resgatado do PR #1659 da comunidade por linus707.
Nota: A ECC intencionalmente não reempacota a skill canônica frontend-design da Anthropic.
Instale-a de anthropics/skills quando quiser a skill oficial upstream. Esta skill é o resgate
da direção de design específica da EEC da orientação local útil do #1659.
Quando Usar
- O usuário pede para construir uma página web, aplicativo, dashboard, artefato, componente ou UI.
- O usuário pede para tornar uma interface mais polida, distinta, bonita ou menos genérica.
- A implementação precisa de hierarquia visual, tipografia, cor, movimento, layout e escolhas de interação.
- A UI atual funciona, mas parece plana, genérica, modelada ou inadequada para o público.
Direção de Design
Antes de codificar, escolha uma direção específica:
- Propósito: qual trabalho a interface realiza?
- Audiência: quem repete este fluxo de trabalho e o que eles precisam escanear primeiro?
- Tom: utilitário, editorial, lúdico, industrial, refinado, técnico, maximalista, minimalista, denso, calmo ou outra direção explícita.
- Detalhe memorável: uma ideia de design que faz o resultado parecer intencional.
- Restrições: framework, acessibilidade, desempenho, responsividade e sistema de design existente.
Combine a direção com o domínio. Uma ferramenta de operações SaaS geralmente deve ser densa, silenciosa e escaneável. Um portfólio, página de lançamento, jogo ou peça editorial pode ser mais expressiva. Não force uma composição de landing page em uma ferramenta que precisa de uso diário repetido.
Orientação de Implementação
- Construa a experiência utilizável real como a primeira tela, a menos que o usuário peça explicitamente por texto de marketing.
- Use componentes, tokens, bibliotecas de ícones e padrões de roteamento existentes do projeto antes de introduzir um novo sistema visual.
- Use ativos visuais reais ou gerados quando a interface depende de imagens, produtos, lugares, pessoas, jogabilidade, gráficos ou mídia inspecionável.
- Prefira tipografia e espaçamento contextuais em vez de texto heroico genérico e superdimensionado.
- Mantenha paletas multidimensionais: evite uma UI dominada por uma única família de matiz.
- Use variáveis CSS ou tokens de design existentes para que a direção permaneça coerente entre estados.
- Projete restrições responsivas explicitamente: grades, proporções, tamanhos mínimo/máximo, barras de ferramentas estáveis e controles de formato fixo não devem mudar quando rótulos ou estados de hover aparecem.
- Use movimento com moderação, mas deliberadamente. Prefira transições de alto sinal que esclarecem o estado em vez de animação decorativa.
- Verifique o ajuste do texto em mobile e desktop. Rótulos longos devem quebrar ou redimensionar limpo em vez de transbordar.
Anti-Padrões
- Não use como padrão padrões gerados comuns: gradientes roxos, blobs decorativos, cartões superdimensionados, texto heroico vago ou mídia atmosférica genérica.
- Não adicione cartões de UI dentro de outros cartões.
- Não use um único estilo decorativo em todos os lugares quando o domínio exige moderação.
- Não esconda o produto, ferramenta, objeto ou fluxo de trabalho principal atrás de seções de marketing genéricas.
- Não adicione uma nova dependência para um floreio de design, a menos que ela claramente se pague.
- Não descreva as funcionalidades da UI dentro da UI quando os controles podem falar por si mesmos.
Lista de Verificação de Revisão
- A primeira viewport comunica imediatamente o produto, fluxo de trabalho ou objeto.
- A hierarquia visual suporta escaneamento e uso repetido.
- A tipografia se ajusta ao contêiner e não sobrepõe conteúdo adjacente.
- As escolhas de cor têm contraste e não colapsam em uma paleta de nota única.
- Ícones são usados para ações de ferramentas familiares quando disponíveis.
- O layout responsivo tem dimensões estáveis para quadros, grades, barras de ferramentas, controles, tiles e contadores.
- Os ativos renderizam e carregam o assunto em vez de agir como preenchimento.
- Movimento melhora a orientação e não mascara lentidão.
- O resultado corresponde às convenções frontend existentes do repositório, a menos que haja um motivo claro para se desviar.