Dig Design System MCP

Conecta asistentes de codificación con IA al DIG Design System. Accede a componentes, tokens de diseño, patrones y documentación para construir interfaces consistentes y alineadas con el sistema de diseño mediante IA.

Ver en digdesign.ir

Documentación

MCP (Model Context Protocol)

El servidor MCP público y activo de Dig permite a los agentes de codificación (Claude Code, Codex y cualquier herramienta compatible con MCP) descubrir e instalar componentes del sistema de diseño directamente a través del chat, sin necesidad de copiar manualmente o conocer la dirección del registro de cada componente.

Conexión MCP de Dig

El servidor de Dig es un MCP público sobre Streamable HTTP y no requiere cuenta ni token. La dirección del servidor es la misma para todos los clientes:

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

Clientes probados

La conexión y todas las herramientas del servidor han sido probadas exhaustivamente en estos clientes.

Claude Code

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

OpenAI Codex

Agrega una entrada bajo mcp_servers al archivo de configuración de Codex, es decir, ~/.codex/config.toml:

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

Otros clientes MCP

Dig sigue el estándar Model Context Protocol y probablemente funcione con cualquier cliente compatible con MCP, pero estos clientes aún no han sido probados oficialmente y la forma de configuración varía ligeramente en cada uno. Para los más comunes:

Gemini CLI

En el archivo ~/.gemini/settings.json para todos los proyectos, o el archivo .gemini/settings.json dentro del proyecto. Para HTTP, la clave es httpUrl, no url:

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

VS Code

En el archivo .vscode/mcp.json del proyecto. Aquí la clave superior es servers y se debe especificar el tipo de conexión:

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

Cursor

En el archivo .cursor/mcp.json del proyecto, o el archivo ~/.cursor/mcp.json para todos los proyectos:

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

Windsurf

En el archivo ~/.codeium/windsurf/mcp_config.json con la clave serverUrl:

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

Cline, Roo Code y Continue

En la configuración MCP de estas extensiones, crea un servidor remoto con el tipo streamableHttp y la misma dirección. Ejemplo para Cline:

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

Cliente que solo admite servidor local (stdio)

El CLI de Dig ejecuta el servidor MCP como un servidor local; no se necesita instalación adicional ni un puente:

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

El mismo comando se puede probar directamente: npx -y digdesign@latest mcp espera mensajes MCP en la entrada.

Agente sin MCP

El archivo llms.txt contiene todas las reglas de construcción con Dig, la lista de páginas de documentación y todos los bloques en un texto plano. Dale la dirección al agente para que sepa por dónde empezar:

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

Prueba de conexión

Después de conectarte, la lista de herramientas del servidor debería mostrar herramientas como list_components, search_components y get_component_demo. Luego pídele esto al agente:

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

Si el agente usa search_components o get_block e instala los componentes de Dig, la conexión es correcta.

Antes de comenzar

Los componentes dependen de los tokens de tema de Dig. Si el proyecto no tiene el tema, los componentes se instalarán pero se verán con un tamaño de fuente, color y espaciado incorrectos. Por lo tanto, una vez por proyecto:

npx digdesign@latest init

Y coloca en el elemento raíz lang="fa" dir="rtl" una fuente persa (detalles en la página de instalación). El servidor MCP también lo indica al conectarse al agente, pero es mejor que te asegures tú mismo.

Herramientas disponibles

Herramienta	Uso
list_components	Nombres de todos los componentes de Dig, categorizados (solo nombres, para bajo consumo de tokens)
search_components	Búsqueda en persa o inglés según la necesidad; para una página completa (como «página de inicio de sesión» o panel) también devuelve los componentes necesarios de esa página y una guía para combinarlos
get_component	Comando de instalación, dependencias y archivos de un componente (React); el código fuente completo solo con `include_source`
get_component_demo	Ejemplos reales de uso, desde la propia documentación: el código funcional más corto, el código completo con import, y todos los estados documentados con su título y uso, junto con los imports y el comando de instalación
get_component_api	Props exactos de cada componente y sus partes, directamente desde los tipos TypeScript: valores permitidos, valores predeterminados y obligatoriedad, para que el agente no cree props o variantes inexistentes
list_blocks / get_block	Páginas completas listas (inicio de sesión, transferencia de tarjeta a tarjeta, lista de pedidos, etc.) que han sido revisadas y verificadas tipográficamente; código completo con un comando de instalación, para que el agente comience la página desde un bloque probado. Los bloques de la categoría `sections` no son páginas completas, son fragmentos de aterrizaje (encabezado, héroe, características, testimonio, llamada a la acción, pie de página) de los cuales el agente toma uno de cada familia y los apila. Los bloques de la misma familia (como aterrizaje, inicio de sesión, precios) tienen hasta cuatro modelos, y `get_block` devuelve los demás modelos en `other_variants`; las imágenes reales de los bloques también vienen con la instalación desde la biblioteca `stock-images`. Cada bloque también tiene una lista de verificación `adapt` (nombre de marca, textos, modelo, imagen, campos, color de marca) para que el agente no entregue el bloque sin modificar
get_page_patterns	Principios vivos de composición de página (diseño, jerarquía de espaciado, radios y tamaños uniformes, pestañas para selección, héroe audaz, texto persa, imagen real, movimiento suave con `Reveal`) con su razón y bloque de ejemplo; para que incluso una página sin bloque listo se construya moderna y coherente. Esta lista es viva y crece con cada nuevo principio; el agente la invoca antes de construir cada página (con el nombre de la página para principios relevantes, o sin él para todos)
get_tokens	Tokens de tema (color semántico, espaciado, radio, sombra, tipografía) como clases Tailwind; el valor claro y oscuro solo con `values`, para que el agente use tokens en lugar de hex o px crudos. Incluye niveles desde `muted` hasta `subtle` (un Shade más claro, para paneles laterales)
customize_theme	Crear brand.css para un producto a partir del color de marca (hex o nombre de paleta), radio, fuente y tipo de tema oscuro; genera una rampa de once pasos y garantiza el contraste de los botones en ambos temas
get_design_md	El archivo `DESIGN.md` del proyecto con la plantilla DESIGN.md abierta: tokens reales de Dig (y color de marca) además de reglas de diseño; se coloca en la raíz del proyecto para que cualquier agente, incluso sin MCP, construya en armonía con Dig. Sin MCP: `npx digdesign design-md`. La salida cruda legible para el agente también está disponible en /api/design-md.
check_contrast	Contraste WCAG de dos colores o dos tokens, para tokens en ambos temas claro y oscuro
review_code	Revisión del código que el agente ha creado, antes de la entrega: control de navegador crudo, color y px manuales, dirección física en RTL y opacity; prop o valor inexistente e import faltante (comparando con los tipos reales); botón de icono sin nombre e imagen sin alt; dígitos latinos y ي/ك árabes en texto persa. Cada uno con su línea y forma de corrección

Uso

Después de conectarte, basta con pedirle al agente que trabaje con los componentes de Dig; él mismo invocará las herramientas anteriores para encontrar y obtener los componentes necesarios.

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

El flujo que el agente sigue para cada página:

Con search_components encuentra el componente de cada sección.
Con get_component_demo obtiene la forma correcta de uso, los imports y el comando de instalación.
Para cada estilo manual (color, espaciado, sombra) toma el token de get_tokens, no hex o px crudos.
Envía el código final a review_code y lo corrige hasta que no haya hallazgos.

Si el agente no realiza el último paso por sí mismo, al final del trabajo pídele:

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

Digche (Digche Icons)

El conjunto de iconos Digche también tiene su propio servidor MCP separado: encontrar el icono adecuado según el significado, sugerir un conjunto coherente para varios lugares de una página, y obtener el SVG final, directamente desde el chat.

Digche es solo para lugares libres de iconos: por ejemplo, el icono de carrito de compras en una tarjeta de producto, o el contenido al inicio/fin de un Input. Muchos componentes de Dig (como Password Field con el icono de ojo, o Checkbox con el icono de marca de verificación) ya están conectados al icono interno de Dig; no los reemplaces con un SVG de Digche, porque romperías la armonía de color y tamaño.

La búsqueda de Digche entiende persa e inglés (por ejemplo, «سبد خرید» o «shopping cart»). Los nombres unidos en CamelCase como ArrowNarrowLeft deben escribirse separados: arrow narrow left.

Conexión en Claude Code

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

Conexión en Codex

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

En los demás clientes (Gemini CLI, VS Code, Cursor, etc.) repite la misma configuración de la sección Otros clientes MCP con el nombre digche y la dirección https://icons.digdesign.ir/api/mcp.

Herramientas disponibles

Herramienta	Uso
search_icons	Búsqueda de iconos por significado, nombre, etiqueta o caso de uso
recommend_icons	Sugerencia de un conjunto coherente de iconos para varios lugares específicos de una página, en una sola llamada
find_replacement	Encontrar el equivalente de Digche para un icono de otra biblioteca
preview_icons	Vista previa visual de varios iconos candidatos juntos, antes de la selección final
get_icon_svg	Obtener el código SVG válido del icono y estilo seleccionado
list_categories	Lista de categorías y estilos disponibles en la biblioteca

Uso

Después de conectarte, basta con guiar al agente hacia el icono necesario; la búsqueda, comparación y obtención del SVG las realiza él mismo.

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