Design Tool(s) x AI Chat tool

Artificial Intelligence · 5 minuten leestijd - 13 maart 2026

Het kan je bijna niet ontgaan zijn dat er de afgelopen maanden veel over AI en haar MCP-mogelijkheden voorbij is gekomen en dat er al veel over is geschreven. Afgelopen avond had ik eindelijk wat tijd en rust om er zelf eens mee te experimenteren. In deze blog deel ik graag mijn eerste ervaringen, wat het uiteindelijk heeft opgeleverd en waarom ik je wil stimuleren om hier ook zelf mee te experimenteren.

Wat is MCP?

MCP, Model Context Protocol, maakt het mogelijk om een brug te slaan tussen een AI-chattool en bijvoorbeeld, in mijn geval, een design tool zoals Figma. Hierdoor kunnen deze twee tools met elkaar communiceren en zelfs acties uitvoeren.

MCP configuratie: Mogelijkheden in Claude MCP

Wat kan ik ermee, en wat wilde ik voor elkaar krijgen?

Om het simpel en beknopt te houden wilde ik uitproberen of ik via Claude (AI chat) en Cursor (AI editor) acties kon laten uitvoeren op mijn Figma-project. Daar komt MCP in beeld zodat je je context kunt aanbieden aan een AI-agent. Denk bijvoorbeeld aan:

• Bestanden
• Data
• API’s
• Design systems
• Tokens/Variables in een Figma-document

Read-only: eerste experimenten

Eerst wilde ik gewoon kijken of het überhaupt werkte. Via figma.com/mcp-catalog kwam ik verschillende plugins tegen die het mogelijk maakten om Figma-projecten uit te lezen vanuit een chattool. Best impressive.

De eerste use-case was snel geboren. Ik wilde kijken of ik mijn designs kon laten omzetten naar bijvoorbeeld HTML/CSS, en dat deed hij eigenlijk best aardig. In de volgende prompt kon ik zelf een light mode toevoegen aan de output. Maar ik wilde meer. Ik wilde kijken of mijn chattool bijvoorbeeld ook een simpele button kon aanmaken in mijn Figma-project.

Experiment 1: HTML output vanuit Figma naar Claude

Read and write, cirkeltje rond

Daar stuitte ik op een probleem. De MCP-tools uit de catalogus waren namelijk read-only. Dat wil zeggen dat de Figma-plugin ongeveer 13 commando’s had, maar die allemaal gericht waren op het uitlezen van een Figma-project en het doorgeven van die data aan mijn chattool.

Na wat vragen en experimenteren via Cursor heb ik uiteindelijk een figma-mcp-bridge laten maken die duidelijk meer commando’s aankon. Deze bridge kon ook de andere kant op werken, met zogenaamde write-tools (63 tools van @magic-spells/figma-mcp-bridge), waardoor de chattool via de brug daadwerkelijk acties kon uitvoeren in Figma.

Best verbluffend eigenlijk. Via de MCP-bridge kon ik prompts schrijven in mijn chattool die direct in Figma werden uitgevoerd. In no-time plotte hij simpele taken, zoals het toevoegen van buttons in mijn project of het tekenen van een dashboard. Daarna ben ik verder gaan experimenteren om te kijken of de bridge nog meer voor mij kon betekenen.

Experiment 2: De MCP bridge + output eerste design system

Wat ik verder voorzie?

Wat het voor mij interessant maakt, is vooral waar dit naartoe kan groeien zodra LLMs sterker worden en beter begrijpen wat er in een designbestand gebeurt. Je kunt je bijvoorbeeld voorstellen dat een AI op basis van een paar richtlijnen of een korte briefing al een eerste huisstijl kan genereren in Figma: kleuren, typografie, componenten en zelfs een basis design system. Of dat een AI bestaande designs analyseert en automatisch componenten, varianten en tokens omzet naar een gestructureerd design system. Ik zie ook bijvoorbeeld mogelijkheden dat AI op basis van WCAG richtlijnen de designs en projecten kan corrigeren.

Ook aan de development-kant kan dit interessant worden. Als een AI zowel het design als de code kan begrijpen, kan hij mogelijk steeds beter de vertaalslag maken tussen interface en implementatie. Denk aan het genereren van consistente UI-componenten, het controleren van design system regels of zelfs het automatisch aanpassen van layouts voor verschillende devices. We zijn daar nog niet helemaal, maar dit soort experimenten laten wel zien welke kant het op kan gaan.

Wat vind ik ervan?

Wat mij vooral opviel tijdens dit experiment is hoe snel je iets werkends kunt bouwen als je tools zoals Cursor, Claude en MCP combineert. Waar je vroeger misschien een paar dagen aan documentatie en setup kwijt was, kun je nu vrij snel een idee testen.

De output is helaas nog niet altijd even efficiënt en nauwkeurig, maar ik zie hier wel veel potentie in naarmate LLM’s en deze acties steeds beter worden getraind. Voor nu voelt het nog een beetje als een gimmick, maar ook als een interessant learning path: zowel om betere prompts te leren schrijven als om te zien hoe AI zich verder gaat ontwikkelen en steeds beter op use-cases kan worden toegepast.

Het is in ieder geval goed om deze ontwikkelingen gewoon bij te houden en te begrijpen wat je ermee kunt. Nieuwsgierigheid opent vaak nieuwe deuren en ideeën om verder te experimenteren. De volgende stap voor mij is het onderzoeken van tools zoals Console MCP van Southleft en te kijken wat dat voor ons als designers kan gaan betekenen.

Het smaakt in ieder geval naar meer. Ik denk dat dit steeds meer waarde gaat krijgen naarmate de output beter wordt, maar zover zijn we nog niet.