KI und MCP

Figma MCP und ein Design-MCP-Server, bei dem der Canvas HTML ist

Designtools lassen KI-Agenten inzwischen per MCP herein. Was der Agent tun kann, hängt davon ab, woraus der Canvas besteht. Ist er HTML, schreibt der Agent die Seite selbst.

Baurice Ley · 6 Min. Lesezeit · Fakten geprüft am 9. Okt. 2026

Was ein MCP-Server für ein Designtool leistet

MCP, das Model Context Protocol, ist ein Standard, über den ein KI-Agent die Tools einer anderen App nutzen kann. Betreibt ein Designtool einen MCP-Server, kann dein Agent eine Datei lesen, sie ändern oder in Code verwandeln, direkt aus deinem Code-Editor oder deiner Chat-App.

So funktioniert der Figma-MCP-Server

Laut Figmas Hilfe-Center liefert sein MCP-Server Agenten Designkontext, Variablen, Komponenten und Layoutdaten und kann aus ausgewählten Frames Code generieren. Über den Remote-Server können Agenten außerdem native Figma-Inhalte erstellen und ändern. Dieser Schreibzugriff ist während der Beta kostenlos, laut Figma wird er später ein nutzungsbasiert bezahltes Feature.

Der Remote-Server ist in allen Tarifen verfügbar. Der Desktop-Server setzt einen Dev- oder Full-Seat in einem bezahlten Tarif voraus.

Der entscheidende Punkt: Der Agent arbeitet an einem Vektordesign. Daraus eine Webseite zu machen, bleibt ein Übersetzungsschritt.

Was sich ändert, wenn der Canvas HTML ist

In Kalka ist jede Ebene ein HTML-Element und jeder Style CSS. Der Agent beschreibt also kein Design, das jemand nachbauen muss. Er schreibt die Seite, und du siehst sie auf dem Canvas, als Ebenen, die du auswählen und von Hand bearbeiten kannst.

// Geplante Tools für den Kalka-MCP-Server
get_tree die Ebenen einer Seite als HTML lesen
write_html einen Abschnitt der Seite hinzufügen oder ersetzen
update_styles das CSS jeder Ebene ändern
get_screenshot das Ergebnis ansehen, wie es ein Designer tun würde
export die Dateien zurückgeben

Drei Dinge, die den Unterschied machen

  • Lokal, ohne Nutzungslimit. Der Server läuft mit der Desktop-App auf deinem Rechner. Kein Kontingent für Tool-Aufrufe, kein Account nötig.
  • Jeder Agent. Wenn dein Agent MCP spricht, kann er in Kalka arbeiten. Du bist an kein bestimmtes Modell gebunden.
  • Nichts zu konvertieren. Was der Agent schreibt, geht so live: HTML und CSS in einem Ordner, der dir gehört.

Ein Beispiel

Du schreibst: „Füg einen Pricing-Abschnitt mit drei Tarifen hinzu, im selben Stil wie der Hero.“ Der Agent liest die Seite mit get_tree, schreibt mit write_html eine section.pricing, prüft sie mit get_screenshot, und dann passt du im Design-Panel von Hand einen Radius und eine Farbe an. Kein Export, keine Übergabe.

Kalka ist in Entwicklung und Open Source. Die Tool-Liste oben stammt aus unserer Produktspezifikation und kann sich bis zum Release noch ändern.