ScreensDesign

Claude Code

1. Eseguilo in un terminale, nella cartella del tuo progetto:

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

2. Avvia Claude Code, digita /mcp, scegli screensdesign e seleziona Authenticate. Si apre una finestra del browser per accedere a ScreensDesign.

Aggiungi --scope user per renderlo disponibile in tutti i progetti, non solo in questo.

Claude Desktop

1. Apri Customize → Connectors, fai clic su + Add, poi su Add custom connector.
2. Chiamalo ScreensDesign e incolla questo URL:

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

3. Fai clic su Add, poi su Connect, e accedi quando te lo chiede ScreensDesign.

Il file di configurazione JSON di Claude Desktop avvia solo server locali. I server remoti passano dai Connectors, e i connettori che aggiungi su claude.ai compaiono anche qui.

claude.ai

1. Apri il modulo dei connettori su claude.ai. Questo pulsante compila nome e URL per te:

Aggiungi a claude.ai (si apre in una nuova scheda)

2. Controlla che l’URL sia https://api.screensdesign.com/v1/mcp e fai clic su Add.
3. Fai clic su Connect e accedi quando te lo chiede ScreensDesign.

I piani gratuiti consentono un connettore personalizzato. Nei piani Team ed Enterprise lo aggiunge un owner in Organization settings → Connectors.

ChatGPT

1. Su chatgpt.com apri Settings → Security and login e attiva Developer mode.
2. Vai su chatgpt.com/plugins e fai clic su + per creare un’app per un server MCP remoto.
3. Incolla https://api.screensdesign.com/v1/mcp come URL del server e scegli OAuth. ChatGPT ti manda su ScreensDesign per accedere.

La modalità sviluppatore è disponibile sul web per gli account Plus, Pro, Business, Enterprise ed Education.

Cursor

Aggiungi a Cursor (si apre in una nuova scheda)

Oppure aggiungilo a mano in ~/.cursor/mcp.json (tutti i progetti) o in .cursor/mcp.json (questo progetto):

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

Cursor mostra Needs authentication accanto al server. Fai clic sul pulsante lì accanto per accedere.

VS Code

Installa in VS Code (si apre in una nuova scheda)

Oppure da un terminale:

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

Oppure fai commit nel repository in .vscode/mcp.json:

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

VS Code ti chiede di accedere la prima volta che il server si avvia.

Devin Desktop

1. Aggiungilo a ~/.config/devin/mcp_config.json (macOS e Linux) o a %APPDATA%\devin\mcp_config.json (Windows):

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

2. Aggiorna l’elenco dei server MCP in Cascade e accedi quando richiesto.

Devin Desktop è il nuovo nome di Windsurf. Per i server remoti legge serverUrl (o url).

Codex

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

Oppure modifica direttamente ~/.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

Poi, dentro Gemini CLI, esegui /mcp auth screensdesign per accedere.

Così lo aggiungi al progetto corrente. Aggiungi -s user per usarlo ovunque.

Qualsiasi client

La maggior parte dei client accetta questa forma. Alcuni chiamano diversamente il campo dell’URL: serverUrl in Devin Desktop, httpUrl nel file di impostazioni di Gemini CLI.

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

Zed mette i server sotto context_servers nelle sue impostazioni. Cline ha bisogno di "type": "streamableHttp", altrimenti presume SSE.

Il tuo client avvia solo server locali? Collegalo con npx -y mcp-remote https://api.screensdesign.com/v1/mcp.

Badge per il 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>

Segue la modalità chiara o scura di chi legge. Aggiungi ?theme=light o ?theme=dark per fissarla, oppure ?style=compact per mostrare il simbolo senza la scritta.

Card per il sito

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

La card compare dove si trova il tag. Aggiungi data-theme="dark" o data-size="compact" al tag per cambiarla. Il file contiene tutto ciò che serve, quindi non fa altre richieste e non imposta cookie.

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>

Usalo nelle pagine che non consentono script. Aggiungi ?theme=light o ?theme=dark all’indirizzo per fissare i colori.

JSON

La scheda come dati per le tue pagine e i tuoi strumenti: nome, descrizione breve, URL del server, tool e i link «Add to». Qualsiasi sito può leggerla (CORS aperto).

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

Cosa significa ogni campo