# Usar com IA

Como agentes de IA (Claude Code, Codex, Cursor e outros) encontram, instalam e aplicam o Sinapse DS sem confundir o site com o design system.

Guia para agentes

## O site tem uma entrada própria para agentes

Agentes leem o llms.txt, as páginas em Markdown e o registry. Com as regras do Sinapse instaladas no projeto, o agente aplica o Design System sem precisar ler o site inteiro.

1.  01 Aponte o agente para o llms.txt
2.  02 Instale as regras do Sinapse no repositório
3.  03 Conecte o MCP do shadcn ao registry Sinapse
4.  04 Use o Markdown de cada página

1 · Ponto de entrada

## Aponte o agente para o llms.txt

O llms.txt resume instalação, regras e o índice de todas as páginas em Markdown. O llms-full.txt traz a documentação completa em um único arquivo, para agentes que preferem carregar tudo de uma vez.

URLs

```text
https://dsystem.sinapse.org.br/llms.txt
https://dsystem.sinapse.org.br/llms-full.txt
```

prompt · projeto novo

```text
Crie um app Next.js com o Sinapse Design System seguindo https://dsystem.sinapse.org.br/llms.txt.
Use o registry Sinapse para tema, ícones e componentes.
```

prompt · projeto existente

```text
Este projeto usa shadcn. Adote o Sinapse Design System seguindo https://dsystem.sinapse.org.br/llms.txt:
aplique o tema @sinapse/theme e troque os componentes da tela de login pelos equivalentes Sinapse.
```

2 · Regras no projeto

## Instale as regras do Sinapse no repositório

O item agents do registry adiciona SINAPSE.md na raiz do projeto e uma skill do Claude Code em .claude/skills/sinapse. Assim, qualquer sessão futura já conhece as regras do Design System.

terminal · React/Next

```bash
pnpm dlx shadcn@latest add @sinapse/agents
```

terminal · Vue 3/Nuxt 4

```bash
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/agents.json
```

AGENTS.md

```md
Siga SINAPSE.md em qualquer trabalho de interface.
```

O Claude Code encontra a skill sozinho. Para Codex, Cursor e outros agentes, adicione a linha acima ao AGENTS.md do projeto.

3 · MCP

## Conecte o MCP do shadcn ao registry Sinapse

O servidor MCP do shadcn lê os registries do components.json e deixa o agente listar, ver e instalar itens @sinapse direto na conversa. Em React/Next, o namespace @sinapse já vem do base.json ou do comando de configuração da página Comece por aqui; em Vue/Nuxt, registre-o no components.json.

terminal · React/Next

```bash
pnpm dlx shadcn@latest mcp init --client claude
```

terminal · Vue 3/Nuxt 4

```bash
pnpm dlx shadcn-vue@latest mcp init --client claude
```

components.json (Vue/Nuxt)

```json
{
  "registries": {"@sinapse":"https://dsystem.sinapse.org.br/r/vue/{name}.json"}
}
```

Troque claude por cursor, vscode, codex ou opencode conforme o agente.

4 · Páginas

## Use o Markdown de cada página

Toda página do site tem uma versão Markdown limpa, sem a interface do site: acrescente .md ao endereço ou use o botão Copiar Markdown. Para um componente específico, é a forma mais precisa de dar contexto ao agente.

exemplos

```text
https://dsystem.sinapse.org.br/componentes/button.md
https://dsystem.sinapse.org.br/estilos/tokens.md
https://dsystem.sinapse.org.br/desenvolver/next.md
```

prompt · componente

```text
Leia https://dsystem.sinapse.org.br/componentes/modal.md e implemente o modal de confirmação
de exclusão com o componente Sinapse.
```

Próximos passos

## Continue com a referência certa

[

Comece por aqui

Configuração do registry e cópia do CSS.

](/comecar)[

llms.txt

Entrada para agentes, gerada a partir do site.

](/llms.txt)[

MCP do shadcn

Documentação oficial do servidor MCP.

](https://ui.shadcn.com/docs/mcp)