Framer MCP คืออะไร? เมื่อ AI agent ออกแบบเว็บในโปรเจกต์คุณได้โดยไม่ต้องเปิด editor

Von Nokka (นก-กา) | Informationen am 26. Oktober 2026 überprüft

Dieser Artikel wurde von einer KI verfasst (deepseek-v4.1-flash · Modellanbieter: ollama-cloud) über den Hermes Agent, unter menschlicher Kontrolle und Qualitätsprüfung durch Nokka (นก-กา).

Wer schon länger im Web arbeitet, weiß, dass die meiste verlorene Zeit nicht beim Denken entsteht, sondern beim Umsetzen der Gedanken auf die Seite.

Man muss das Programm öffnen, Block für Block gestalten, Abstände festlegen, Farben anpassen und dann mit anderen besprechen, welche Stellen geändert werden sollten.

Framer MCP ist der Versuch, diesen Schritt zu eliminieren, indem ein AI-Agent direkt in Ihrem Framer-Projekt arbeitet.

Framer MCP ist ein MCP-Server, der in der Cloud von Framer selbst läuft und unter der Adresse https://mcp.framer.com/mcp erreichbar ist.

Sie müssen keine Bridge lokal installieren, den Editor nicht offen halten und können ihn sowohl vom Desktop, aus dem Browser als auch von unterstützten Mobilgeräten nutzen.

MCP steht für Model Context Protocol und ist ein offener Standard, der es AI-Agents ermöglicht, sich systematisch mit externen Werkzeugen zu verbinden.

In Projekten, auf die Sie Zugriff haben, kann der Agent Seiten erstellen, Layouts ändern, Inhalte aktualisieren und CMS-Kollektionen verwalten.

Er sieht das Canvas und die Komponenten und kann je nach Berechtigungen Ihres Kontos einige Projekteinstellungen anpassen.

Die Website von Framer gibt an, dass es Installationsanleitungen für ChatGPT, Codex, Claude, Claude Code, Cursor, Grok Bot, OpenCode, VS Code, Kiro, Notion, Pi, Antigravity, Windsurf, Warp und Devin gibt.

Wenn Ihr Werkzeug nicht in der Liste steht, können Sie es dennoch selbst verbinden, sofern es remote MCP und OAuth unterstützt.

Framer hat bereits einen integrierten Agent, doch MCP eröffnet die Möglichkeit, einen bereits vorhandenen Agent wie Claude oder Cursor zu verwenden.

Der Grund ist einfach: Sie müssen kein neues Werkzeug lernen, und das AI-Nutzungskontingent wird nach dem Plan dieses Agents abgerechnet, nicht nach dem von Framer.

Da es sich um einen Cloud-Server handelt, kann der Agent auf das Projekt zugreifen, ohne dass jemand den Editor offen halten muss.

Für Teams, die über verschiedene Zeitzonen hinweg arbeiten, ist das ein entscheidender Unterschied.

Framer stellt klar, dass MCP die empfohlene Methode anstelle der bisherigen External Agents über das CLI @framer/agent ist.

Das alte Verfahren funktioniert weiterhin, insbesondere für Lokalisierungsarbeiten, doch die Hauptrolle ist nun auf MCP übergegangen.

Änderungen bleiben im Projekt oder Branch, bis Sie oder der Agent die Veröffentlichung anweisen.

Wenn Sie keine Veröffentlichung anweisen, wird die Live-Website nicht berührt.

Framer empfiehlt, den Agent auf einem Branch arbeiten zu lassen, damit Sie ihn mit dem main-Zweig vergleichen und die Arbeit vor dem Publish prüfen können.

Das ist der sicherste Weg zum Ausprobieren, ohne die Live-Seiten zu gefährden.

Der Agent verwendet die Berechtigungen des Framer-Kontos, bei dem Sie angemeldet sind.

Wenn Ihr Konto Administrator mehrerer Projekte ist, sieht der Agent genau das, was Sie sehen. Das ist sowohl ein Vorteil als auch ein Risiko.

Sie können dem Agent einen Projektpfad schicken, um die Struktur der Startseite erstellen zu lassen, und dann selbst die Details ausarbeiten.

Wenn die Seitenstruktur früheren Arbeiten ähnelt, kann aus einem halben Arbeitstag eine Stunde werden, aber Sie müssen dennoch entscheiden, was wohin gehört.

Agenturen, die Websites für mehrere Kunden erstellen, sollten besonders auf Berechtigungen achten.

Man sollte Konten oder Projekte klar trennen und festlegen, wer die Veröffentlichung anweisen darf, statt es allen zu erlauben.

MCP ersetzt nicht den gesamten Code. Es arbeitet auf der Ebene von Layout und Inhalten.

Aufgaben, die komplexe Logik erfordern, brauchen weiterhin Menschen, und die Anbindung externer Systeme erfordert weiterhin eigene APIs.

Aus meiner Sicht kann ein Agent Anweisungen ausführen, aber die Entscheidung, ob eine Seite edel oder lässig wirken soll, erfordert weiterhin jemanden, der die Marke versteht.

Wenn man den Agent alles selbst entscheiden lässt, erhält man eine technisch korrekte Website ohne eigenständige Identität.

Ich finde, man sollte vorsichtig sein, dass Änderungen an Kollektionen über den Agent möglicherweise viele Datensätze auf einmal betreffen.

Vor einer Aufgabe sollte man immer Daten sichern oder zuerst in einer Kopie des Projekts testen.

Framer gibt an, dass die KI-Nutzung nach dem Plan oder den Credits des jeweiligen Agents abgerechnet wird.

Wenn Sie ein teures Modell verwenden, können die Kosten höher sein als das, was Sie an Framer zahlen.

Erstellen Sie eine Kopie des echten Projekts oder verwenden Sie ein noch nicht veröffentlichtes Projekt.

Verbinden Sie MCP mit dem Befehl Ihres Werkzeugs, zum Beispiel in Claude Code:

claude mcp add --transport http --scope user framer https://mcp.framer.com/mcp Enter fullscreen mode Exit fullscreen mode Dieser Befehl stammt direkt aus der Anleitung von Framer.

Versuchen Sie zunächst, die Überschrift der Startseite ändern zu lassen oder die CMS-Kollektionen auflisten zu lassen.

Wenn das Ergebnis gut ist, kann man sich später daran machen, die gesamte Seite neu aufzubauen.

Das Projekt in Framer öffnen und es noch einmal mit eigenen Augen prüfen. Der Grund dafür ist, dass der Agent zwar Elemente korrekt platzieren kann, diese auf dem tatsächlichen Bildschirm aber seltsam wirken können.

Framer MCP lässt Designer nicht verschwinden, sondern verschiebt den Punkt, an dem Menschen die meiste Zeit aufwenden müssen.

Von „Block für Block per Drag-and-Drop platzieren“ hin zu „die Richtung vorgeben, die Arbeit prüfen und entscheiden, was veröffentlicht werden soll“.

Wenn Sie im Web arbeiten und bereits AI-Agents nutzen, sollten Sie dieses Werkzeug zunächst in einem kleineren Projekt ausprobieren.

Wenn Sie jedoch noch keinen guten Prüfprozess für die Ergebnisse haben, beschleunigt der Einsatz von MCP Fehler nur.

Framer (2026) · Framer MCP: Connect Claude, Codex, Cursor and more to Framer. Framer Help (2026) · Getting started with Framer MCP. Model Context Protocol (2026) · What is the Model Context Protocol (MCP)?