ScreensDesign

Claude Code

1. Ejecútalo en un terminal, en la carpeta de tu proyecto:

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

2. Inicia Claude Code, escribe /mcp, elige screensdesign y selecciona Authenticate. Se abre una ventana del navegador para iniciar sesión en ScreensDesign.

Añade --scope user para que esté disponible en todos los proyectos, no solo en este.

Claude Desktop

1. Abre Customize → Connectors, haz clic en + Add y luego en Add custom connector.
2. Llámalo ScreensDesign y pega esta URL:

https://api.screensdesign.com/v1/mcp

3. Haz clic en Add, luego en Connect, e inicia sesión cuando te lo pida ScreensDesign.

El archivo de configuración JSON de Claude Desktop solo inicia servidores locales. Los servidores remotos van por Connectors, y los conectores que añades en claude.ai también aparecen aquí.

claude.ai

1. Abre el formulario de conectores en claude.ai. Este botón rellena el nombre y la URL por ti:

Añadir a claude.ai (se abre en una pestaña nueva)

2. Comprueba que la URL es https://api.screensdesign.com/v1/mcp y haz clic en Add.
3. Haz clic en Connect e inicia sesión cuando te lo pida ScreensDesign.

Los planes gratuitos permiten un conector personalizado. En los planes Team y Enterprise lo añade un propietario en Organization settings → Connectors.

ChatGPT

1. En chatgpt.com, abre Settings → Security and login y activa Developer mode.
2. Ve a chatgpt.com/plugins y haz clic en + para crear una app para un servidor MCP remoto.
3. Pega https://api.screensdesign.com/v1/mcp como URL del servidor y elige OAuth. ChatGPT te envía a ScreensDesign para iniciar sesión.

El modo de desarrollador está disponible en la web para las cuentas Plus, Pro, Business, Enterprise y Education.

Cursor

Añadir a Cursor (se abre en una pestaña nueva)

O añádelo a mano en ~/.cursor/mcp.json (todos los proyectos) o en .cursor/mcp.json (este proyecto):

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

Cursor muestra Needs authentication junto al servidor. Haz clic en el botón de al lado para iniciar sesión.

VS Code

Instalar en VS Code (se abre en una pestaña nueva)

O desde un terminal:

code --add-mcp '{"name":"screensdesign","type":"http","url":"https://api.screensdesign.com/v1/mcp"}'

O haz commit del archivo en el repositorio como .vscode/mcp.json:

{
  "servers": {
    "screensdesign": {
      "type": "http",
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

VS Code te pide iniciar sesión la primera vez que se inicia el servidor.

Devin Desktop

1. Añádelo a ~/.config/devin/mcp_config.json (macOS y Linux) o a %APPDATA%\devin\mcp_config.json (Windows):

{
  "mcpServers": {
    "screensdesign": {
      "serverUrl": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

2. Actualiza la lista de servidores MCP en Cascade e inicia sesión cuando te lo pida.

Devin Desktop es el nuevo nombre de Windsurf. Para los servidores remotos lee serverUrl (o url).

Codex

codex mcp add screensdesign --url https://api.screensdesign.com/v1/mcp
codex mcp login screensdesign

O edita directamente ~/.codex/config.toml:

[mcp_servers.screensdesign]
url = "https://api.screensdesign.com/v1/mcp"

Gemini CLI

gemini mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

Después, dentro de Gemini CLI, ejecuta /mcp auth screensdesign para iniciar sesión.

Así lo añades al proyecto actual. Añade -s user para usarlo en todas partes.

Cualquier cliente

La mayoría de los clientes aceptan esta forma. Algunos llaman de otra manera al campo de la URL: serverUrl en Devin Desktop, httpUrl en el archivo de ajustes de Gemini CLI.

{
  "mcpServers": {
    "screensdesign": {
      "type": "http",
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

Zed pone los servidores bajo context_servers en sus ajustes. Cline necesita "type": "streamableHttp"; si no, supone SSE.

¿Tu cliente solo inicia servidores locales? Conéctalo con npx -y mcp-remote https://api.screensdesign.com/v1/mcp.

Insignia para README

[![ScreensDesign on mcp.tc](https://mcp.tc/i/screensdesign/badge.svg)](https://mcp.tc/i/screensdesign)

<a href="https://mcp.tc/i/screensdesign"><img src="https://mcp.tc/i/screensdesign/badge.svg" alt="ScreensDesign on mcp.tc" height="20"></a>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

<script src="https://mcp.tc/w/screensdesign.js" async></script>

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala cookies.

iframe

<iframe src="https://mcp.tc/embed/screensdesign" title="ScreensDesign on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, la URL propia del servidor, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

https://mcp.tc/i/screensdesign.json

Qué significa cada campo