Gradiently Claude-connector: designa med MCP inuti Claude

För att sätta upp Gradiently Claude-connectorn pekar du Claude mot den värdbaserade MCP-servern i Gradiently på https://gradiently.design/api/mcp. I Claude-appen lägger du till den som en anpassad connector och loggar in på Gradiently. I Claude Code lägger du till den från terminalen med en begränsad API-nyckel. Oavsett väg kan Claude sedan söka bland Marks, läsa ditt varumärkeskit och göra designer som sparas i din arbetsyta och öppnas i Studio, med varje ord fortfarande redigerbart.

MCP, Model Context Protocol, är den öppna standarden som låter Claude använda riktiga verktyg. Vad är MCP förklarar den enkelt, och själva protokollet dokumenteras på modelcontextprotocol.io.

Vilken väg du ansluter Claude på

Vilken väg du än tar måste du vara ägare eller administratör av Gradiently-arbetsytan. Redigerare och läsare kan inte ansluta assistenter eller skapa nycklar.

Anslut Claude-appen med en anpassad connector

1. 1

   Öppna Claudes connectorinställningar

   Lägg till en anpassad connector. Vilka Claude-planer som tillåter anpassade connectors avgör Anthropic, så kolla Claudes hjälpsidor om du inte ser alternativet. Claude-connectors förklarar funktionen.

2. 2

   Klistra in serveradressen

   Döp den till Gradiently och använd https://gradiently.design/api/mcp. Välj OAuth-inloggning.

3. 3

   Logga in och välj en arbetsyta

   I Gradiently-fönstret väljer du arbetsytan Claude ska arbeta i och läser behörigheterna under Tillåt den här assistenten att.

4. 4

   Tillåt, kontrollera sedan

   Välj Tillåt anslutning. Tillbaka i Claude ber du den lista sina Gradiently-verktyg för att bekräfta.

Åtkomsten förnyas automatiskt i upp till 30 dagar, sedan ansluter du igen. En anpassad connector är din att använda direkt; en notering i Claudes publika katalog är separat och kräver Anthropics granskning.

Anslut Claude Code med en begränsad API-nyckel

Claude Code använder en nyckel i stället för inloggning. Skapa en i Gradiently under Inställningar › API och agenter: välj arbetsyta, döp den efter var den bor (Claude Code, laptop), kryssa i vad den får göra och välj Skapa nyckel. Nyckeln visas en gång, så kopiera den till din lösenordshanterare direkt.

export GRADIENTLY_API_KEY="gr_live_…"

claude mcp add --transport http gradiently https://gradiently.design/api/mcp \
  --header "Authorization: Bearer $GRADIENTLY_API_KEY"

Andra klienter som läser en JSON-fil accepterar oftast samma server och huvud. Inställningar visar ett färdigt utdrag under Anslut en MCP-klient.

{
  "mcpServers": {
    "gradiently": {
      "url": "https://gradiently.design/api/mcp",
      "headers": { "Authorization": "Bearer gr_live_…" }
    }
  }
}

Välj nyckelns behörigheter

Varje behörighet är ett scope. En ny nyckel startar med fem som täcker varje designverktyg, så de flesta ändrar ingenting. Lägg bara till de andra när Claude verkligen behöver dem.

Vad Claude kan göra när den är ansluten

Claude arbetar genom samma handlingar som du har i produkten. Den kan söka i Marknaden efter namn, färgord eller kod; läsa ditt varumärkes profil, röst och typsnitt; rita en originaldesign, titta på den renderade bilden och förfina den; fylla i en av mallarna i Gradiently; ändra orden på en sparad design; göra kopior med ändrad storlek; och rendera en design till PNG eller PDF. När Claude komponerar designen själv tar Gradiently inga AI-krediter. Om du ber den lämna jobbet till Gradiently-Designern använder det krediter som i Studio.

Claude Code gör en särskild sorts jobb enkelt. Säg att du har en blogg och vill ha en länkbild för varje inlägg. Be: ”För varje inlägg i /content, gör en länkförhandsvisning i 1200×630 i vårt varumärke med inläggets titel, och rendera sedan var och en som en PNG till /public/og.” Claude designar varje bild i Gradiently, kontrollerar den och skriver filerna dit din webbplats förväntar dem. Open Graph-bildstorlek förklarar varför 1200×630.

Prompter som fungerar bra med Claude

• ”Läs vår varumärkesprofil och gör sedan ett LinkedIn-inlägg och ett X-inlägg som tillkännager vårt nya kontor i Bristol.”
• ”Hitta tre mörka Marks med ett sidenmaterial nära djup teal och ge mig deras koder.”
• ”Ta gårdagens tillkännagivande och gör en story och en YouTube-miniatyr av det.”
• ”Ändra datumet på evenemangsaffischen till 14 november och rendera den som en PDF.”

Ju bättre ditt varumärkeskit är, desto mindre behöver du säga i varje förfrågan; varumärkesröst för AI visar vad du ska fylla i. För fler idéer riktade mot sociala inlägg, se Claude för sociala medier, och för helhetsbilden, Claude-design.

Håll anslutningen säker

Om en nyckel läcker eller du slutar använda den, välj Återkalla bredvid den i Inställningar › API och agenter så slutar den fungera direkt. Nycklar slutar också fungera när deras skapare lämnar arbetsytan eller förlorar administratörsrollen. Använder du ChatGPT också? Gradiently i ChatGPT har sin egen uppsättning, och den fullständiga verktygsreferensen finns i utvecklardokumentationen.