MCP för designers: Ansluter Figma, tokens och kod till Claude och Cursor

Vad MCP är, med klara ord

Den officiella MCP-dokumentationen beskriver det som en öppen källkodsstandard för att ansluta AI-applikationer till externa system, såsom filer, databaser och verktyg. Ett av dess egna exempel är att Claude Code genererar en hel webbapp från en Figma-design. För en designer är den viktiga delen detta: AI:n behöver inte längre gissa hur din design ser ut. Det kan fråga designverktyget direkt.

Designa verktyg med MCP-servrar idag

Från och med oktober 2026:

• Figma: en MCP-server som ger agenter designkontext (variabler, komponenter, layout) för kodgenerering och kan skriva inbyggt innehåll tillbaka till arbetsytan. Figma listar det på Starter- och betalplaner; canvas skrivning är gratis under sin beta.
• Penpot: en gratis, öppen MCP-server som fungerar med alla MCP-klienter, inklusive Claude, Cursor, VS Code och OpenAI Codex, och som kan vara självvärd.
• ExodeUI (vi gör det): en MCP-server som låter AI-kodningsverktyg skapa och redigera interaktiva animationer med tillstånd och fjäderfysik.
• Designa tokens: om dina tokens finns i ett arkiv som JSON, kan ett AI-kodningsverktyg redan läsa dem som filer; en dedikerad server behövs bara för tokens som lagras i ett verktyg.

Hur designers faktiskt använder det

De vanligaste arbetsflödena är praktiska snarare än magiska. Utvecklare väljer en ram och ber AI:n att implementera den med det befintliga komponentbiblioteket. Designers ber AI att kontrollera om en kodad skärm matchar design- och listskillnaderna. Lag ber AI:n att uppdatera en komponents tokens över kodbasen. Och allt oftare använder designers AI för att skapa varianter direkt på duken och sedan förfina dem för hand.

Ansluta en server

Claude Code lägger till servrar med kommandot claude mcp add eller via en .mcp.json-fil i projektet, och stöder såväl fjärranslutna HTTP-servrar som lokala. Cursor hanterar MCP-servrar i sina inställningar och stöder lokala (stdio) och fjärrservrar. Fjärrservrar ber dig vanligtvis att logga in en gång med OAuth. Varje leverantör dokumenterar det exakta kommandot eller URL:en för sin server.

Vad man ska se upp med

MCP ger AI-verktyg verklig åtkomst, så behandla det som vilken integration som helst:

• Behörigheter: en agent som kan skriva till arbetsytan eller arkivet kan också göra misstag. Använd versionshistorik och granska ändringar.
• Sekretess: kontrollera var designdata går och om din plan tillåter det.
• Kostnad: vissa skrivfunktioner är gratis i beta och planerade att bli användningsbaserade.
• Kvalitet: AI-utdata följer ditt designsystem endast om systemet är välstrukturerat, med namngivna komponenter och tokens.