Design no Claude Code: prompts, gêmeos em markdown e design.md

O Claude Code lê arquivos e URLs, lembra de um design.md por projeto e consegue instalar skills. Os três são jeitos de entregar um visual a ele em vez de descrever um toda vez.

Mais rápido: cole o prompt

Escolha um snippet, coloque o menu de ferramenta em Claude Code, aperte Copiar prompt, cole na sessão. O prefixo diz a ele para usar CSS puro e manter os nomes de classe. Acrescente uma linha sobre qual arquivo e qual elemento.

Melhor: deixe ele ler o markdown

O Claude Code consegue buscar uma URL. Diga:

Read https://designforai.dev/snippet/btn-041.md and apply that button style to the primary action in src/components/Checkout.tsx. Plain CSS in checkout.css.

Ele recebe o CSS, o HTML e o prompt de uma vez, e você pula a área de transferência. A lista completa de gêmeos em markdown está em /llms.txt.

Visual do site inteiro: coloque um estilo no design.md

Abra qualquer página em Estilos, copie o prompt e cole no design.md do seu projeto sob um título como "Design direction". Todo pedido posterior naquele projeto herda isso. O bloco de semente CSS na mesma página dá as custom properties para começar a folha de estilo:

## Design direction
(paste the style prompt here)

## Tokens
:root { --bg:#0f172a; --fg:#f8fafc; --accent:#7c3aed; --radius:16px; }

Duas notas de quem fez isso em projetos reais. Primeiro, mantenha a seção de direção curta; um manifesto de 400 palavras é resumido para fora do contexto em sessões longas e a ferramenta volta aos padrões. Segundo, nomeie o que evitar ("sem gradientes de roxo para azul, sem brilho atrás do hero"), porque os padrões são justamente o que você está combatendo.

Recursos de Novo em CSS

O Claude Code conhece a maior parte do CSS mais novo, mas tende a puxar a versão segura de 2019 a menos que você peça pelo nome. Os prompts dessas páginas fazem exatamente isso: nomeiam o recurso, indicam o suporte de navegadores e dizem qual é o fallback. Cole um e ele vai usar anchor-position ou @starting-style em vez de uma gambiarra em JavaScript.

A skill frontend-design da própria Anthropic

A Anthropic publica uma skill frontend-design para o Claude Code que o afasta de layouts genéricos. Ela combina bem com este site: a skill decide a composição geral, um prompt de estilo daqui fixa a paleta e a tipografia, e os snippets preenchem os componentes. Se você tem a skill instalada, rode ela primeiro, depois cole o estilo.