Wonder
Wonder (Aquila Lab) · Bilder · Coding
Wonder ist ein KI-Design-Tool, bei dem Leinwand und Code dasselbe sind. Statt einen Mockup zu zeichnen und ihn an einen Entwickler weiterzugeben, gehst du an einer Stelle vom KI-Design zum Code und exportierst produktionsreifes React und Tailwind (oder reines CSS). Es ist ein Design-Tool für Produktteams, die mit KI eine Oberfläche erzeugen, sie auf einer vertrauten Leinwand von Hand bearbeiten und das Ergebnis ohne Übersetzungsschritt ausliefern wollen. Wonder liefert außerdem einen MCP-Server, der sich in Coding-Agenten wie Claude und Cursor einhängt. Design-Änderungen und Code-Änderungen bleiben synchron.
Über Wonder
Was Wonder ist
Wonder ist ein Design-Tool, das auf einer einzigen Idee aufbaut: Was du auf der Leinwand siehst, lieferst du aus. Das Design-Format entspricht eins zu eins dem Code, also wird eine visuell angeordnete Komponente zur tatsächlichen React-Komponente in deinem Projekt. Das spart den üblichen Markup-Schritt, in dem jemand einen Screen nach Augenmaß neu baut. Kein Übersetzungsschritt, kein Raten.
Das Produkt richtet sich an Produktteams statt an einzelne Hobbyisten. Es verbindet die Werkzeuge, die Designer schon kennen (Leinwand, Ebenen, Komponenten), mit KI-Generierung und einem integrierten Chat, und es verbindet sich mit einem GitHub-Repo, damit die KI deinen bestehenden Code liest und echte Oberflächen auf der Leinwand neu baut. Dieselbe Leinwand erreichst du auch über Coding-Agenten per MCP, das heißt: Wer den Rest der App schreibt, kann Wonder bedienen, ohne den Editor zu verlassen.
Die wichtigsten Grenzen sind Umfang und Preis. Wonder gibt React und Tailwind aus (oder reines CSS), also profitieren Teams mit anderen Frontend-Stacks weniger vom Export. Kostenlose Konten sind ebenfalls begrenzt. Begrenzte KI-Chat-Token, drei private Dateien und Bild-Uploads bis 25 MB. Das ist schnell aufgebraucht.
Einstieg
- Erstelle ein Konto auf app.wonder.so und öffne eine neue Datei. Öffentliche Dateien sind unbegrenzt; private Dateien sind im Gratis-Tarif auf drei begrenzt.
- Beschreibe im KI-Chat den gewünschten Screen oder die Komponente, oder starte von einem vorhandenen Layout und lass die KI neben dir generieren.
- Bearbeite das Ergebnis wie in jedem Design-Tool. Die Leinwand hat Ebenen, Komponenten, Design-Variablen, Raster sowie eine Bibliothek mit Shadern und Icons.
- Verbinde deinen Workspace für die Übergabe. Verknüpfe ein GitHub-Repo, um echte Oberflächen in die Leinwand zu holen, oder füge den Wonder MCP-Server zu Claude, Cursor oder Codex hinzu, um Änderungen in beide Richtungen zu bewegen.
- Exportiere oder synchronisiere den produktionsreifen React- und Tailwind-Code zurück in dein Projekt.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Wonder.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Produktdesigner
- Design-Ingenieure und Frontend-Entwickler
- Kleine Produktteams
- Gründer, die eine erste Oberfläche bauen
Aufgaben
- Oberflächen aus einer Textvorgabe erzeugen
- Bestehende Produktoberflächen neu bauen
- Design nach React und Tailwind exportieren
- Design und Code synchron halten
- Interaktive Layouts prototypen
Szenarien
- Den Screen für ein neues Feature anstoßen
- Übergabe an die Entwicklung
- Innerhalb eines Coding-Agenten arbeiten
- Eine bestehende Seite neu gestalten
- Team-Review-Sitzungen
Wichtigste Funktionen
Eine Leinwand, die dem Code entspricht
Wonders Kernaussage ist, dass sein Design-Format dem Code eins zu eins entspricht. Eine Komponente auf der Leinwand ist dasselbe wie die Komponente in deinem Projekt. Du ordnest Elemente visuell und das Ergebnis ist eine echte React-Komponente statt eines Bildes davon. Für Teams, die es leid sind, Screens von Hand neu zu bauen, ist genau das der Sinn des Tools.
KI-Generierung und integrierter Chat
Der Editor hat einen KI-Chat, der Oberflächen auf der Leinwand erzeugt und ändert. Du beschreibst, was du willst, und sprichst weiter mit ihm, während du das Layout verfeinerst. Pro-Konten erhalten 20 $ KI-Token pro Monat und eingeladenem Nutzer. Der Gratis-Tarif hält die Token begrenzt.
Export nach React und Tailwind
Fertige Arbeit wird als produktionsreifes React und Tailwind exportiert, mit reinem CSS als Alternative. Der Code ist dafür gedacht, direkt in ein echtes Projekt zu gehen. Kein Übergabe-Ordner. Wenn dein Stack nicht auf React basiert, verliert Wonder hier an Passung.
Wonder MCP-Server
Der MCP-Server unter mcp.wonder.so verbindet Wonder mit Coding-Agenten wie Claude, Cursor und Codex. Dein Agent bekommt Lese- und Schreibzugriff auf die Leinwand, kann Designs in den Code holen oder Code zurück in die Designs schieben. Die Einrichtung läuft über eine Standard-OAuth-Anmeldung. Keine API-Schlüssel zu verwalten. Es ist in jedem Tarif kostenlos, auch im Gratis-Tarif.
GitHub und Desktop-App
Du kannst ein GitHub-Repo verbinden, damit die KI deinen bestehenden Code liest und die echte Produktoberfläche auf der Leinwand neu baut. Wonder läuft außerdem als Desktop-App auf Mac und Windows für alle, die nicht in einem Browser-Tab arbeiten wollen. Lieber im Browser? Geht auch.
Zusammenarbeit und Design-Variablen
Dateien können öffentlich oder privat sein, geteilt per Nur-Ansicht-Einladung oder mit vollem Editor-Zugriff, mit Anwesenheitssteuerung für Live-Sitzungen. Ein Variablen-Panel hält Design-Token, und jede Datei bekommt ihre eigene Icon-Bibliothek. Raster sowie Block- und Inline-Layouts lassen dich strukturelle Änderungen testen, ohne alles neu zu bauen.
Vor- und Nachteile
Vorteile
- Design und Code teilen ein Format, also gibt es keinen manuellen Neubau zwischen Leinwand und Produkt.
- Der echte React- und Tailwind-Export landet in einer bestehenden Codebasis statt aufgeräumt werden zu müssen.
- Die MCP-Unterstützung funktioniert mit Claude, Cursor, Codex und anderen Agenten, und sie ist in jedem Tarif kostenlos.
- Der feste Preis von 16 $ pro Nutzer und Monat bei jährlicher Abrechnung hält die Kosten vorhersehbar, während das Team wächst.
- Desktop-Apps für Mac und Windows plus Echtzeit-Zusammenarbeit mit Rollen und Berechtigungen.
Nachteile
- Der Export ist an React und Tailwind gebunden, also verlieren Teams mit anderen Frontend-Stacks den größten Teil des Nutzens.
- Der Gratis-Tarif begrenzt KI-Chat-Token, drei private Dateien und Bild-Uploads bis 25 MB, was echte Projekte ausbremst. Drei private Dateien sind nicht viel.
- Für den Gratis-Tarif ist kein monatliches Token-Kontingent angegeben, also drängt intensive KI-Nutzung schnell zu Pro.
- Das Tool ist noch jung; es startete im April 2026, also rechne mit stetigen Änderungen und der einen oder anderen rauen Kante, während das Team alle paar Wochen neue Funktionen und Fixes ausliefert.
Häufige Fragen
Wonder ist ein KI-Design-Tool, das Leinwand-Arbeit in Produktionscode verwandelt. Du gestaltest die Oberfläche auf einer vertrauten Leinwand, erzeugst und bearbeitest sie mit KI und exportierst dann echtes React und Tailwind statt eines statischen Mockups.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Wonder.
Alternativen zu Wonder
Google EmbeddingGemma 2
Google DeepMind · Schreiben · Bilder · CodingGoogle EmbeddingGemma 2 ist ein offenes Modell mit 740 Millionen Parametern, das Text, Code, Bilder, Audio und Videobilder in Vektoren eines gemeinsamen 768-dimensionalen Raums umwandelt und auf Handys und Notebooks läuft.
Tractionwave
TractionWave · Bilder · MarketingTractionWave erstellt per KI eine Aufmerksamkeits-Heatmap für statische Anzeigen. Sie laden ein PNG oder JPG hoch und bekommen prognostizierte Aufmerksamkeit, sortierte Hotspots und Korrekturen, bevor Budget fließt.
Imejis.io
Imejis.io · Bilder · MarketingImejis.io ist ein KI-Designstudio für Agenten und Marketingteams. Sie beschreiben ein Bild in eigenen Worten, und das Werkzeug schreibt den Text, baut das Layout, passt es an jedes Format an und exportiert die fertige Datei.