Dig Design System MCP

MCP (Model Context Protocol)

O servidor MCP público e ativo da Dig permite que agentes de codificação (Claude Code, Codex e qualquer ferramenta compatível com MCP) descubram e instalem componentes do design system diretamente pelo chat, sem necessidade de cópia manual ou de saber o endereço do registro de cada componente.

Conexão MCP da Dig

O servidor da Dig é um MCP público via Streamable HTTP e não requer conta ou token. O endereço do servidor é o mesmo para todos os clientes:

https://docs.digdesign.ir/api/mcp

Clientes testados

A conexão e todas as ferramentas do servidor foram totalmente testadas nestes clientes.

Claude Code

claude mcp add --transport http dig https://docs.digdesign.ir/api/mcp

OpenAI Codex

Adicione uma entrada em mcp_servers ao arquivo de configuração do Codex, ~/.codex/config.toml:

[mcp_servers.dig]
url = "https://docs.digdesign.ir/api/mcp"

Outros clientes MCP

A Dig segue o padrão Model Context Protocol e provavelmente funciona com qualquer cliente compatível com MCP, mas esses clientes ainda não foram oficialmente testados e o formato de configuração varia um pouco em cada um. Para os mais comuns:

Gemini CLI

No arquivo ~/.gemini/settings.json para todos os projetos, ou no arquivo .gemini/settings.json dentro do projeto. Para HTTP, a chave é httpUrl, não url:

{
  "mcpServers": {
    "dig": { "httpUrl": "https://docs.digdesign.ir/api/mcp" }
  }
}

VS Code

No arquivo .vscode/mcp.json do projeto. Aqui a chave superior é servers e o tipo de conexão deve ser informado:

{
  "servers": {
    "dig": { "type": "http", "url": "https://docs.digdesign.ir/api/mcp" }
  }
}

Cursor

No arquivo .cursor/mcp.json do projeto, ou no arquivo ~/.cursor/mcp.json para todos os projetos:

{
  "mcpServers": {
    "dig": { "url": "https://docs.digdesign.ir/api/mcp" }
  }
}

Windsurf

No arquivo ~/.codeium/windsurf/mcp_config.json com a chave serverUrl:

{
  "mcpServers": {
    "dig": { "serverUrl": "https://docs.digdesign.ir/api/mcp" }
  }
}

Cline, Roo Code e Continue

Nas configurações de MCP dessas extensões, crie um servidor remoto com o tipo streamableHttp e o mesmo endereço. Exemplo para o Cline:

{
  "mcpServers": {
    "dig": { "type": "streamableHttp", "url": "https://docs.digdesign.ir/api/mcp" }
  }
}

Cliente que só suporta servidor local (stdio)

O CLI da Dig executa o servidor MCP como um servidor local; não é necessária instalação separada ou ponte adicional:

{
  "mcpServers": {
    "dig": { "command": "npx", "args": ["-y", "digdesign@latest", "mcp"] }
  }
}

O mesmo comando pode ser testado diretamente: npx -y digdesign@latest mcp fica aguardando mensagens MCP na entrada padrão.

Agente sem MCP

O arquivo llms.txt contém todas as regras de construção com a Dig, a lista de páginas de documentação e todos os blocos em um único texto simples. Forneça o endereço ao agente para que ele saiba por onde começar:

https://docs.digdesign.ir/llms.txt

Teste de conexão

Após conectar, a lista de ferramentas do servidor deve exibir ferramentas como list_components, search_components e get_component_demo. Em seguida, peça isto ao agente:

با MCP دیگ یک صفحهٔ ورود فارسی با فیلد موبایل و دکمهٔ ارسال کد بساز.

Se o agente usar search_components ou get_block e instalar os componentes da Dig, a conexão está correta.

Antes de começar

Os componentes dependem dos tokens de tema da Dig. Se o projeto não tiver o tema, os componentes serão instalados, mas aparecerão com tamanho de fonte, cor e espaçamento incorretos. Portanto, uma vez em cada projeto:

npx digdesign@latest init

E no elemento raiz lang="fa" dir="rtl", aplique uma fonte persa (detalhes na página de instalação). O servidor MCP informa isso ao agente durante a conexão, mas é melhor você mesmo garantir.

Ferramentas disponíveis

Ferramenta	Uso
list_components	Nome de todos os componentes da Dig, categorizados (apenas nomes, para baixo consumo de tokens)
search_components	Busca em persa ou inglês com base na necessidade; para uma página completa (como "página de login" ou dashboard), também retorna os componentes necessários e o guia de combinação
get_component	Comando de instalação, dependências e arquivos de um componente (React); código-fonte completo apenas com include_source
get_component_demo	Exemplos reais de uso, da própria documentação: o menor código funcional, o código completo com imports e todos os estados documentados com título e uso, junto com imports e comando de instalação
get_component_api	Props exatos de cada componente e suas partes, direto dos tipos TypeScript: valores permitidos, padrão e obrigatoriedade, para o agente não criar prop ou variant inexistente
list_blocks / get_block	Páginas completas prontas (login, transferência entre contas, lista de pedidos, etc.) revisadas e com verificação de tipos; código completo com um único comando de instalação, para o agente começar a página a partir de um bloco testado. Blocos da categoria sections não são páginas completas, são seções de landing (header, hero, recursos, depoimento, chamada para ação, rodapé) das quais o agente escolhe um de cada família e empilha. Blocos da mesma família (como landing, login, preços) têm até quatro variações, e get_block retorna as demais variações em other_variants; as imagens reais dos blocos também vêm da biblioteca stock-images junto com a instalação. Cada bloco também tem um checklist adapt (nome da marca, textos, variação, imagem, campos, cor da marca) para o agente não entregar o bloco sem personalização
get_page_patterns	Princípios vivos de composição de página (layout, hierarquia de espaçamento, raio e tamanho consistentes, abas para seleção, hero ousado, dados em persa, imagem real, movimento suave com Reveal) com justificativa e bloco de exemplo; para que até uma página sem bloco pronto seja construída moderna e consistente. Esta lista é viva e cresce a cada novo princípio; o agente a consulta antes de construir qualquer página (com o nome da página para princípios relacionados, ou sem ele para todos)
get_tokens	Tokens de tema (cor semântica, espaçamento, raio, sombra, tipografia) como classes Tailwind; valor claro e escuro apenas com values, para o agente usar tokens em vez de hex ou px brutos. Inclui também os níveis de muted a subtle (um Shade mais claro, para painéis laterais)
customize_theme	Criação de brand.css para um produto a partir da cor da marca (hex ou nome de paleta), raio, fonte e tipo de tema escuro; gera uma rampa de onze passos e garante o contraste dos botões em ambos os temas
get_design_md	Arquivo DESIGN.md do projeto com o modelo DESIGN.md: tokens reais da Dig (e cor da marca) além das regras de layout; fica na raiz do projeto para que qualquer agente, mesmo sem MCP, construa alinhado à Dig. Sem MCP: npx digdesign design-md. A saída bruta legível para o agente também está disponível em /api/design-md.
check_contrast	Contraste WCAG de duas cores ou dois tokens, para tokens em ambos os temas, claro e escuro
review_code	Revisão do código que o agente criou, antes da entrega: verificação de cor bruta no navegador, cor e px manuais, direção física em RTL e opacity; prop ou valor inexistente e import ausente (comparando com os tipos reais); botão de ícone sem nome e imagem sem alt; algarismos latinos e ي/ك árabes em texto persa. Cada item com linha e forma de correção

Uso

Após conectar, basta pedir ao agente para trabalhar com os componentes da Dig; ele mesmo chama as ferramentas acima para encontrar e obter os componentes necessários.

با کامپوننت‌های دیگ یک فرم ورود بساز.

O caminho que o agente percorre para cada página:

1. Com search_components, encontra o componente de cada seção.
2. Com get_component_demo, obtém o modo de uso correto, os imports e o comando de instalação.
3. Para cada estilo manual (cor, espaçamento, sombra), usa get_tokens para pegar tokens, não hex ou px brutos.
4. Envia o código final para review_code e corrige enquanto houver achados.

Se o agente não fizer a última etapa sozinho, peça a ele ao final do trabalho:

کدی که ساختی را با review_code دیگ بررسی کن و همهٔ یافته‌ها را درست کن.

Digche (Digche Icons)

O conjunto de ícones Digche também tem seu próprio servidor MCP separado — encontrar o ícone adequado pelo significado, sugerir um conjunto harmonioso para vários lugares de uma página e obter o SVG final, direto do chat.

O Digche é apenas para lugares livres de ícone: por exemplo, o ícone de carrinho de compras em um cartão de produto, ou o conteúdo de início/fim de um Input. Muitos componentes da Dig (como Password Field com ícone de olho, ou Checkbox com ícone de check) já vêm conectados ao ícone interno da própria Dig; não os substitua por um SVG do Digche, pois isso quebra a harmonia de cor e tamanho.

A busca do Digche entende persa e inglês (por exemplo, "سبد خرید" ou "shopping cart"). Nomes colados em CamelCase como ArrowNarrowLeft devem ser escritos separados: arrow narrow left.

Conexão no Claude Code

claude mcp add --transport http digche https://icons.digdesign.ir/api/mcp

Conexão no Codex

[mcp_servers.digche]
url = "https://icons.digdesign.ir/api/mcp"

Nos demais clientes (Gemini CLI, VS Code, Cursor, etc.), repita as mesmas configurações da seção Outros clientes MCP com o nome digche e o endereço https://icons.digdesign.ir/api/mcp.

Ferramentas disponíveis

Ferramenta	Uso
search_icons	Busca de ícone por significado, nome, etiqueta ou caso de uso
recommend_icons	Sugestão de um conjunto harmonioso de ícones para vários lugares específicos de uma página, em uma única chamada
find_replacement	Encontrar o equivalente no Digche para um ícone de outra biblioteca
preview_icons	Exibição visual de vários ícones candidatos lado a lado, antes da seleção final
get_icon_svg	Obtenção do código SVG válido do ícone e estilo selecionados
list_categories	Lista das categorias e estilos disponíveis na biblioteca

Uso

Após conectar, basta orientar o agente para o ícone desejado; a busca, a comparação e a obtenção do SVG são feitas por ele.

برای این سایدبار یک آیکونِ آپلود مناسب از دیگچه پیدا کن.