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.
- 01 Aponte o agente para o llms.txt
- 02 Instale as regras do Sinapse no repositório
- 03 Conecte o MCP do shadcn ao registry Sinapse
- 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
https://dsystem.sinapse.org.br/llms.txt
https://dsystem.sinapse.org.br/llms-full.txtprompt · projeto novo
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
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
pnpm dlx shadcn@latest add @sinapse/agentsterminal · Vue 3/Nuxt 4
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/agents.jsonAGENTS.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
pnpm dlx shadcn@latest mcp init --client claudeterminal · Vue 3/Nuxt 4
pnpm dlx shadcn-vue@latest mcp init --client claudecomponents.json (Vue/Nuxt)
{
"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
https://dsystem.sinapse.org.br/componentes/button.md
https://dsystem.sinapse.org.br/estilos/tokens.md
https://dsystem.sinapse.org.br/desenvolver/next.mdprompt · componente
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