Design: ícones, ilustrações, animação e geração de imagens

Ícones: uma família por projeto, cor por token

O erro visual mais fácil de enxergar de longe é misturar famílias de ícones. Um sino de uma biblioteca ao lado de uma engrenagem de outra tem traço, cantos e proporção diferentes, e a barra inteira parece montada às pressas. A regra do curso é direta: escolha uma família por projeto e escreva o nome dela no arquivo de instruções do agente. E peça o conjunto de uma vez, com a espessura de traço escrita e a cor vinda do token, nunca um ícone a cada pedido: cada pedido isolado é uma nova chance de o agente escolher outro padrão.

A cor do ícone vai para um token por causa do tema escuro. Um valor cravado como #1a1a1a no componente vira preto sobre preto quando o fundo escurece, e quem revisa no tema claro nunca vê esse defeito. Com var(--color-icon) o mesmo ícone recebe um valor no claro e outro no escuro.

Ícones de aplicativo: cinco arquivos bastam

A lista antiga tinha dezenove tamanhos e envelheceu. Hoje cinco arquivos cobrem tudo, e a única conferência que pega o fundo preto e o recorte é salvar o site na tela inicial de um Android e de um iPhone.

Quadro do curso Frontends com Vibecoding; a lista antiga de dezenove tamanhos deixou de cobrir caso novo.

Ilustrações, tipografia e a licença que decide

Escolha a categoria antes da biblioteca, porque categoria errada não se conserta com prompt melhor. Ícone resolve ação e estado, como salvar ou alertar. Ilustração resolve narrativa e vazio, como a tela sem dado nenhum: a ilustração de estado vazio é a primeira coisa que todo usuário novo vê, e costuma ser a última a receber atenção. Fundo generativo resolve textura sem o peso de uma imagem.

Antes de adotar qualquer material de fora, duas checagens: abra a licença e procure a palavra "comercial"; e confira se o recurso ajuda alguém a entender alguma coisa. Material gratuito com atribuição obrigatória exige crédito visível ao autor: sem o crédito você descumpre o combinado mesmo tendo baixado de graça. Para ilustração aberta, o curso cita unDraw, Storyset, Humaaans e Open Peeps, sempre com a licença conferida antes do uso comercial; para avatar, DiceBear e Boring Avatars.

Quadro do curso Frontends com Vibecoding.

SVG inline sob medida

Quando nenhuma biblioteca chega perto da paleta da marca, peça a figura em SVG inline. Três vantagens: lê os tokens de cor por currentColor e variável CSS, escala sem perder nitidez e não acrescenta requisição de rede. Dois pontos que o agente costuma pular e precisam estar no pedido: cor por variável em cada elemento, porque SVG não herda fill, e acessibilidade declarada com role="img" e um título descritivo.

Tipografia servida do próprio site

Guarde a fonte dentro do projeto com o Fontsource em vez de buscá-la no servidor do Google: economiza uma ida e volta de rede antes de o texto aparecer, e o endereço de rede do visitante deixa de sair para outra empresa, o que a LGPD trata como transferência de dado pessoal. Prefira fonte variável: um arquivo único produz todos os pesos. E não esqueça font-display: swap: sem ele o texto fica invisível enquanto a fonte carrega, e no celular ruim isso dura segundos. A conferência final é a aba Rede do navegador, sem nenhuma chamada para fonts.googleapis.com.

Vetor exportado passa pelo SVGO

Todo vetor que sai do Figma ou do Illustrator passa pelo SVGO antes de entrar no projeto: o resultado esperado é metade do tamanho ou menos, com a arte visualmente idêntica. Um único ajuste é inegociável: manter removeViewBox: false na configuração, porque o preset padrão remove o viewBox e o vetor perde a capacidade de escalar, aparecendo do tamanho errado.

Bibliotecas de animação: a escada do movimento

O curso organiza o movimento numa escada de quatro degraus, ordenada por custo, e a instrução é subir um degrau por vez, só quando o de baixo falhar na sua tela. Quase toda tela de produto vive nos dois primeiros degraus.

1. CSS puro (transition e @keyframes): peso zero. Resolve reação ao cursor e ao foco, entrada de bloco e a maior parte das animações de interface sem uma linha de JavaScript.
2. Recurso nativo do navegador: peso zero. <dialog> entrega janela sobreposta com foco preso e tecla Esc; o atributo popover entrega menu suspenso e dica flutuante sem cálculo de posição. Trocar qualquer um dos dois por componente de biblioteca cobra peso e devolve o mesmo resultado.
3. Motion: custa um pacote. Para React com gesto, mola e entradas coordenadas.
4. GSAP: custa pacote e tempo de estudo. Para linha do tempo longa amarrada à rolagem, com cinco ou mais peças entrando em ordem.

Quadro do curso Frontends com Vibecoding, com o estado das bibliotecas registrado em julho de 2026. O conselho que acompanha: escolha a linha mais alta que resolve o seu caso, e desça uma linha só quando conseguir dizer, em voz alta, o que a de cima não faz.

As duas bibliotecas, em uma frase cada

Motion instala com npm i motion e importa de motion/react; o nome "framer-motion" é o antigo, e confundi-lo com o construtor de sites Framer é o engano mais comum da área. A física de mola incorpora a velocidade de um gesto em curso, então arrastar, reordenar e gaveta que segue o dedo são o território dele; revelar bloco ao entrar na tela continua sendo CSS puro. A versão 12.42.2 saiu em 30 de junho de 2026.

GSAP ficou gratuito por inteiro em 30 de abril de 2025, com os complementos antes restritos a assinantes, entre eles quebra de texto, desenho de traço e rolagem amarrada; a versão 3.15.0 saiu em 13 de abril de 2026. Em React, embrulhe em useGSAP para a limpeza na desmontagem. O erro de estreia clássico é instalar o GSAP para animar um estado de cursor: peso e dependência sem ganho que alguém perceba na tela. E a diferença de responsabilidade importa: o Motion informa quando a pessoa pediu menos movimento; no GSAP essa verificação é sua, e sem ela a cena inteira roda para quem pediu para não rodar.

Duração, curva e orçamento

As faixas do curso: microinteração entre 120 e 200 milissegundos, transição de estado entre 200 e 300, e 240 milissegundos como o ponto ideal de uma entrada; acima de cerca de 400 a interface fica preguiçosa. A curva padrão de entrada é ease-out, que imita a chegada de um objeto físico; mola com leve ultrapassagem fica para momentos escolhidos de deleite, porque cansa em tudo; e linear não serve para movimento de interface, porque nada no mundo físico se move em velocidade constante. O teto operacional é medível: nenhuma piora na resposta ao toque, medida no aparelho do cliente, no percentil 75. Estourou o limite, você pode recusar a entrega.

O teste de utilidade que decide se um movimento entra: que gesto ele confirma, ou que espera ele preenche? Reprovam texto aparecendo letra por letra, elemento que pula ou gira sem motivo funcional, efeito pesado de profundidade na rolagem e animação que segura o conteúdo refém até terminar. Passam o botão que afunda e confirma o clique, o item que desliza ao entrar na lista, o painel que desliza da direita e orienta onde se está, e a continuidade entre telas que evita a piscada.

Uma referência de mercado do curso, da auditoria do autor sobre 26 sites de alto padrão em 22 de junho de 2026: a base do movimento em todos os 26 é CSS puro, o espetáculo aparece em só 3, e neles a animação é a tese da marca. No acervo landing.love, com 2.141 sites selecionados pelo movimento, o GSAP aparece marcado em 191, WebGL em 133 e ThreeJS em 74: cada etiqueta cobre menos de um décimo. Movimento rico dispensa biblioteca com mais frequência do que o catálogo sugere.

Geração de imagens: direito primeiro, coerência depois, peso por último

A regra de fronteira vem antes de qualquer prompt: use imagem gerada por modelo para textura e cena de fundo que você vai editar depois. Para o que representa a marca, como logotipo, ícone de sistema e diagrama, use vetor desenhado sob medida, recurso de código aberto com licença clara ou foto licenciada. A saída gerada é rascunho para identidade: o desenho final passa por você.

O curso ordena três cuidados, e a ordem é parte da regra:

1. Direito primeiro. Cada plataforma tem termos próprios sobre quem detém o resultado e sobre uso comercial, e descobrir isso com a campanha no ar custa mais do que refazer a arte inteira. A licença de saída costuma ser não exclusiva, a responsabilidade por violação de direito de terceiro fica com quem publicou, e parte das plataformas proíbe revender a imagem como arquivo avulso. Registre plataforma, data, instrução usada e edições feitas: o que protege é a contribuição humana registrada, porque a geração pura não é registrável. Nos Estados Unidos, a Suprema Corte negou seguimento ao caso Thaler contra Perlmutter em 2 de março de 2026, mantendo a posição de que obra puramente gerada por máquina não recebe registro de direito autoral; obras com contribuição humana relevante seguem protegíveis, e o limiar dessa contribuição não foi definido.
2. Coerência depois. Sem uma instrução base reutilizável, cada seção do site sai com estética diferente, o que anula o motivo de ter encomendado ilustração própria. Escreva um prompt-base com traço, paleta e proporção, e varie só o tema. O teste: se cada seção saiu com uma estética diferente, você encomendou quatro imagens avulsas em vez de um conjunto. Sem direção de arte, o resultado converge para estética de banco de imagem.
3. Peso por último. A saída do modelo chega com vários megabytes e ainda atravessa a esteira de preparo da seção seguinte: converter para AVIF ou WebP no tamanho do espaço real onde a imagem aparece.

Os cinco caminhos de criação

Ordenados pelo peso que deixam no projeto; a escolha decide onde você aceita pagar: em licença, em manutenção ou no processador de quem visita.

• Modelo de imagem: cena inédita que nenhum banco tem; o mais caro em direito e em revisão.
• Vetor escrito em código: forma, padrão e gradiente; nenhum arquivo binário no repositório, e o fundo herda a cor do tema.
• Capa de link gerada por página: a imagem de compartilhamento montada do título real; a única que escala junto com a publicação, com custo marginal zero depois que o gerador está de pé.
• Avatar determinístico por semente: recalculado do identificador do usuário; nenhum arquivo guardado, nenhuma imagem enviada para moderar.
• Arte gerada em tela (canvas): fundo e composição interativa; a que mais cobra do aparelho do cliente.

Direção estética declarada antes do código

Quando a peça é gerada com agente de IA, a direção se declara antes, porque direção declarada depois da geração vira justificativa do que já foi feito. Pedido vago devolve estética aleatória: "faça uma landing bonita" e "moderno e bonito" são as palavras que devolvem exatamente a média. O pedido que funciona tem seis linhas: propósito e público; direção estética em palavras; o que é proibido, porque a proibição funciona melhor que o pedido; o elemento memorável descrito; o piso de acessibilidade reafirmado; e a lista das escolhas feitas com o motivo de cada uma. Dimensão sem dono não some do resultado: ela é decidida pelo modelo, com o que ele viu mais vezes. E nenhuma direção ousada revoga o piso de contraste: quando estética e legibilidade colidirem, a legibilidade fica.

Formato e peso: a esteira que ninguém pode pular

Geração, formato e peso são o mesmo arquivo visto em três momentos: quando nasce, quando é convertido e quando atravessa a rede de outra pessoa. O desperdício mais silencioso é servir a foto do jeito que ela saiu da pasta: quem abre a página no 4G desiste antes de ver o preço, e essa desistência não deixa registro em lugar nenhum.

Quadro do curso Frontends com Vibecoding, montado sobre o suporte de formato dos navegadores atuais.

Na entrega, quatro atributos fazem o trabalho: o elemento <picture> oferece os formatos em ordem e o navegador para no primeiro que entende; srcset e sizes fazem o celular baixar a versão de 480 pixels enquanto o computador baixa a de 1600, e sem eles todo mundo baixa a maior; width e height declarados reservam o espaço e impedem o botão de mudar de lugar no instante em que o dedo vai tocá-lo. A prioridade de carregamento vai só na imagem principal do topo: marcar todas como prioritárias equivale a não marcar nenhuma, porque o navegador perde o critério de qual baixar primeiro.

Sobre a descrição alternativa: imagem decorativa leva alt=""; imagem informativa leva descrição objetiva do conteúdo, nunca o nome do arquivo. Descrição que repete o nome do arquivo é pior que nenhuma, porque engana quem depende do leitor de tela. A medição final é a aba de rede do navegador, com o cache desativado e a limitação de rede ligada: o alvo público citado pelo curso é o conteúdo principal aparecer em até 2,5 segundos no percentil 75 de visitantes reais, e o critério de saída é conseguir dizer, de cada ativo, de onde veio, sob qual licença entrou e quanto pesa no espaço em que aparece.

Prompts prontos do curso

Três pedidos completos, transcritos do material do curso, para copiar e adaptar. Eles carregam as restrições que o agente não acrescenta por conta própria: família única, cor por token, acessibilidade e menos movimento.

Cabeçalho com ícones coerentes

Monte o cabeçalho do app usando ícones Lucide, NÃO emojis. Quero três ações:
Notificações (sino), Configurações (engrenagem) e Perfil (usuário).
Regras: Todos os ícones com o MESMO tamanho (20px) e strokeWidth 1.75.
A cor deve vir do token --color-icon (não hex fixo), para adaptar em dark/light.
Cada botão precisa de aria-label e área de toque >= 44px.
Estado de foco visível (anel) navegável por teclado.
Me mostre o TSX e diga quais ícones do Lucide você usou.

Conjunto de ilustrações com estética única

Preciso de 4 ilustrações para as seções do site, com estética COERENTE:
traço/linha limpo, paleta com a cor de destaque #[hex] e tons neutros;
proporção 4:3, fundo transparente ou claro.
Gere um prompt-base reutilizável que eu possa variar só no tema.
Antes de gerar, confirme a licença de uso comercial do modelo e quem detém
os direitos da imagem resultante. Entregue as imagens em alta e liste o
passo de otimização (converter para AVIF/WebP e gerar o tamanho certo).

Orçamento de movimento da página

Aplique o orçamento de movimento desta página:
microinteração de 120 a 200 ms; transição de estado de 200 a 300 ms;
mola com rigidez ~300 e amortecimento ~30; anime só transform e opacity;
respeite prefers-reduced-motion; o estado base nasce visível.
Justifique em uma frase cada escolha. Se propuser Motion ou GSAP, diga
em uma frase por quê. Se eu escrever "Framer Motion", leia "a lib Motion
(motion/react)", nunca o builder Framer. Ao final, liste o que conferir
na aba de rede e o peso total da primeira visita.