Anima

Was ist Anima?

Anima ist eine KI-Plattform, die Produktdesigns in Frontend-Code umwandelt und Webanwendungen erstellt. Nutzer können mit Designs aus Figma, textbasierten Anweisungen, Screenshots, bestehenden Websites oder Code-Repositories beginnen, um lauffähige, editierbare und exportierbare Anwendungen zu erzeugen.

Ursprünglich konzentrierte es sich hauptsächlich auf Tools zur Umwandlung von Figma in React, Vue und HTML, hat sich aber mittlerweile auf Anima Playground und Agent Grid erweitert. Die neue Ausrichtung umfasst die Erstellung von KI-Anwendungen, Echtzeit-Voransichten, Git-Repositories, gehostete Veröffentlichungen, Datenbanken, Designsysteme sowie die Zusammenarbeit über Coding-Agents.

Hauptfunktionen

1. Figma in Code umwandeln

Benutzer können einen Link zum Figma-Design einfügen oder das Design mit dem Anima Figma-Plugin importieren. Das Plugin kann Variablen, Design-Token, Komponenteninformationen sowie eine automatische Anordnung erfassen – in der Regel ist dies umfassender als eine Importierung allein über die Figma-API.

• Erstellen von Code aus einzelnen Rahmen, Komponenten oder mehrbildigen Workflows.
• Auto Layout in ein responsives Layout umwandeln.
• Erkennen von Farben, Schriftarten, Abständen und wiederverwendbaren Komponenten.
• Unterstützung zur Importierung von Figma-Variablen und Design-Tokens.
• Ansehen und Exportieren im Browser oder im Figma Dev Mode.

Die Gestaltung der Struktur hat einen direkten Einfluss auf die Qualität des Codes. Die Verwendung von automatischem Layout, standardisierter Benennung, Komponentenbasiertem Aufbau sowie konsistenten Breakpoints führt in der Regel zu besser wartbaren Ergebnissen als die Verwendung vieler absoluter Positionierungen.

2. Webanwendung zur Erstellung von Texten

In Anima Playground können Benutzer die Ziele des Produkts, die Zielgruppe sowie die Kernfunktionen beschreiben, damit die KI eine funktionsfähige Webseite oder Anwendung erstellen kann. Anschließend kann der Inhalt, die Gestaltung, die Komponenten sowie die Interaktionen über das Chat-Fenster weiter angepasst werden.

Die Anweisungen sollten sich auf die Absicht des Produkts sowie auf die Struktur der Informationen konzentrieren – anstatt nur Pixel und Farben zu verwenden. Bei komplexen Anwendungen ist es am besten, diese in Module aufzuteilen und schrittweise zu testen.

3. Umwandlung von Webseiten und Bildern in Code

Anima unterstützt das Eingeben von Adressen öffentlicher Webseiten oder das Erstellen von Frontend-Implementierungen aus Bildern. Die Umwandlung einer Website in Code erzeugt HTML oder React – was sich gut eignet, um Prototypen zu erstellen, Migrationsbewertungen durchzuführen oder als Ausgangspunkt für interne Umstrukturierungen zu dienen.

Die technische Fähigkeit, öffentliche Webseiten zu kopieren, bedeutet nicht, dass man das Recht an den Inhalten der Seiten, Marken, Bildern oder dem Design hat. Es ist nicht zulässig, ohne Genehmigung die Webseiten anderer zu kopieren, sich als diese auszugeben, Phishing-Angriffe durchzuführen oder kommerzielle Zwecke zu verfolgen.

4. React, Vue und HTML-Ausgabe

Der Figma-Workflow unterstützt React, Vue und HTML und bietet JavaScript, TypeScript sowie verschiedene Styling-Optionen. Optional sind CSS, Tailwind, Styled Components, CSS Modules, SASS und SCSS verfügbar.

• React-Komponenten und JavaScript oder TypeScript.
• Vue-Frontend-Code.
• Unabhängiges HTML und CSS, keine Verpflichtung zu einem Framework.
• Optionen für Komponentenbibliotheken wie MUI, Ant Design, Shadcn usw.
• Responsive Seiten und Ausgabe für mehrere Breakpoints.

Die von den verschiedenen Eingängen unterstützten Kombinationen sind nicht vollständig identisch. Die Einschränkungen bei der Umwandlung der Website in Code sind derzeit größer als bei der Umwandlung mit Figma; man sollte vor der Erstellung die tatsächlichen Einstellungen überprüfen.

5. Vorschau und Bearbeitung des Spielplatzes

Playground bietet Bereiche wie Preview, Code, Database und Flow. Benutzer können Anwendungen ausführen, Code ansehen oder bearbeiten, Daten sowie Benutzer verwalten und die Navigation zwischen den Seiten überprüfen.

Jede AI-Aktion erzeugt kodierbaren Code, den Entwickler weiterhin direkt ändern können. Die erstellte Anwendung muss vor der Veröffentlichung auf Abhängigkeiten, Barrierefreiheit, Leistung und Sicherheit getestet werden.

6. Datenbanken, Benutzer und Backend-Fähigkeiten

Anima kann Datenbanken und Benutzerauthentifizierung für Anwendungen hinzufügen sowie Daten im Playground verwalten. Es eignet sich zum schnellen Erstellen von Prototypen mit Zustand oder internen Tools.

Bei der Verarbeitung von Anmeldedaten, Berechtigungen und sensiblen Informationen müssen Mechanismen zur Zugriffskontrolle, Session-Verwaltung, Datentrennung sowie Löschung getestet werden. Ein von KI automatisch erstellter Backend darf keine Sicherheitsprüfungen überspringen.

7. Hosting, Veröffentlichung und benutzerdefinierte Domainnamen

Benutzer können Projekte an die von Anima bereitgestellten Adressen veröffentlichen oder in einem kostenpflichtigen Plan einen eigenen Domainnamen nutzen. Das Teilen eines Playground-Links unterscheidet sich von einer öffentlichen Veröffentlichung – durch die Veröffentlichung wird die Anwendung für die Internetnutzer zugänglich gemacht.

Vor dem Go-Live müssen sichergestellt werden, dass Umgebungsvariablen, Schlüssel, Datenbanken und Testdaten nicht preisgegeben sind. Für eine benannte Domain müssen außerdem DNS und HTTPS richtig konfiguriert sein.

8. Agent Grid und Git-Workflows

Agent Grid ist eine von Anima bereitgestellte Umgebung zur Erstellung, Verwaltung, Veröffentlichung und gemeinsamen Nutzung von Anwendungen für AI-Agenten. Jedes Artifact ist ein echtes Git-Repository im Team-Arbeitsbereich, wobei die Agenten Änderungen klonen, einreichen und pushen können.

• Erstellen Sie eine App aus Hinweisen, einer Website oder Figma.
• Importieren Sie vorhandenen Code oder erstellen Sie ein leeres Repository.
• Mit Git wird das Artifact weiterhin bearbeitet und gepflegt.
• Mehrere Varianten erstellen und vergleichen.
• Veröffentlichung oder Entfernung öffentlicher Anwendungen.

Die Vorgänge der Erstellung und Kopie durch einen Agenten sind möglicherweise nicht idempotent; nach Ablauf der Frist sollte zunächst die Liste der Arbeitsbereiche überprüft werden, bevor es erneut versucht wird. Die Veröffentlichung stellt eine Änderung des externen Zustands dar und erfordert eine ausdrückliche Autorisierung.

9. Anima MCP und CLI

Der offizielle MCP kann mit Claude Code, Codex, Cursor, VS Code sowie anderen kompatiblen Clients verbunden werden, wodurch der Coding-Proxy direkten Zugang zu Figma, Playground und Team-Design-Systemen erhält. Ohne einen MCP-Client kann auch die Anima CLI verwendet werden.

Die Verbindung erfordert ein Anima-Konto sowie die Authentifizierung im Browser; für die Figma-Funktionen sind zudem die entsprechenden Dateien erforderlich. Die von MCP erzeugten Inhalte werden ebenfalls in der Codeerstellungskapazität berücksichtigt.

10. API und Backend-SDK

Die Anima API und das Backend-SDK können Figma-Dateien oder öffentliche Webseiten in Frontend-Code umwandeln, der sich gut für die Einbindung in Automatisierungs-Lösungen, AI-Agenten sowie Entwicklerprodukte eignet. Das SDK ermöglicht es außerdem, Frameworks, Sprachen, Styles sowie UI-Komponentenbibliotheken festzulegen.

Für den Zugriff auf die API muss man sich an die offiziellen Stellen wenden; auf der offiziellen Preisliste werden keine einheitlichen Preise für die APIs angegeben. Die Backend-Schlüssel dürfen nicht im Browsercode gespeichert werden.

11. Eigenmodelle und BYOK

Benutzer können eine ChatGPT-Subskription, einen OpenAI-API-Schlüssel oder einen Anthropic-API-Schlüssel verbinden, um den Playground-Chat mit ihren eigenen Modellressourcen zu versorgen. Wenn dies aktiviert ist, verbrauchen die Chats keine Anima AI-Credits.

Website-Kloning, Umwandlung von Designs in Code, Umwandlung von Bildern in Code, Hosting, Veröffentlichung sowie Teamfunktionen erfordern möglicherweise weiterhin einen Anima-Abonnementsplan oder eine Gebührenstruktur. Die Abonnements der Modellanbieter sowie die API-Kosten müssen zudem separat berechnet werden.

Für welche Nutzer geeignet?

• Designer, die Figma-Entwürfe schnell in Frontend-Code umwandeln müssen.
• Frontend-Entwickler, die sich mit der Lieferung von Designs und der Umsetzung von Komponenten beschäftigen.
• Ein Produktteam, das von Texten aus lauffähige Prototypen erstellen möchte.
• Benutzer, die Encoder-Proxye wie Claude Code, Codex oder Cursor verwenden.
• Es ist notwendig, Plattformen mit der Fähigkeit zur Umwandlung von Designs in Code in die Anwendung einzubinden.
• Organisation, die Systeme für das Unternehmensdesign, Berechtigungen und Konformität verwaltet.

Wie erstellt man Code aus Figma?

1. Ordnen Sie Figma-Komponenten, Auto Layout, Variablen und Breakpoints.
2. Kopieren Sie den Link zum Bilderrahmen oder installieren Sie das Anima Figma-Plugin.
3. Melden Sie sich im Playground an und verbinden Sie Ihr entsprechendes Figma-Konto.
4. Wählen Sie React, Vue oder HTML sowie Sprache und Styling-Optionen.
5. Importieren Sie einen Einzelbildschirm oder einen mehrbildschirmigen Prozess über einen Prototypen-Link.
6. Überprüfen Sie im Vorschau-Modus das Layout, die Schriftarten, die Interaktionen sowie die Responsivität.
7. Bearbeiten Sie den Code direkt oder korrigieren Sie ihn weiter mit Hinweisen.
8. Exportieren in das Code-Repository, Tests ausführen und anschließend zusammenfassen sowie veröffentlichen.

Preise und Pläne

Stand dem 26. August 2026 listet der Anbieter offiziell die Tarife Free, Starter, Pro, Business und Enterprise auf; es ist außerdem eine Monats- oder Jahreszahlung möglich. Die dynamischen Paketkarten auf der Preisseite werden in den öffentlich verfügbaren Ergebnissen nicht vollständig angezeigt, weshalb in der folgenden Tabelle nur die tatsächlich überprüfbaren Preise sowie die Mindestpreise für Unternehmen aufgeführt sind.

Eine Code-Generierung umfasst die Exportierung des Figma-Plugins, die Importierung des Playground-Designs, das Klonen der Website, die Erstellung von Hinweisen oder die Erstellung von MCP. Die oben genannten Informationen wurden am 26. August 2026 überprüft. Die genauen Preise für Einzelpersonen und Teams, Plätze, Hosting sowie Regeln für Übernutzung sind auf der offiziellen, aktuellen Abrechnungsseite zu finden.

Stornierung und Zahlung

Laut den offiziellen Angaben kann die Abonnementierung jederzeit geändert oder gekündigt werden. Nach der Kündigung bleibt das Abonnement bis zum Ende des aktuellen Abrechnungszyklus gültig. Bei einem Upgrade wird in der Regel nur der Unterschied für die verbleibende Zeit dieses Zyklus berechnet.

Zahlungen sind per Kreditkarte, Apple Pay und Google Pay möglich. Unternehmenskunden können außerdem Überweisung oder Rechnung nutzen. Vor dem Kauf sollten Steuern, das Datum der automatischen Verlängerung sowie die jährliche Zahlungsverpflichtung überprüft werden.

Code-Rechte und Grenzen des Open Source

Laut den Anima-Bedingungen ist der von der Plattform erzeugte Code mit Apache 2.0 oder MIT kompatibel und enthält keine Anforderungen bezüglich lizenzierter Abhängigkeiten. Diese Angabe beseitigt jedoch nicht die Rechtsbeschränkungen im Zusammenhang mit dem eingegebenen Design, Bildern, Schriftarten, Marken sowie Drittanbieterkomponenten selbst.

Die Kernplattform von Anima, der Code-Generierungs-Engine sowie die Hosting-Dienste sind kommerzielle Produkte. GitHub stellt offiziell Anleitungen zu MCP, SDKs sowie einige Beispiele zur Verfügung, doch die Verfügbarkeit dieser Repositorien bedeutet nicht, dass die gesamte Anima-Plattform open source ist.

Sicherheit und Bedienhinweise

• Es wird nur den Agenten gestattet, auf die Figma-Dateien und Repositorien zuzugreifen, die zur Erledigung der Aufgabe erforderlich sind.
• Fügen Sie die API-Schlüssel nicht in Chats, Screenshots oder Frontend-Code ein.
• Überprüfen Sie vor der Veröffentlichung Schwachstellen in Abhängigkeiten, Eingabeverifikation und Zugriffskontrolle.
• Klonseiten müssen eine Lizenz für die Verwendung des Inhalts und des Designs erhalten.
• Die generierte Codebasis muss visuelle, responsive, barrierefreie und Leistungsprüfungen bestehen.
• Das Team sollte eine Auditspur für Git-Commits, Veröffentlichungen und Löschvorgänge führen.

Vorteile des Produkts

• Umfasst verschiedene Eingänge für Figma, Anleitungen, Bilder, Websites und Code.
• Erstellt editierbaren Frontend-Code für React, Vue und HTML usw.
• Voranschauen, Datenbanken, Git und Veröffentlichung in einem einzigen Prozess integrieren.
• Es werden MCP, CLI, API und Backend-SDKs bereitgestellt.
• Unterstützung für eine eigene ChatGPT-Abonnement oder Model-API-Schlüssel.

Produktbeschränkungen

• Der generierte Code muss von den Entwicklern noch bearbeitet und getestet werden.
• Die von den verschiedenen Eingängen unterstützten Frameworks und Stiloptionen sind nicht vollständig identisch.
• Die kostenlose Version erzeugt nur eine begrenzte Anzahl von Prozessen für mehrere Bildschirme.
• Die dynamischen Inhalte der offiziellen Preisseite lassen sich nicht vollständig überprüfen.
• Die Kernplattform ist kein Open-Source-Produkt für eigenständige Bereitstellung.

Häufige Fragen

In welche Art von Code kann Anima Figma umwandeln?

Der Figma-Workflow unterstützt React, Vue und HTML und es sind JavaScript, TypeScript, Tailwind sowie verschiedene CSS-Lösungen wählbar; die tatsächlichen Optionen hängen vom Eingangspunkt und vom Framework ab.

Kann man direkt aus Text eine Anwendung erstellen?

Ja. Anima Playground ermöglicht es, aus Prompten ausführbare Webanwendungen zu erstellen und anschließend durch Chatten, Code-Editing sowie Git-Prozesse weiter zu iterieren.

Wie viele Erstellungen sind in der kostenlosen Version möglich?

Laut den offiziellen Angaben beinhaltet Free 5 Anläufe zur Erstellung von Code, sowie 5 Chats im Playground pro Tag und 5 Möglichkeiten zum Import in Figma oder zur Klonierung einer Website.

Unterstützt Anima Codex und Cursor?

Unterstützung. Die offiziellen MCP-Anleitungen nennen Clients wie Codex, Claude Code, Cursor und VS Code. Die Benutzer benötigen ein Anima-Konto und müssen sich authentifizieren.

Sind alle Funktionen kostenlos, wenn man eine eigene API-Schlüssel hat?

Nein. BYOK ermöglicht es, die eigenen Modelle für Chats zu nutzen, doch die Clonierung von Websites, die Umwandlung von Designs in Code, der Hosting-Service, die Veröffentlichung sowie die Teamfunktionen können weiterhin Gebühren verursachen.

Ist Anima ein Open-Source-Tool?

Die Kernplattform ist kein Open-Source-Produkt. Offiziell wurden MCP-Leitlinien, SDKs sowie einige Projekte veröffentlicht, doch Codegenerierungs- und Hosting-Dienste für Geschäftszwecke können nicht als Open Source bezeichnet werden.