MCP voor ontwerpers: Figma, tokens en code verbinden met Claude en Cursor

Wat MCP is, in gewone woorden

De officiële MCP-documentatie beschrijft het als een open-sourcestandaard voor het verbinden van AI-applicaties met externe systemen, zoals bestanden, databases en tools. Een van zijn eigen voorbeelden is dat Claude Code een volledige webapp genereert op basis van een Figma-ontwerp. Voor een ontwerper is dit het belangrijkste: de AI hoeft niet langer te raden hoe jouw ontwerp eruit ziet. Het kan de ontwerptool rechtstreeks vragen.

Ontwerp vandaag nog tools met MCP-servers

Vanaf oktober 2026:

• Figma: een MCP-server die agenten ontwerpcontext (variabelen, componenten, lay-out) geeft voor het genereren van code, en native inhoud terug naar het canvas kan schrijven. Figma vermeldt het op starters- en betaalde abonnementen; schrijven op canvas is gratis tijdens de bètafase.
• Penpot: een gratis, open MCP-server die werkt met elke MCP-client, inclusief Claude, Cursor, VS Code en OpenAI Codex, en die door uzelf kan worden gehost.
• ExodeUI (wij maken het): een MCP-server waarmee AI-coderingstools interactieve animaties met toestanden en veerfysica kunnen maken en bewerken.
• Ontwerptokens: als uw tokens in een repository staan ​​als JSON, kan een AI-coderingstool ze al als bestanden lezen; een speciale server is alleen nodig voor tokens die in een tool zijn opgeslagen.

Hoe ontwerpers het daadwerkelijk gebruiken

De meest voorkomende workflows zijn eerder praktisch dan magisch. Ontwikkelaars selecteren een frame en vragen de AI om dit te implementeren met de bestaande componentenbibliotheek. Ontwerpers vragen de AI om te controleren of een gecodeerd scherm overeenkomt met het ontwerp en de verschillen op te noemen. Teams vragen de AI om de tokens van een component in de hele codebase bij te werken. En steeds vaker gebruiken ontwerpers de AI om varianten rechtstreeks op het canvas te tekenen en deze vervolgens met de hand te verfijnen.

Een server verbinden

Claude Code voegt servers toe met de opdracht claude mcp add of via een .mcp.json-bestand in het project, en ondersteunt zowel externe HTTP-servers als lokale servers. Cursor beheert MCP-servers in zijn instellingen en ondersteunt lokale (stdio) en externe servers. Externe servers vragen u meestal om één keer in te loggen met OAuth. Elke leverancier documenteert de exacte opdracht of URL voor zijn server.

Waar u op moet letten

MCP geeft AI-tools echte toegang, dus behandel het als elke integratie:

• Machtigingen: een agent die naar het canvas of de repository kan schrijven, kan ook fouten maken. Gebruik de versiegeschiedenis en bekijk wijzigingen.
• Privacy: controleer waar ontwerpgegevens naartoe gaan en of uw abonnement dit toestaat.
• Kosten: sommige schrijffuncties zijn gratis in bèta en zullen naar verwachting op gebruik gebaseerd worden.
• Kwaliteit: AI-uitvoer volgt uw ontwerpsysteem alleen als het systeem goed gestructureerd is, met benoemde componenten en tokens.