MCP for designere: Koble Figma, tokens og kode til Claude og Cursor
Hva Model Context Protocol betyr for designere, hvilke designverktøy som har MCP-servere, hvordan koble dem til Claude Code og Cursor, og hva du bør passe på.
Kjerne takeaway
MCP (Model Context Protocol) er en åpen standard som lar AI-verktøy som Claude Code og Cursor koble seg til annen programvare. For designere betyr det at et AI-kodingsverktøy kan lese ekte designdata, som rammer, komponenter, variabler og tokens, i stedet for å gjette fra skjermbilder, og i noen verktøy kan det skrive endringer tilbake. Figma, Penpot og ExodeUI tilbyr alle MCP-servere.
Hva MCP er, med enkle ord
Den offisielle MCP-dokumentasjonen beskriver den som en åpen kildekode-standard for å koble AI-applikasjoner til eksterne systemer, som filer, databaser og verktøy. Et av sine egne eksempler er at Claude Code genererer en hel webapp fra et Figma-design. For en designer er den viktige delen dette: AI trenger ikke lenger å gjette hvordan designet ditt ser ut. Det kan spørre designverktøyet direkte.
Design verktøy med MCP-servere i dag
Fra oktober 2026:
- Figma: en MCP-server som gir agenter designkontekst (variabler, komponenter, layout) for kodegenerering, og kan skrive innfødt innhold tilbake til lerretet. Figma viser det på Starter og betalte planer; lerretsskriving er gratis under betaversjonen.
- Penpot: en gratis, åpen MCP-server som fungerer med hvilken som helst MCP-klient, inkludert Claude, Cursor, VS Code og OpenAI Codex, og som kan hostes selv.
- ExodeUI (vi lager det): en MCP-server som lar AI-kodingsverktøy lage og redigere interaktive animasjoner med tilstander og vårfysikk.
- Design tokens: hvis tokenene dine bor i et depot som JSON, kan et AI-kodingsverktøy allerede lese dem som filer; en dedikert server er bare nødvendig for tokens som er lagret i et verktøy.
Hvordan designere faktisk bruker det
De vanligste arbeidsflytene er praktiske snarere enn magiske. Utviklere velger en ramme og ber AI om å implementere den med det eksisterende komponentbiblioteket. Designere ber AI om å sjekke om en kodet skjerm samsvarer med design- og listeforskjellene. Lag ber AI om å oppdatere en komponents tokens på tvers av kodebasen. Og i økende grad bruker designere AI til å lage utkast til varianter direkte på lerretet, for så å avgrense dem for hånd.
Koble til en server
Claude Code legger til servere med claude mcp add-kommandoen eller gjennom en .mcp.json-fil i prosjektet, og støtter eksterne HTTP-servere så vel som lokale. Cursor administrerer MCP-servere i sine innstillinger og støtter lokale (stdio) og eksterne servere. Eksterne servere ber deg vanligvis logge på én gang med OAuth. Hver leverandør dokumenterer den eksakte kommandoen eller URL-en for sin server.
Hva du skal passe på
MCP gir AI-verktøy reell tilgang, så behandle det som enhver integrasjon:
- Tillatelser: En agent som kan skrive til lerretet eller depotet kan også gjøre feil. Bruk versjonshistorikk og gjennomgå endringer.
- Personvern: sjekk hvor designdata går og om planen din tillater det.
- Kostnad: noen skrivefunksjoner er gratis i beta og planlagt å bli bruksbaserte.
- Kvalitet: AI-utgang følger designsystemet ditt bare hvis systemet er godt strukturert, med navngitte komponenter og tokens.
Tast Principles å huske
- MCP er en åpen standard for å koble AI-verktøy til annen programvare
- Den lar AI lese ekte designdata i stedet for skjermbilder
- Figma, Penpot og ExodeUI tilbyr MCP-servere
- Claude Code og Cursor støtter begge lokale og eksterne servere
- Et godt strukturert designsystem betyr mer enn verktøyet
Ofte stilte spørsmål
Kilder
- What is the Model Context Protocol (MCP)? — modelcontextprotocol.io
- Guide to the Figma MCP server — Figma Hjelpesenter
- Penpot MCP server — Penpot
- Connect Claude Code to tools via MCP — Claude Code dokumenter
- Model Context Protocol (MCP) — Cursor dokumenter