Cursor .cursor/rules/*.mdc

DESIGN.md + Cursor

Referência de configuração: Include do DESIGN.md

Pré-requisitos

  • Cursor instalado (versão com suporte a rules)
  • Projeto com repositório Git inicializado
  • Um arquivo DESIGN.md — copie da biblioteca ou gere com a skill design-md

Configuração

1. Posicionar o DESIGN.md

Coloque o arquivo na raiz do projeto:

meu-projeto/
├── DESIGN.md
├── .cursor/
│   └── rules/
│       └── design.mdc
├── src/
└── ...

2. Criar a regra no Cursor

Crie o diretório .cursor/rules/ e adicione um arquivo design.mdc:

# .cursor/rules/design.mdc

---
description: Regras visuais do design system
globs: ["**/*.tsx", "**/*.jsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.css"]
---

Leia o arquivo DESIGN.md na raiz do projeto antes de gerar qualquer componente visual.

Regras:
- Use APENAS as cores definidas na seção Colors do DESIGN.md
- Siga a escala tipográfica da seção Typography
- Respeite o espaçamento da seção Spacing
- Aplique os padrões da seção Components para estados (hover, disabled, focus)
- Nunca viole as restrições da seção Do's and Don'ts

O campo globs garante que a regra é aplicada apenas em arquivos de UI. Arquivos .mdc são o formato de regras do Cursor.

3. Verificar a configuração

Abra um arquivo de componente e peça ao Cursor:

Crie um formulário de login seguindo o design system do projeto

O Cursor deve ler o DESIGN.md via a regra e aplicar as cores, fontes e espaçamentos definidos.

4. Regras adicionais (opcional)

Para projetos maiores, crie regras separadas por contexto:

# .cursor/rules/components.mdc

---
description: Padrões de componentes
globs: ["**/components/**"]
---

Ao criar componentes, siga estritamente os padrões da seção Components do DESIGN.md.
Cada componente deve ter estados: default, hover, focus, disabled.

Troubleshooting

  • Cursor não lê a regra — verifique se o arquivo tem extensão .mdc (não .md) e está dentro de .cursor/rules/. O Cursor só carrega regras desse diretório.
  • Regra aplicada em arquivos errados — ajuste o campo globs no frontmatter do .mdc. Use padrões específicos para limitar o escopo.
  • Cores ou fontes incorretas — o DESIGN.md pode estar com valores ambíguos. Use nomes semânticos + hex + regra de uso: brand-primary (#1A73E8): apenas CTAs.
  • Inconsistência entre componentes — adicione a seção Components no DESIGN.md com estados explícitos. Sem estados definidos, o Cursor inventa padrões diferentes a cada geração.

Combinações úteis

  • Múltiplas regras .mdc — separe regras por responsabilidade: design.mdc para visual, code-style.mdc para convenções de código, testing.mdc para padrões de teste. O Cursor carrega todas automaticamente.
  • DESIGN.md + .cursorrules — o arquivo .cursorrules na raiz é o equivalente global. Use-o para regras gerais e .cursor/rules/ para regras específicas por tipo de arquivo.
  • Regras com contexto de framework — adicione instruções específicas do framework no .mdc: “Use Tailwind classes conforme o DESIGN.md” ou “Aplique CSS Modules com as variáveis do design system”.

Links úteis