KI-Codierungstools können gut programmieren, Animationen lassen sich jedoch nur schwer im Code beschreiben. Ohne Zugriff auf das Design errät ein Agent den Zeitpunkt und die Zustände. MCP, das Model Context Protocol, behebt dieses Problem, indem es dem Agenten über eine Standardschnittstelle direkten Zugriff auf ein Tool ermöglicht.
Ein MCP-Server ist ein kleiner Dienst, der Aktionen bereitstellt, die ein Agent aufrufen kann. Bei der Animation könnte das bedeuten, eine Komponente zu erstellen, einen Zustand hinzuzufügen, eine Feder zu ändern oder zu lesen, welche Eingaben eine Datei hat. Der Agent entscheidet anhand Ihrer Aufforderung, wann diese Aktionen aufgerufen werden.
Die Einrichtung ist normalerweise kurz. Sie fügen den Server zur MCP-Konfiguration Ihres Clients hinzu, beispielsweise mit dem mcp-Befehl von Claude Code oder in den MCP-Einstellungen von Cursor, und authentifizieren Sie sich dann bei Bedarf. Danach können Sie im Klartext fragen: „Machen Sie einen Toggle mit einer Feder und einem gedrückten Zustand“ oder „Verlangsamen Sie die Erfolgsanimation“.
ExodeUI, das wir herstellen, verfügt dafür über einen MCP-Server. Agenten können Animationen mit Zuständen, Federphysik, Eingaben und Ereignissen erstellen und bearbeiten. Das Ergebnis ist eine offene .exode-Datei, die Sie im Editor öffnen und in Ihrer App abspielen können. Designtools wie Figma und Penpot verfügen über eigene MCP-Server für Layout und Designkontext.
Behandeln Sie die Agentenausgabe als Entwurf. Überprüfen Sie die Bewegung im Editor, insbesondere das Timing, das Verhalten bei reduzierter Bewegung und jeden Status, bevor sie versendet wird.