Como os prompts deste site são escritos

Todo snippet vem com um prompt, e todo prompt segue a mesma forma. Esta página explica essa forma, para você escrever o seu quando a prateleira não tiver o que você precisa.

A única regra: descreva o resultado, não o código

Uma ferramenta de código com IA é boa em transformar uma descrição precisa em CSS. É ruim em adivinhar o que "deixa mais bonito" quer dizer. Então o prompt nomeia a cor como valor hex, o raio em pixels, a sombra com deslocamentos e blur, e o que acontece em hover, focus e active. Nada fica a gosto.

Este é o prompt de Bloco cobalto:

Um botão azul sólido #2563eb com texto branco de 15px semibold, raio de 8px e padding de 13px por 24px. Tem uma sombra azul suave de 1px; no hover escurece para #1d4ed8 e a sombra cresce para 0 4px 12px com azul a 35%. No active vai para #1e40af sem sombra. O foco mostra um outline azul translúcido de 3px.

Leia de novo e conte os números. Seis. Essa é a diferença entre um prompt que reproduz o botão e um que produz "um botão azul", coisa que toda ferramenta já faz sozinha, geralmente mal.

As quatro partes

1. Forma e tamanho. Padding, raio, borda, tamanho e peso da fonte. Se o elemento tem largura fixa, diga.
2. Cor. Fundo, texto, borda, cada um como hex ou valor rgba. Nomeie o espaço de cor só quando importa (oklch para gradientes que não devem ficar barrentos).
3. Estados. Hover, focus-visible, active, disabled. Diga o que muda, quanto muda e quanto dura a transição.
4. Movimento. Se algo anima, dê a duração, o easing e se repete. Mencione prefers-reduced-motion quando a animação é decorativa.

O que o seletor de ferramenta acrescenta

O pequeno menu "para" ao lado de cada botão Copiar prompt acrescenta no início uma frase ajustada à ferramenta: mantenha os nomes de classe, use CSS puro, não adicione biblioteca. Claude Code e Cursor instalam uma dependência de bom grado para desenhar um spinner se você deixar. Essa frase impede. A escolha fica lembrada no seu navegador, então você define uma vez.

Por que a marcação vai junto

O prompt copia o HTML da demo abaixo da descrição. Sem ele, a ferramenta inventa a própria estrutura, e um card com outra ordem de elementos precisa de outro CSS. Com ele, a ferramenta estiliza exatamente o que está nesta página.

Escrevendo o seu

Abra o inspetor do navegador em qualquer elemento que você goste, leia os valores computados e anote na ordem das quatro partes acima. Pule adjetivos. Se você se pegar digitando "moderno" ou "limpo", troque a palavra por um número. Um prompt escrito assim costuma ser mais curto que o CSS que produz, e sobrevive a ser colado em outra ferramenta no mês seguinte.