Design de Frontend
Crie interfaces de frontend memoráveis que se destacam da estética genérica gerada por IA por meio de escolhas criativas ousadas.
Veja também:
ui-designpara fundamentos (tipografia, cor, espaçamento),web-designpara padrões CSS.
Instalação
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install frontend-design
O QUE Esta Skill Faz
Orienta a criação de interfaces web visualmente distintas:
- Estabelecendo uma direção estética ousada antes de codificar
- Fazendo escolhas intencionais de tipografia, cor e espaço
- Implementando movimentos e microinterações que encantam
- Evitando os padrões previsíveis que marcam as UIs geradas por IA
QUANDO Usar
- Ao construir um novo componente, página ou aplicação web
- Ao criar landing pages, sites de marketing ou UIs de produto
- Ao redesenhar interfaces para torná-las mais memoráveis
- Em qualquer trabalho frontend onde o impacto visual é importante
PALAVRAS-CHAVE
design frontend, web ui, design ui, landing page, ui criativo, estética web, tipografia, design visual, design de movimento, interface distinta
Processo de Pensamento de Design
Antes de escrever código, comprometa-se com uma direção estética:
1. Entenda o Contexto
- Propósito: Que problema esta interface resolve?
- Público: Quem a usa e o que espera?
- Restrições: Framework, performance, requisitos de acessibilidade
2. Escolha uma Direção Ousada
Escolha uma estética extrema — a mediocridade é esquecível:
| Direção | Características |
|---|---|
| Brutalmente Minimalista | Severo, essencial, nada extra |
| Caos Maximalista | Denso, em camadas, intencionalmente opressor |
| Retrô-Futurista | Mistura estética vintage com tecnologia moderna |
| Orgânico/Natural | Suave, fluido, inspirado na natureza |
| Luxo/Refinado | Materiais premium, elegância sutil |
| Lúdico/De Brinquedo | Divertido, acessível, vibrante |
| Editorial/Revista | Foco em tipografia, baseado em grade |
| Brutalista/Cru | Estrutura exposta, anti-design |
| Art Déco/Geométrico | Formas ousadas, simetria, ornamentação |
| Industrial/Utilitário | Foco na função, robusto |
3. Identifique o Elemento Memorável
O que uma única coisa será lembrada sobre esta interface? Comprometa-se com ela.
Diretrizes Estéticas
Tipografia
NUNCA use fontes genéricas:
- Arial, Helvetica, system-ui
- Inter, Roboto (a menos que seja altamente intencional)
FAÇA escolha fontes distintas:
- Combine uma fonte de exibição com personalidade com uma fonte de corpo refinada
- Explore: Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader
/* Exemplo de combinação */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Satoshi', sans-serif;
Cor e Tema
- Comprometa-se com uma paleta coesa — não hesite com escolhas seguras
- Dominante + acento supera cores uniformemente distribuídas
- Use variáveis CSS para consistência
- Evite gradientes roxos sobre fundo branco (o "padrão AI")
:root {
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-text: #fafafa;
--color-accent: #ff4d00;
--color-muted: #666666;
}
Composição Espacial
Quebre expectativas:
- Assimetria em vez de equilíbrio perfeito
- Sobreposição intencional de elementos
- Fluxo diagonal ou layouts não convencionais
- Espaço negativo generoso OU densidade controlada — não o meio-termo
- Elementos que quebram a grade para atrair atenção
Movimento e Interação
Foco em momentos de alto impacto:
- Carregamento da página: Revelações escalonadas com
animation-delay - Animações acionadas por rolagem que surpreendem
- Estados de hover com personalidade
- Prefira animações CSS para HTML; biblioteca Motion para React
/* Entrada escalonada */
.card { animation: fadeUp 0.6s ease-out backwards; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
Fundos e Atmosfera
Crie profundidade e atmosfera:
- Malhas de gradiente e gradientes com múltiplas paradas
- Texturas de ruído e sobreposições de grão
- Padrões geométricos ou grades sutis
- Transparências em camadas
- Sombras dramáticas ou total achatamento
- Cursores personalizados para elementos interativos
Princípios de Implementação
Combine Complexidade com Visão
- Visão maximalista → código elaborado com animações extensas
- Visão minimalista → contenção, precisão, espaçamento perfeito
- Elegância = executar bem a visão, não adicionar mais
Varie Entre Gerações
Nunca convirja para padrões:
- Alterne temas claro/escuro
- Use famílias de fontes diferentes a cada vez
- Explore diferentes direções estéticas
- Cada design deve parecer único
NUNCA Faça
- NUNCA use famílias de fontes genéricas (Inter, Roboto, Arial, fontes do sistema)
- NUNCA use gradientes roxos sobre fundos brancos — a "estética AI"
- NUNCA use layouts previsíveis e padronizados
- NUNCA pule a fase de pensamento de design — entenda antes de construir
- NUNCA hesite com estéticas seguras e medianas — comprometa-se com uma direção
- NUNCA esqueça que design distinto requer código distinto
- NUNCA convirja para os mesmos padrões entre gerações — varie intencionalmente
- NUNCA adicione complexidade sem propósito — minimalismo e maximalismo exigem intenção