Direção de Design Frontend (ECC)

O que Direção de Design Frontend (ECC) faz?

Use esta skill quando o trabalho não é apenas fazer a UI funcionar, mas fazê-la parecer proposital, polida e adequada ao domínio do produto.

Fonte: resgatado do PR #1659 da comunidade (obsoleto) por linus707.

Nota: A ECC intencionalmente não reempacota a skill canônica frontend-design da Anthropic. Instale-a a partir de anthropics/skills quando quiser a skill oficial upstream. Esta skill é o resgate (ECC-specific) do design 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 a partir de templates ou incompatível com o público.

Direção de Design

Antes de codificar, escolha uma direção específica:

1. Propósito: qual trabalho a interface realiza?
2. Audiência: quem repete este fluxo de trabalho e o que precisa ver primeiro?
3. Tom: utilitário, editorial, lúdico, industrial, refinado, técnico, maximal, minimal, denso, calmo ou outra direção explícita.
4. Detalhe memorável: uma ideia de design que faça o resultado parecer intencional.
5. 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ções de Implementação

• Construa a experiência real utilizável como primeira tela, a menos que o usuário peça explicitamente por cópia de marketing.
• Use componentes existentes do projeto, tokens, bibliotecas de ícones e padrões de roteamento antes de introduzir um novo sistema visual.
• Use assets visuais reais ou gerados quando a interface depender de imagens, produtos, lugares, pessoas, gameplay, gráficos ou mídia inspecionável.
• Prefira tipografia e espaçamento contextuais em vez de texto heroico genérico de tamanho exagerado.
• Mantenha paletas multidimensionais: evite uma UI dominada por uma única família de matizes.
• Use variáveis CSS ou tokens de design existentes para que a direção permaneça coerente entre estados.
• Projete restrições responsivas explicitamente: grids, proporções de aspecto, 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 dispositivos móveis e desktop. Rótulos longos devem quebrar ou redimensionar de forma limpa, em vez de transbordar.

Anti-Padrões

• Não use por padrão padrões comuns gerados: gradientes roxos, blobs decorativos, cartões excessivamente grandes, cópia de herói vaga 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 todo lugar quando o domínio pedir moderação.
• Não esconda o produto principal, ferramenta, objeto ou fluxo de trabalho 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 própria UI quando os controles podem falar por si.

Checklist 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 uma única nota.
• Ícones são usados para ações de ferramenta familiares, quando disponíveis.
• O layout responsivo tem dimensões estáveis para painéis, grids, barras de ferramentas, controles, blocos e contadores.
• Os assets são renderizados e carregam o assunto em vez de agir como preenchimento.
• O 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.