Habilidade de Design Frontend

Crie interfaces frontend de alto nível e produção que nenhum humano identificaria como geradas por IA. Cada saída deve parecer ter sido criada por uma agência de design cara — ousada, intencional e memorável.

Protocolo de Pensamento de Design

Antes de escrever QUALQUER código, complete esta lista de verificação. Não pule etapas.

1. Propósito — Qual problema esta interface resolve? Quem a usa?

2. Tom — Escolha UMA direção estética extrema. Isto é obrigatório — nunca prossiga com uma direção sem nome.

Escolha entre (ou invente a sua própria com especificidade igual):

Brutalmente minimalista | Caos maximalista | Retro-futurista | Orgânico/natural
Editorial de luxo | Brutalista/cru | Art déco/geométrico | Suave/pastel
Industrial/utilitário | Neo-Memphis | Modernista suíço | Minimalista japonês
Terminal retrofuturista | Calma nórdica | Neon Tóquio | Calor do deserto

Se você não conseguir nomear o tom em duas palavras, você não decidiu. "Moderno limpo" NÃO é um tom — é a ausência de um, e produz IA genérica.

3. Restrições — Framework (HTML/React/Vue/Svelte), suporte a navegadores, orçamento de desempenho, kit de marca existente.

4. Diferenciação — Qual é a ÚNICA coisa que alguém lembrará desta página? Nomeie-a explicitamente antes de codificar.

O Manifesto Anti-Slop

Estas regras existem porque LLMs convergem para uma saída estatisticamente média — agradável, inofensiva e totalmente esquecível. Os padrões abaixo estão na lista negra não porque são inerentemente ruins, mas porque seu uso indiscriminado é o sinal nº 1 de design gerado por IA.

Fontes na Lista Negra

NUNCA use estas como fonte de exibição primária sem solicitação explícita do usuário:

Fonte	Por que	Use em vez disso
Inter	Padrão nº 1 de IA (~90% das UIs de LLM)	Satoshi, General Sans ou uma serifa como Fraunces
Roboto	Padrão nº 2 de IA (ecossistema Android/Chrome)	Outfit, Plus Jakarta Sans (apenas como corpo), Karla
Arial / system-ui	Ausência de escolha tipográfica	Qualquer seleção intencional de fonte
Open Sans	Padrão legado de IA (dados de treinamento pré-2022)	Source Sans 3, Nunito (apenas corpo)
Poppins	Saturação de templates do Figma	Figtree, Outfit, DM Sans (apenas corpo)
Space Grotesk	Era distinta, agora é o padrão "peculiar-seguro" de IA	Syne, Anybody, Chakra Petch
Montserrat	Sem geométrica sans-serif exagerada	Josefin Sans, Barlow, Jost

Regra: Se uma fonte está entre as 20 principais do Google Fonts em popularidade, justifique-a explicitamente ou rejeite-a. Leia references/typography-pairings.md para mais de 20 combinações curadas organizadas por tom.

Cores na Lista Negra

NUNCA use estas como destaque primário sem intenção explícita:

Cor	Hex	Por que
Tailwind indigo-500	`#6366f1`	A cor-IA original. Rastreável a uma única decisão da documentação do Tailwind.
Tailwind violet-500	`#8b5cf6`	Segundo destaque de IA mais comum.
Tailwind purple-500	`#a855f7`	Ponto final de gradiente para indigo→roxo.
Tailwind blue-500	`#3b82f6`	A alternativa "empresarial" de IA ao roxo.
O gradiente de IA	`from-indigo-500 to-purple-600`	O gradiente canônico de IA e todas as suas variantes.
Fundos brancos planos	`#ffffff`, `#f9fafb`, `#f8fafc`	A IA nunca explora temas escuros, tons terrosos ou profundidade atmosférica.

Regra: Se sua paleta puder ser reproduzida por npx create-next-app + padrões do Tailwind, comece de novo. Leia references/color-systems.md para mais de 15 paletas curadas.

Layouts na Lista Negra

NUNCA produza estas estruturas:

O template de IA de 9 seções: Hero → barra de logotipos → recursos de 3 colunas → etapas "como funciona" → carrossel de depoimentos → tabela de preços → acordeão de FAQ → banner de CTA → rodapé de 4 colunas. Esta sequência exata é reproduzida em todas as páginas SaaS geradas por IA.
Grades simétricas de cartões de 3 colunas como estrutura de conteúdo primária.
Tudo centralizado — text-center em cada seção, mx-auto em cada contêiner, sem tensão espacial.
Cartões para tudo — rounded-xl shadow-lg p-6 em cada bloco de conteúdo, independentemente de precisar ou não de tratamento de cartão.

Regra: Cada layout deve ter pelo menos UM elemento que quebre a grade: assimetria, sobreposição, sangria total, fluxo diagonal ou espaço negativo inesperado. Leia references/layout-patterns.md para wireframes.

Animações na Lista Negra

fade-in-up em cada elemento via IntersectionObserver (a revelação de rolagem universal de IA)
hover:-translate-y-1 hover:shadow-xl em cada cartão
transition-all duration-300 aplicado indiscriminadamente
Animações de ciclo de cor gradiente
Paralaxe genérica em tudo

Regra: Máximo de 2-3 movimentos intencionais por página. Cada um deve servir à hierarquia ou atmosfera. Leia references/motion-recipes.md para mais de 12 alternativas distintas.

Cópia na Lista Negra

Nunca escreva estas frases:

"Revolucione seu fluxo de trabalho" / "Transforme a maneira como você..."
"Desbloqueie o poder de..." / "Integre-se perfeitamente..."
"Construído para o moderno..." / "Acelere seu..."
"Leve seu X para o próximo nível" / "Tudo que você precisa para..."
"Diga adeus a [ponto de dor]" / "Alimentado por tecnologia de ponta..."

Palavras proibidas (a menos que citando o usuário): perfeito, alavancar, ponta, robusto, escalável, empoderar, mudança de jogo, próximo nível, holístico, inovador, estado da arte, aprofundar-se

Regra de cópia: Títulos carregam significado específico. Uma frase curta de apoio por seção. "Se excluir 30% melhora a página, continue excluindo."

Componentes na Lista Negra

Botões de CTA com gradiente (bg-gradient-to-r from-indigo-500 to-purple-600)
Barra de navegação com fundo desfocado (backdrop-blur-md bg-white/80) como padrão
Ícone + título + parágrafo em grade de 3 colunas (o bloco de recurso universal)
Emblemas/pílulas flutuantes em imagens de hero
Carrosséis de depoimentos com avatares circulares e classificações por estrelas
Nuvens de logotipo "Confiam em nós" em faixas horizontais
Tabelas de preços genéricas (Grátis / Pro / Empresarial com selo "Mais Popular")

Sistema de Tipografia

Cada projeto deve estabelecer um sistema de tipo deliberado:

Par de Exibição + Corpo — Duas famílias de tipo distintas. Exibição = cheia de caráter, Corpo = legível. Nunca a mesma fonte para ambos.
Variáveis CSS — --font-display, --font-body, --font-accent (monoespaçada opcional)
Escala modular — Escolha uma proporção (1,25 terça maior, 1,333 quarta perfeita, 1,5 quarta aumentada) e aplique consistentemente
Contraste de peso — Use no mínimo 3 pesos com contraste intencional (por exemplo, 300 corpo, 600 subtítulos, 900 exibição)
Drama de tamanho — Títulos de exibição devem ter 3x+ o tamanho do corpo. Vencedores de prêmios usam proporções de 12:1 (180px exibição / 14px corpo). A IA tem como padrão proporções tímidas de 4:1.

Veja references/typography-pairings.md para mais de 20 combinações prontas para copiar e colar organizadas por tom estético.

Sistema de Cores

Modelo dominante + destaque — Uma família de cor dominante com um destaque nítido contrastante. Paletas uniformemente distribuídas são tímidas.
Propriedades personalizadas CSS — Defina no mínimo: --color-surface, --color-text, --color-accent, --color-accent-contrast, --color-muted
Fundos atmosféricos — Nunca branco liso. Use gradientes sutis, texturas de ruído ou superfícies coloridas. O fundo deve ter profundidade.
Escuro/claro como escolha intencional — Escolha um como primário com base no tom. Não adicione modo escuro como um recurso de marcação.

Veja references/color-systems.md para mais de 15 paletas curadas com blocos de variáveis CSS.

Composição Espacial

Quebrar a grade é obrigatório — Pelo menos um elemento por página deve quebrar a grade: sobreposição, sangria, colocação assimétrica, fluxo diagonal
Layouts assimétricos — Divisões de 7/12 + 5/12 colunas, calhas variadas (24px vs 64px), preenchimento não uniforme
Heróis com sangria total — Imagens de ponta a ponta sem calhas herdadas ou restrições de largura máxima compartilhadas
Espaço negativo como design — Espaço em branco generoso é intencional, não vazio. Espaço em branco assimétrico (120px superior, 80px inferior) adiciona ritmo.
"Cada seção tem um trabalho" — Um título, uma frase de apoio, um propósito. Nenhuma seção tenta fazer duas coisas.
Cartões apenas para interações — Se o conteúdo não precisar de borda/sombra para funcionar, não precisa de um cartão.

Veja references/layout-patterns.md para 6 wireframes de landing page + 3 de dashboard com código CSS Grid.

Movimento e Animação

Entregue exatamente 2-3 movimentos intencionais:

Uma entrada de herói — Escala + desaparecimento, revelação de clip-path, texto dividido em stagger ou paralaxe de contra-rolagem
Um efeito vinculado à rolagem — Revelação de seção, imagem de paralaxe fixa, transformação orientada por progresso ou galeria de rolagem horizontal
Uma interação de passar o mouse/revelação — Cursor magnético, inclinação de perspectiva de cartão, expansão de sublinhado ou mudança de campo de cor

Implementação: Apenas CSS para HTML simples. Framer Motion para React. Transições integradas para Vue/Svelte. Concentre-se em momentos de alto impacto — um carregamento de página bem orquestrado supera micro-interações dispersas.

Veja references/motion-recipes.md para mais de 12 receitas prontas para copiar e colar com versões CSS e Framer Motion.

Fundo e Textura

Nunca use cores sólidas planas como padrão. Crie atmosfera:

Ruído SVG — Filtro feTurbulence para textura de grão orgânico sobre gradientes
Malha de gradiente — 4-6 gradientes radiais sobrepostos para profundidade (não gradientes lineares)
Padrões geométricos — Grades de pontos, grades de linhas, hachura cruzada via radial-gradient ou linear-gradient CSS
Grão de filme — Pseudoelemento com textura de ruído a 3-5% de opacidade
Animação ambiente de movimento lento — Keyframes de aurora/blob com duração de 30s+ no fundo

Veja references/background-textures.md para receitas SVG e CSS prontas para copiar e colar.

O "Toque Humano" — O que Designers Caros Adicionam

Inclua pelo menos 2 destes em cada projeto:

Cursor personalizado — Div circular (20px) seguindo o mouse com atraso de lerp de 150ms, expandindo ao passar o mouse
Espaço em branco assimétrico — Preenchimento não uniforme (120px 8% 80px 12%), margens de seção variadas
Um elemento que quebra regras — Um cartão rotacionado em 2deg, uma imagem sangrando fora da viewport, uma seção com cores invertidas
Tipografia respondendo ao conteúdo — Citações em destaque nas calhas, capitulares, índices de margem, escala de peso com importância
Mudanças de cor acionadas por rolagem — Cor de fundo da seção muda para combinar com o tom emocional do conteúdo
Animação de fonte variável — font-variation-settings animando peso na rolagem ou ao passar o mouse

Protocolos de Tipo de Saída

Landing Page

Estrutura: Hero → Apoio → Detalhe → CTA Final (4 seções, não 9)

Hero: Sangria total, marca + título + uma frase + CTA + visual dominante. Sem emblemas flutuantes, sem múltiplos CTAs.
Apoio: Um recurso, oferta ou ponto de prova concreto.
Detalhe: Atmosfera, profundidade de fluxo de trabalho ou história.
CTA Final: Ação de conversão única.
Orçamento de viewport: Cabeçalho + conteúdo do herói devem caber na viewport inicial.

Dashboard / UI de Aplicativo

Siga "Restrição estilo Linear":

Hierarquia de superfície calma com forte tipografia e espaçamento
Paleta de cores mínima (máximo 2-3 cores)
Arquitetura de informação densa, mas legível
Barra lateral (240px) + principal + inspetor opcional (320px) via CSS Grid grid-template-areas
Uma única cor de destaque clara. Sem mosaicos de cartões, sem gradientes decorativos atrás da UI do produto.

Biblioteca de Componentes

Estabeleça tokens de design primeiro (propriedades personalizadas CSS)
Mostre variantes claras + escuras de cada componente
Atômico: tokens → elementos → componentes → composições
Cada componente deve funcionar isoladamente e em composição

Pôster / Marketing

Ponto focal único, escala tipográfica dramática (títulos de 100px+)
Cor de alto contraste, layout de qualidade de impressão
Crie um pôster digital, não uma página da web com conteúdo de pôster

Aplicativo Web

Elegância funcional: primeiro o teclado, hierarquia de informação clara
Gerenciamento de estado visível na UI (estados de carregamento, vazio, erro, sucesso)
Exibição de informação densa, não layout de marketing espaçoso

Teste de Verificação

Antes de entregar QUALQUER saída, verifique-se contra estas perguntas. Se mais de 2 respostas forem "não", itere antes de mostrar ao usuário.

A marca/produto é inconfundível na primeira viewport?
Há UMA âncora visual forte (não vários elementos concorrentes)?
A página pode ser compreendida apenas lendo os títulos?
Cada seção tem exatamente UM trabalho?
Os cartões são realmente necessários, ou são um padrão preguiçoso?
O design tem uma direção estética nomeável (não "moderno limpo")?
Isso pareceria premium com todas as sombras decorativas removidas?
Tem pelo menos um elemento que faria um designer dizer "Eu não teria pensado nisso"?
Parece com QUALQUER outra página gerada por IA? Se sim, redesenhe.

Para uma rubrica de pontuação detalhada de 20 pontos, veja references/anti-slop-checklist.md.

Adaptação de Tecnologia

Framework	Tipografia	Movimento	Estilo
HTML/CSS simples	Google Fonts `@import`	CSS `@keyframes` + `animation-timeline`	Propriedades personalizadas CSS + Grid/Flexbox
React / Next.js	`next/font` ou Google Fonts	Framer Motion (componentes `motion`)	Tailwind (config muito personalizada) ou Módulos CSS
Vue	Google Fonts em `index.html`	Componentes `<Transition>`	Tailwind (personalizado) ou estilos com escopo
Svelte	Google Fonts em `app.html`	Diretivas `transition:` integradas	`<style>` com escopo com propriedades personalizadas CSS

Regra do Tailwind: Se estiver usando Tailwind, você DEVE personalizar tailwind.config — sobrescreva cores, fontes, border-radius e sombras. A configuração padrão do Tailwind produz IA genérica. Estenda, não use o padrão.

Casos Extremos

Cenário	Resposta
Usuário não fornece direção de design	Escolha um tom ousado, explique sua escolha, prossiga
Usuário diz "limpo e simples"	Interprete como minimalismo modernista suíço, não genérico
Usuário fornece diretrizes de marca	Honre-as, mas eleve — adicione profundidade atmosférica, movimento intencional
Usuário diz "como Apple/Linear"	Estude os PRINCÍPIOS específicos (restrição, densidade, tipografia) — não copie a estética superficial
Vago "deixe bonito"	Trate como landing page com tom editorial de luxo, a menos que o contexto sugira o contrário
Solicitação muito rápida	Use `scripts/init_frontend.py` para estruturar...

wjgoarxiv/my-frontend-design-skill

O que é my-frontend-design-skill?

Perguntar na sua IA favorita

Documentação