Gradiently i Claude: design med MCP inne i Claude

For å sette opp Gradiently Claude-tilkoblingen peker du Claude mot den driftede MCP-serveren på https://gradiently.design/api/mcp. I Claude-appen legger du den til som en egendefinert tilkobling og logger inn på Gradiently. I Claude Code legger du den til fra terminalen med en avgrenset API-nøkkel. Uansett kan Claude deretter søke etter Marker, lese merkevareprofilen og lage design som lagres i arbeidsområdet og åpnes i Studio, med alle ord fortsatt redigerbare.

MCP, Model Context Protocol, er den åpne standarden som lar Claude bruke ekte verktøy. Hva er MCP forklarer det enkelt, og selve protokollen er dokumentert på modelcontextprotocol.io.

Velg hvordan du kobler til Claude

Uansett vei må du være eier eller administrator i Gradiently-arbeidsområdet. Redaktører og lesere kan ikke koble til assistenter eller opprette nøkler.

Koble Claude-appen til med egendefinert tilkobling

1. 1

   Åpne tilkoblingsinnstillingene i Claude

   Legg til en egendefinert tilkobling. Hvilke Claude-abonnementer som tillater dette, bestemmes av Anthropic, så sjekk hjelpesidene hvis valget mangler. Claude-tilkoblinger forklarer funksjonen.

2. 2

   Lim inn serveradressen

   Kall den Gradiently og bruk https://gradiently.design/api/mcp. Velg OAuth-innlogging.

3. 3

   Logg inn og velg arbeidsområde

   I Gradiently-vinduet velger du arbeidsområdet Claude skal jobbe i, og leser tillatelsene under Tillat denne assistenten å.

4. 4

   Tillat og kontroller

   Velg Tillat tilkobling. Tilbake i Claude ber du den vise Gradiently-verktøyene sine for å bekrefte.

Tilgangen fornyes automatisk i opptil 30 dager, deretter kobler du til igjen. En egendefinert tilkobling kan du bruke med en gang; en oppføring i den offentlige Claude-katalogen er noe annet og krever gjennomgang fra Anthropic.

Koble Claude Code til med en avgrenset API-nøkkel

Claude Code bruker en nøkkel fremfor innlogging. Opprett en i Gradiently under Innstillinger › API og agenter: velg arbeidsområde, gi den navn etter hvor den brukes (Claude Code, bærbar), kryss av for hva den kan gjøre, og velg Opprett nøkkel. Nøkkelen vises bare én gang, så kopier den til passordbehandleren med det samme.

export GRADIENTLY_API_KEY="gr_live_…"

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

Andre klienter som leser en JSON-fil, godtar vanligvis samme server og header. Innstillinger viser et ferdig utdrag under Koble til en MCP-klient.

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

Velge nøkkelens tillatelser

Hver tillatelse avgrenser tilgangen. En ny nøkkel starter med fem som dekker alle designverktøy, så de fleste trenger ikke endre noe. Legg bare til resten når Claude faktisk trenger dem.

Hva Claude kan gjøre etter tilkobling

Claude bruker de samme handlingene du har i produktet. Den kan søke i Markedet etter navn, fargeord eller kode; lese merkevareprofil, stemme og skrifter; tegne et originalt design, se på det gjengitte bildet og forbedre det; fylle ut en mal fra Gradiently; endre teksten i et lagret design; lage kopier i nye størrelser; og gjengi et design som PNG eller PDF. Når Claude selv bygger designet, krever Gradiently ingen KI-kreditter. Ber du den overlate oppgaven til Designer i Gradiently, brukes kreditter som i Studio.

Claude Code gjør en bestemt type jobb enkel. Si at du har en blogg og vil ha et lenkebilde til hvert innlegg. Be om: «Lag en lenkeforhåndsvisning på 1200×630 med merkevaren vår og innleggstittelen for hvert innlegg i /content. Gjengi så hvert bilde som PNG i /public/og.» Claude designer hvert bilde i Gradiently, kontrollerer det og skriver filene der nettstedet forventer dem. Open Graph-bildestørrelse forklarer hvorfor 1200×630.

Instruksjoner som fungerer godt med Claude

• «Les merkevareprofilen vår, og lag så et LinkedIn-innlegg og et X-innlegg om det nye kontoret vårt i Bristol.»
• «Finn tre mørke Marker med materialet Silke nær dyp blågrønn, og gi meg kodene.»
• «Lag en story og et YouTube-miniatyrbilde fra gårsdagens kunngjøring.»
• «Endre datoen på arrangementsplakaten til 14. november og gjengi den som PDF.»

Jo bedre merkevareprofil, desto mindre trenger du å si i hver forespørsel; merkevarens stemme for KI viser hva du bør fylle inn. Flere ideer til sosiale innlegg finnes i Claude til sosiale medier, og design med Claude gir oversikten.

Holde tilkoblingen trygg

Hvis en nøkkel lekker eller du slutter å bruke den, velger du Tilbakekall ved siden av den i Innstillinger › API og agenter, så stopper den straks. Nøkler stopper også når oppretteren forlater arbeidsområdet eller mister administratorrollen. Bruker du også ChatGPT? Gradiently i ChatGPT har sitt eget oppsett, og hele verktøyreferansen finnes i utviklerdokumentasjonen.