Usando um prompt de snippet no seu projeto

Você copiou um prompt. Aqui vai onde colar, o que dizer em volta e o que conferir quando o resultado não bate com a demo.

Passo 1: aponte a ferramenta para o arquivo certo

Antes de colar, diga à ferramenta em qual arquivo os estilos ficam e qual elemento recebe a classe. Uma linha basta: "Aplique isto ao botão de envio em src/components/Form.tsx, os estilos vão em form.css." Sem essa linha, o Claude Code vai dar um palpite razoável, e o Cursor às vezes cria um arquivo novo ao lado do que você queria.

Passo 2: cole o prompt como está

O prompt já contém os números e a marcação. Não resuma. Não corte as linhas de hover e focus para economizar espaço; são justamente as partes que as ferramentas erram sozinhas.

Passo 3: confira três coisas

O nome da classe sobreviveu. Ferramentas gostam de renomear .btn-041 para .primary-button. Tudo bem se você pediu. Se não pediu, o resto do prompt pode agora não apontar para nada.
Nenhuma dependência foi adicionada. Abra o diff. Se o package.json mudou para incluir uma biblioteca de animação por causa de um keyframe de 12 linhas, reverta e diga "só CSS puro" de novo.
O focus ainda funciona. Use Tab até o elemento. Se o contorno sumiu, a ferramenta descartou a regra :focus-visible. Peça de volta.

Adaptando as cores

O jeito mais rápido de encaixar um snippet na sua paleta: cole o prompt, depois acrescente "troque #2563eb pelo nosso azul da marca, que é #1b4fd8, e mantenha os mesmos degraus de luminosidade para hover e active." A ferramenta recalcula os tons mais escuros. Se o seu projeto usa CSS custom properties, diga "use var(--brand) em vez do hex" e ela faz a ligação.

Quando o resultado ainda parece diferente

Nove em dez vezes é um destes:

Um reset global no seu projeto define border-radius: 0 ou box-shadow: none em botões. Confira a cascata.
A fonte. As demos usam a pilha de fontes do sistema. Seu projeto usa algo mais estreito ou mais largo, então o padding parece errado. Ajuste o padding, não a fonte.
Preflight do Tailwind. Ele remove o fundo dos botões. Adicione type="button" e a classe, e garanta que o arquivo CSS carregue depois dos utilitários.

Usando o gêmeo em markdown no lugar

Toda página de snippet tem uma versão .md no mesmo endereço. Se a sua ferramenta consegue ler URLs (o Claude Code consegue, com um fetch), você pode pular a área de transferência e dizer "leia designforai.dev/snippet/btn-041.md e aplique ao botão de checkout". Mesmo conteúdo, sem a etapa de copiar.