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

Ícones: uma família por projeto

Comece pelos ícones, porque a bagunça neles aparece de mais longe. Um sino de uma biblioteca ao lado de uma engrenagem de outra tem traço e proporção diferentes. A barra inteira parece montada às pressas.

A regra é escolher uma família só por projeto e escrever o nome dela no arquivo de instruções do agente. Peça o conjunto de uma vez, com a espessura do traço declarada. Cada pedido separado é uma nova chance de o agente escolher outro padrão.

A cor do ícone sai do desenho e vai para um token, ou seja, um apelido de cor guardado num lugar só. Um valor cravado no componente, como #1a1a1a, vira preto sobre preto quando o tema escuro entra. Com var(--color-icon), o mesmo ícone recebe um valor no claro e outro no escuro.

Dentro do botão, uma palavra do CSS termina o serviço que o token começou: currentColor. O desenho declarado com stroke="currentColor" herda a cor do texto do elemento que o abriga, então passar o cursor, chegar pelo teclado e desabilitar o botão movem rótulo e ícone juntos, sem uma segunda variável para cada estado. O token pinta o texto, e o traço acompanha.

Lucide e as outras famílias

A referência do guia é a Lucide, uma família de traço único. A licença dela é a ISC, ou seja, o autor libera o uso comercial sem pedir crédito. Ela tem componente pronto para React, Vue e Svelte, e três ajustes resolvem quase tudo: tamanho, espessura e cor.

Importe só o que usa, com import { Bell, Settings, User }. Assim apenas esses três desenhos entram no pacote que o visitante baixa. A importação em bloco arrasta a coleção inteira para a conta dele.

Catálogo grande não decide a escolha. Phosphor tem 9.072 ícones, Tabler tem 6.184, Heroicons tem 316 e o Material Symbols passa de 2.500 desenhos. O Iconify junta mais de 300.000 num serviço só, e ali cada conjunto mantém a licença do dono.

Licença e catálogo mudam de uma versão para outra. A versão 1.0 da Lucide, de 23 de março de 2026, tirou os ícones de marca do pacote. Quem exibia símbolo de rede social por ela viu o rodapé quebrar. Antes de atualizar pacote visual, leia o registro de mudanças.

Rótulo, alvo de toque e ícone de aplicativo

O rótulo mora no botão e o desenho fica decorativo: aria-label no botão, aria-hidden no ícone. Assim o leitor de tela anuncia uma coisa só, e quem enxerga vê o mesmo comando.

A norma de acessibilidade WCAG 2.2 pede alvo de toque de 24 por 24 pixels. Os 44 pixels que este guia usa vêm do nível mais alto da mesma norma e valem para o botão inteiro, que é o que o dedo alcança.

Para o ícone do aplicativo, cinco arquivos cobrem tudo, e a lista antiga de dezenove tamanhos envelheceu. A conferência que pega fundo preto e recorte é salvar o site na tela inicial de um Android e de um iPhone.

Ilustração e fonte: a licença decide antes do gosto

Com os ícones no lugar, o risco seguinte vem de fora: ilustração e fonte baixadas da internet. Escolha primeiro a categoria, porque categoria errada não se conserta com pedido melhor. Ícone resolve ação, ilustração resolve narrativa e tela vazia, e fundo gerado resolve textura.

Antes de adotar material de fora, faça duas conferências. Abra a licença e procure a palavra comercial. Depois pergunte se aquele desenho ajuda alguém a entender alguma coisa.

Material gratuito com atribuição obrigatória pede crédito visível ao autor. Sem o crédito você descumpre o combinado, mesmo tendo baixado de graça. As diferenças entre as bibliotecas conhecidas cabem num quadro.

A fonte do site vem de dentro de casa

Guarde a fonte dentro do projeto, com o Fontsource, em vez de buscá-la no servidor do Google. O texto aparece antes, porque some uma conexão externa. E o dado de quem visita não sai da sua casa.

O risco tem endereço. Em 20 de janeiro de 2022, o tribunal regional de Munique condenou um site alemão a indenizar um visitante. O Google Fonts remoto enviava ao Google o endereço de internet dele, o número que identifica quem acessa, sem consentimento.

No Brasil a lógica é a mesma pela LGPD, ou seja, a lei que protege os dados do cliente e limita o que você guarda. A autoridade brasileira de proteção de dados lista o endereço de internet entre os dados pessoais.

Prefira fonte variável, porque um arquivo só entrega as várias espessuras. Declare também font-display: swap, para o texto aparecer de imediato na fonte reserva. 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 passa pelo SVGO antes de entrar no projeto. Vetor, ou SVG, é o desenho que o navegador redesenha em qualquer tamanho sem borrar. O resultado esperado é metade do peso, com a arte igual.

Um cuidado mudou de lado na versão 4 do SVGO. Ela parou de remover o viewBox e o title, e o vetor mantém escala e acessibilidade. A mudança entrou em 21 de junho de 2025, e projeto que ainda roda o SVGO 3 precisa do ajuste na mão. Descobrir em qual dos dois casos você está custa um npm ls svgo.

Movimento: suba um degrau por vez

Com os arquivos escolhidos, entra o movimento. O guia organiza a animação numa escada de quatro degraus, ordenada por custo. Suba um degrau só quando o de baixo falhar na sua tela.

• CSS puro (transition e @keyframes): peso zero. Resolve reação ao cursor, foco e entrada de bloco.
• Recurso nativo do navegador: peso zero. O <dialog> entrega janela sobreposta com foco preso, e o popover entrega menu suspenso sem cálculo de posição.
• Motion: custa um pacote. Para React com gesto, mola e entradas coordenadas.
• GSAP: custa pacote e tempo de estudo. Para linha do tempo longa amarrada à rolagem.

Quase toda tela de produto vive nos dois primeiros degraus. Trocar um recurso nativo do navegador por componente de biblioteca cobra peso e devolve o mesmo resultado na tela.

O degrau nativo entre o CSS puro e o Motion

A escada ganhou um degrau depois de desenhada, e ele mora entre o CSS puro e o Motion. A regra @starting-style descreve o estado de onde o elemento parte quando aparece, e com ela a entrada e a saída animam a partir de display: none. O diálogo que surgia de estalo passa a abrir e a fechar com transição, sem uma linha de script.

O painel que abre se resolve com a outra metade da dupla. A propriedade interpolate-size, junto da função calc-size(), deixa a animação chegar em height: auto, a altura que o navegador só conhecia depois de terminar a conta. Chrome e Edge entregam as duas desde a versão 129, e elas estão entre os focos do Interop 2026, o programa em que os fabricantes de navegador combinam o que vão acertar no ano.

Tooltip e popover presos ao ícone, sem biblioteca

Menu e dica de texto que nascem colados a um botão de ícone eram o caso clássico de instalar uma biblioteca de posicionamento. O CSS já dá conta disso sozinho: position-anchor amarra o elemento flutuante à âncora, a função anchor() lê a borda dela para posicionar, e @position-try guarda os planos alternativos para quando a dica encosta no fim da tela.

O suporte fechou o círculo em 2026. O Firefox ligou o recurso por padrão na versão 147 e o Safari 26 passou a entregar o @position-try, o que leva a cobertura para algo em torno de 91% do tráfego global. É o par natural do popover nativo que a escada já recomenda: um entrega a camada por cima, o outro decide onde ela para.

Motion e GSAP, em uma frase cada

O Motion serve a gesto e mola em React: arrastar, reordenar e gaveta que segue o dedo. A versão 13.1.0 saiu em 10 de agosto de 2026, sob licença MIT. Revelar bloco ao entrar na tela continua sendo CSS puro.

O GSAP serve à linha do tempo longa amarrada à rolagem, com cinco peças ou mais entrando em ordem. Ele ficou gratuito por inteiro em 30 de abril de 2025, depois da compra pela Webflow.

A diferença de responsabilidade importa. No Motion, um ajuste desliga sozinho as animações para quem pediu menos movimento. No GSAP essa verificação fica com você, e sem ela a cena roda para quem pediu para não rodar.

As três regras que não se negociam

A primeira é respeitar a preferência de menos movimento do sistema. A população sensível é grande: 35,4% dos adultos com 40 anos ou mais têm alguma disfunção do labirinto. Efeito de profundidade e giro desligam; cor e opacidade continuam.

A segunda é o estado base visível. O opacity: 0 mora dentro do @keyframes from, porque na regra base do elemento ele apaga o conteúdo de quem não recebe a animação.

A terceira é animar só transform e opacity. Animar altura para abrir um painel refaz a conta do desenho a cada quadro, e o toque demora a responder.

As faixas de duração fecham o orçamento: 120 a 200 milissegundos para microinteração, 200 a 300 para troca de estado, 240 como ponto ideal de entrada. Acima de 400 a interface fica preguiçosa. A curva padrão de entrada é ease-out.

O sistema operacional guarda uma segunda preferência ao lado da de movimento reduzido. A consulta prefers-contrast: more entrega a escolha de quem pediu tinta mais separada do fundo, e os tokens de cor respondem a ela como já respondem ao tema escuro: um bloco a mais na folha de estilo, com os valores de contraste elevado. Quem atende o pedido de menos movimento e passa por cima desse segundo pedido cobre metade de quem levantou a mão.

Imagem gerada por IA: direito, coerência e peso

Movimento resolvido, sobra a imagem. A regra de fronteira vem antes de qualquer pedido: 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 sob medida, recurso de código aberto com licença clara ou foto licenciada. A saída do modelo é rascunho, e o desenho final passa por você.

Os três cuidados vêm em ordem, e a ordem faz parte da regra: direito primeiro, coerência depois, peso por último. Trocar essa ordem custa a campanha.

Direito: quem é dono do quê

Cada plataforma tem termos próprios sobre quem detém o resultado. Descobrir isso com a campanha no ar custa mais do que refazer a arte inteira. 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 entra no registro. Nos Estados Unidos a discussão fechou: em 18 de março de 2025, no caso Thaler contra Perlmutter, o tribunal decidiu que direito autoral exige obra criada por gente.

Brasil: a lei de hoje e a que vem

A régua em vigor é a Lei 9.610, de 1998, cujo artigo 11 diz que autor é a pessoa física criadora da obra. Máquina não entra nessa definição, e nenhum tribunal superior brasileiro firmou posição sobre imagem gerada por IA.

O marco legal da inteligência artificial, o PL 2338, passou pelo Senado em 10 de dezembro de 2024 e espera parecer na Câmara. O texto obriga identificador de procedência em conteúdo feito por máquina.

A leitura prática é uma só: trate essa marcação como requisito de projeto agora, porque adaptar depois custa a campanha inteira. O padrão que o mercado já adota é o Content Credentials do C2PA, com especificação publicada em 5 de janeiro de 2026.

O selo que você confere na imagem que chega

A credencial tem duas pontas, e o guia até aqui cobriu a de cima: o arquivo que você gera sai marcado. A de baixo é a imagem que chega pronta, de um banco de imagens, de uma agência ou do celular de um parceiro. Ela entra numa conferência antes de subir para a página.

O padrão publica a própria ferramenta de inspeção, e ela é aberta: abra verify.contentauthenticity.org, da Content Authenticity Initiative, arraste o arquivo e leia o que o selo declara sobre origem e edições. Imagem sem credencial nenhuma continua publicável, e o registro de plataforma, data e instrução que esta seção pede passa a valer também para o material que veio de fora.

Coerência, e o texto que nunca entra na arte

Sem uma instrução base reutilizável, cada seção do site sai com uma estética. Isso anula o motivo de encomendar ilustração própria. Escreva um pedido base com traço, paleta e proporção, e varie só o tema.

Texto nunca vai dentro da imagem gerada. O modelo escreve palavra com erro e acento fora do lugar, e o problema piora em português. Ponha o texto por cima, em HTML: a palavra sai correta e o leitor de tela enxerga.

Pedido vago devolve estética média. O pedido que funciona tem seis linhas. Nelas cabem propósito e público, direção estética em palavras, o que é proibido e o elemento memorável. As duas últimas trazem o piso de acessibilidade e a lista de escolhas, com o motivo de cada uma.

Formato e peso: nunca sirva imagem maior que o espaço

A arte pronta ainda 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.

O tamanho do problema tem medição pública. No levantamento do Web Almanac de 2025, a página inicial mediana pesa 2.862 KB no computador e 2.559 KB no celular. A imagem é o maior pedaço da conta: 1.058 KB e 911 KB.

Velocidade vira dinheiro. Um estudo da Deloitte com 37 marcas mediu o efeito de 0,1 segundo a menos no carregamento do celular: 8,4% a mais de conversão no varejo. Conversão, aqui, é o interessado que vira cliente pagante.

Um número famoso saiu de validade. A estatística de que 53% das visitas de celular somem depois de três segundos vem de um estudo de 2016, cuja página oficial não existe mais. O dado da Deloitte ocupa esse lugar hoje.

A regra mestra é curta: nunca sirva uma imagem maior do que o espaço onde ela aparece. Essa frase resolve a maior parte das páginas lentas.

A escala aparece na esteira. O original de 4,2 MB cai para 380 KB no tamanho real e para 96 KB no formato moderno. Para foto e cena, o alvo é ficar abaixo de 150 KB no espaço em que a imagem aparece.

AVIF é a primeira escolha e WebP é a retaguarda, dois formatos que guardam a mesma foto em bem menos espaço que o JPEG. O WebP funciona em todo navegador desde março de 2023, e o AVIF desde 25 de julho de 2026.

Na entrega, quatro atributos fazem o trabalho

O elemento <picture> oferece os formatos em ordem, e o navegador para no primeiro que entende. Os atributos srcset e sizes fazem o celular baixar a versão pequena, enquanto o computador baixa a grande.

A largura e a altura declaradas reservam o espaço e impedem o botão de mudar de lugar na hora do toque. A prioridade alta vai só na imagem principal do topo, e o carregamento preguiçoso fica para o que está fora da primeira tela.

Imagem decorativa leva alt vazio, e imagem que informa leva descrição objetiva. Repetir o nome do arquivo ali engana quem depende do leitor de tela.

A medição final é a aba de rede do navegador, com o cache desligado. O alvo público é o dos Core Web Vitals: conteúdo principal em 2,5 segundos, resposta ao toque em 200 milissegundos e pouco deslocamento de layout.

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.

A aula: este guia em vídeo e em podcast

O guia inteiro também existe em vídeo de dez minutos e em podcast de vinte e um. O texto continua sendo a fonte, e as duas peças cobrem as mesmas cinco frentes. Use o formato que couber no seu dia.

Perguntas frequentes