Design de UI no Cursor: onde o prompt vai

O Cursor tem três lugares para colocar uma instrução de design: o chat, um arquivo de regras e um doc que ele consegue indexar. Cada um serve para um tamanho de tarefa.

Um componente: o chat

Coloque o menu de ferramenta em Cursor, copie o prompt, cole no chat com o arquivo alvo aberto ou referenciado com @. O prefixo pede CSS puro na folha de estilo existente. O hábito do Cursor é colocar estilos inline no JSX quando o componente é pequeno; se aparecer style={{...}} no diff, diga "mova isso para o arquivo CSS" e ele move.

O projeto inteiro: um arquivo de regras

O Cursor lê .cursor/rules/*.mdc (projetos mais antigos: .cursorrules). Pegue um prompt de estilo nas páginas de Estilos e salve como uma regra que se aplica aos seus arquivos de UI:

---
description: Design direction for all UI
globs: src/**/*.tsx, src/**/*.css
alwaysApply: true
---
(paste the style prompt)

Tokens: --bg:#faf6f1; --fg:#1a1a1a; --accent:#f26207; --radius:12px;
Never add a CSS framework. Keep hover and focus-visible states on every interactive element.

Mantenha abaixo de 200 palavras. Arquivos de regras longos são truncados no contexto, e as últimas linhas são as que somem.

Docs de referência: indexe o markdown

O Cursor consegue indexar uma URL como documentação. Adicione https://designforai.dev/llms.txt em Docs nas configurações e você passa a poder escrever "@Docs designforai use o card neobrutalista" no chat. O índice cobre toda página de snippet e de estilo em forma de markdown.

No que ficar de olho

• O Composer às vezes renomeia classes para bater com a sua convenção de nomes. Inofensivo se for consistente; confira se o CSS foi renomeado também.
• Se o Tailwind está no projeto, o Cursor vai traduzir o CSS em utilitários a menos que a regra diga para não fazer isso. O prefixo do prompt copiado cobre esse caso, mas um arquivo de regras precisa da linha também.
• Snippets animados: o Cursor pode jogar o @keyframes num arquivo de componente onde CSS modules isolam o nome. Ainda funciona, mas o nome muda, então um segundo componente não consegue reaproveitar. Coloque keyframes num arquivo global.