As quatro alavancas de um design

A orientação da própria Anthropic para conseguir resultados mais bonitos do Claude — a documentação, o cookbook, a skill de frontend-design — volta sempre às mesmas quatro dimensões. Aprenda a enxergá-las separadamente e você diagnostica qualquer página em menos de um minuto.

Aqui está a mesma página plana, competente e sem direção, com uma alavanca puxada por vez. Nada mais muda entre os dois lados de cada slider.

Alavanca 1 · Tipografia

AntesDepois

↔

A mesma página só com a tipografia mudada: fonte do sistema trocada por uma serifa editorial superdimensionada com uma palavra de destaque em itálico — Antes / Depois

O tipo é a alavanca mais forte porque é a que o leitor sente primeiro. A página base usa uma fonte numa escala educada — sem voz nenhuma. O lado direito assume: uma fonte display com personalidade, um salto extremo de tamanho no título, uma segunda fonte (mono) para os labels pequenos. Duas fontes com funções claras vencem uma fonte fazendo tudo.

Alavanca 2 · Cor

AntesDepois

↔

A mesma página só com a cor mudada: branco e cinza trocados por um fundo espresso escuro com um único acento laranja-brasa — Antes / Depois

Repare no que o lado direito não é: não é cinco cores em quantidades iguais. É uma cor dominante que é dona da página e um acento que ganha atenção justamente porque é escasso. Paletas tímidas, equilibradas demais, são um sinal; assumir uma cor é uma decisão.

Alavanca 3 · Fundo e profundidade

AntesDepois

↔

A mesma página só com o fundo mudado: branco chapado trocado por gradientes em camadas, um motivo de anel desenhado e uma sombra de verdade — Antes / Depois

Branco chapado atrás de tudo é o vazio onde a página média flutua. Profundidade é barata: um gradiente em camadas, um motivo geométrico, uma sombra com propósito. O lado direito continua sem cor e sem tipografia especial — e já parece a página de alguém.

Alavanca 4 · Movimento

A única que uma captura de tela não consegue mostrar. Movimento é uma alavanca de verdade — mas o jeito que a IA sem direção o usa (um fade levinho em tudo, tremidinhas de hover por toda parte) é, em si, um sinal. A regra que você vai aplicar no módulo 5, quando suas páginas estiverem vivas num navegador: um momento orquestrado vence dez efeitos espalhados. Uma página que carrega numa sequência deliberada — título, depois apoio, depois ações — parece dirigida. Uma página onde tudo dá um fade leve parece gerada.

A técnica: puxe uma alavanca por vez

É também assim que você escreve o prompt. Pedir ao Claude para "deixar com mais cara de design" move as quatro alavancas de uma vez, mal. Pedir para mover uma é preciso e revisável. Abra o seu artifact da última aula e rode exatamente isto:

Mantenha o layout, as cores e o conteúdo exatamente como estão.
Mude SOMENTE a tipografia: escolha uma fonte display marcante, com
personalidade de verdade, para o título; deixe-a dramaticamente maior
que o corpo do texto; e use uma fonte monoespaçada para os labels
pequenos. Não toque em mais nada.