MCP for designere: Tilslutning af Figma, tokens og kode til Claude og Cursor
Hvad Model Context Protocol betyder for designere, hvilke designværktøjer der har MCP-servere, hvordan man forbinder dem til Claude Code og Cursor, og hvad man skal passe på.
Core Takeaway
MCP (Model Context Protocol) er en åben standard, der lader AI-værktøjer som Claude Code og Cursor oprette forbindelse til anden software. For designere betyder det, at et AI-kodningsværktøj kan læse rigtige designdata, såsom frames, komponenter, variabler og tokens, i stedet for at gætte fra skærmbilleder, og i nogle værktøjer kan det skrive ændringer tilbage. Figma, Penpot og ExodeUI tilbyder alle MCP-servere.
Hvad MCP er, med rene ord
Den officielle MCP-dokumentation beskriver det som en open source-standard til at forbinde AI-applikationer til eksterne systemer, såsom filer, databaser og værktøjer. Et af dets egne eksempler er, at Claude Code genererer en hel webapp fra et Figma-design. For en designer er den vigtige del dette: AI behøver ikke længere at gætte, hvordan dit design ser ud. Det kan spørge designværktøjet direkte.
Design værktøjer med MCP-servere i dag
Fra oktober 2026:
- Figma: en MCP-server, der giver agenter designkontekst (variabler, komponenter, layout) til kodegenerering og kan skrive indbygget indhold tilbage til lærredet. Figma viser det på Starter og betalte planer; lærredsskrivning er gratis under sin beta.
- Penpot: en gratis, åben MCP-server, der fungerer med enhver MCP-klient, inklusive Claude, Cursor, VS Code og OpenAI Codex, og som kan hostes selv.
- ExodeUI (vi laver det): en MCP-server, der lader AI-kodningsværktøjer skabe og redigere interaktive animationer med tilstande og fjederfysik.
- Design tokens: Hvis dine tokens lever i et depot som JSON, kan et AI-kodningsværktøj allerede læse dem som filer; en dedikeret server er kun nødvendig for tokens gemt i et værktøj.
Hvordan designere rent faktisk bruger det
De mest almindelige arbejdsgange er praktiske frem for magiske. Udviklere vælger en ramme og beder AI om at implementere den med det eksisterende komponentbibliotek. Designere beder AI om at kontrollere, om en kodet skærm matcher design- og listeforskellene. Hold beder AI'en om at opdatere en komponents tokens på tværs af kodebasen. Og i stigende grad bruger designere AI til at tegne varianter direkte på lærredet og forfine dem derefter i hånden.
Tilslutning af en server
Claude Code tilføjer servere med claude mcp add-kommandoen eller gennem en .mcp.json-fil i projektet, og understøtter eksterne HTTP-servere såvel som lokale. Cursor administrerer MCP-servere i sine indstillinger og understøtter lokale (stdio)- og fjernservere. Fjernservere beder dig normalt om at logge på én gang med OAuth. Hver leverandør dokumenterer den nøjagtige kommando eller URL for sin server.
Hvad skal man passe på
MCP giver AI-værktøjer reel adgang, så behandle det som enhver integration:
- Tilladelser: En agent, der kan skrive til lærredet eller lageret, kan også lave fejl. Brug versionshistorik og gennemgå ændringer.
- Privatliv: Tjek, hvor designdata går hen, og om din plan tillader det.
- Pris: nogle skrivefunktioner er gratis i beta og er planlagt til at blive brugsbaserede.
- Kvalitet: AI-output følger kun dit designsystem, hvis systemet er velstruktureret med navngivne komponenter og tokens.
Tast Principles for at huske
- MCP er en åben standard til at forbinde AI-værktøjer til anden software
- Det lader AI læse ægte designdata i stedet for skærmbilleder
- Figma, Penpot og ExodeUI tilbyder MCP-servere
- Claude Code og Cursor understøtter begge lokale og eksterne servere
- Et velstruktureret designsystem betyder mere end værktøjet
Ofte stillede spørgsmål
Kilder
- What is the Model Context Protocol (MCP)? — modelcontextprotocol.io
- Guide to the Figma MCP server — Figma Hjælpecenter
- Penpot MCP server — Penpot
- Connect Claude Code to tools via MCP — Claude Code dokumenter
- Model Context Protocol (MCP) — Cursor dokumenter