Inhalt
Design-Rekonstruktor – in EntwicklungWas aus einem nachgebauten Design entstehtSo nutzen Sie esInspiration, nicht NachahmungWarum Rekreate das entwickeltHäufig gestellte FragenDesigner und Frontend-Entwickler analysieren täglich Interfaces: Abstände auf Screenshots messen, Schriftgrößen erraten, Komponenten nachbauen, um deren Verhalten zu verstehen. Ein Design nachzubauen macht daraus einen einzigen Schritt – laden Sie den Screenshot oder die URL hoch und erhalten Sie die Design-Tokens, die Komponentenstruktur und funktionierenden Frontend-Code.
Dieses Tool befindet sich in der Entwicklung bei Rekreate. Unten sehen Sie, was es produzieren wird, und was unsere bestehenden Tools heute schon für Sie tun können.
- Eingabe: Screenshot, Figma-Frame oder URL. Ausgabe: Tokens, Komponenten, Code.
- Farbpalette, Schriftgrößen, Abstands-Rhythmus, Radien und Schatten als Variablen extrahiert.
- Ausgabe auf Komponentenebene – eine Karte, eine Navigation, eine Preistabelle – statt eines flachen Markup-Blocks.
- In Entwicklung. Die Bildtools unter
/makesind bereits live.
Design-Rekonstruktor – in Entwicklung
Geben Sie ein Interface ein und erhalten Sie das dahinterliegende System zurück: eine Farbpalette mit benannten Tokens, eine Schriftskala, den Abstands-Rhythmus, Eckenradien und Elevation, sowie jede Komponente in HTML und CSS mit sinnvollen Klassennamen und responsivem Verhalten.
Es geht nicht darum, das Produkt eines anderen zu klonen. Es geht darum, die Frage zu beantworten, die sich jeder Designer bei einem Screenshot stellt – wie ist das eigentlich aufgebaut? – in Sekunden statt in Stunden.
Dieses Tool ist noch nicht live. Erstellen Sie ein kostenloses Konto, und wir informieren Sie in der App, sobald es verfügbar ist.
Was Sie heute tun können
Was bei Rekreate bereits funktioniert:
- Ein Foto nachbauen – ein visuelles Element, ein Mockup oder eine Illustration im eigenen Stil rekonstruieren.
- Ein Logo nachbauen – saubere Markenassets mit transparentem Hintergrund.
- Ideogram – grafikbasierte Interfaces, bei denen der Text lesbar sein muss.
Für Code verwenden Sie heute ein spezielles Screenshot-zu-Code-Tool; kehren Sie hierher zurück, wenn der Rekonstruktor live ist.
Was aus einem nachgebauten Design entsteht
| Ebene | Geplante Ausgabe |
|---|---|
| Farbe | Palette mit Rollen – Oberfläche, Text, gedämpft, Akzent, semantisch – als CSS-Variablen, hell und dunkel |
| Schrift | Schriftfamilien, die verwendete Skala, Gewichtungen, Zeilenhöhen und Buchstabenabstände |
| Abstände | Der zugrunde liegende Rhythmus (4/8pt oder ähnlich) sowie Containerbreiten und Abstände |
| Komponenten | Buttons, Karten, Navigation, Formulare, Tabellen – jeweils als isoliertes HTML und CSS |
| Zustände | Hover, Fokus, deaktiviert und Fehler, soweit sie abgeleitet werden können |
| Barrierefreiheitshinweise | Kontrastwarnungen und fehlende Fokuszustände werden markiert, nicht stillschweigend übernommen |
So nutzen Sie es
Referenz hochladen
Ein Screenshot eines bewunderten Produkts, ein Figma-Frame oder eine Live-URL.
Umfang wählen
Den gesamten Bildschirm oder eine Komponente, die Sie verstehen möchten – die Preiskarte, die Seitenleiste, den leeren Zustand.
System überprüfen
Zuerst die Tokens: Ist die Palette korrekt, passt die Schriftskala, sind die Abstände im Raster? Korrigieren Sie alles, was das Modell falsch geraten hat.
Code übernehmen
Kopieren Sie Komponenten in Ihr Projekt oder nutzen Sie sie als Referenzimplementierung, während Ihr Team die echte Version erstellt.
Inspiration, nicht Nachahmung
Interface-Muster sind gemeinsames Handwerk. Niemand besitzt eine Karte mit Titel, Text und Button; die Branche hat sich auf diese Muster geeinigt, weil sie funktionieren.
Was jedoch geschützt ist: die visuelle Identität eines Produkts – sein Logo, Illustrationsstil, individuelle Schriftarten, Bilder und Texte – sowie proprietärer Code. Ein nachgebautes Design sollte Ihnen die Mechanik vermitteln, die Sie dann mit Ihrer eigenen Marke gestalten.
Wenn Ihr Bildschirm wie der eines Konkurrenten aussieht, nur mit einem anderen Logo, haben Sie deren Identität kopiert, nicht von ihrer Struktur gelernt. Nutzen Sie die Tokens als Ausgangspunkt und entwickeln Sie sie zu Ihrem eigenen System weiter.
Warum Rekreate das entwickelt
Unser gesamtes Produkt basiert auf einer Idee: Starten Sie mit etwas, das bereits funktioniert, und machen Sie es zu Ihrem eigenen. Das begann mit viralen Videos, ging über Anzeigen, Fotos und Stimmen, und Design ist dieselbe Bewegung, angewandt auf Interfaces.
Es vervollständigt auch die /make-Familie für Teams: die Anzeige nachbauen, die Landingpage nachbauen, das dahinterliegende Designsystem nachbauen – alles an einem Ort, in der Sprache, in der Sie arbeiten.
Folgen Sie dem Website-Rekonstruktor und dem App-Rekonstruktor, wenn Sie die benachbarten Tools nutzen möchten.
Häufig gestellte Fragen
Kann KI ein UI-Design aus einem Screenshot nachbauen?
Ja – Vision-Modelle können eine Farbpalette, Schriftskala und Layout aus einem Bild extrahieren und Komponenten im Code rekonstruieren. Der Design-Rekonstruktor von Rekreate ist in Entwicklung; unsere Live-Tools decken derzeit Bilder, Logos und Videos ab.
Wird es mir Figma-Dateien liefern?
Die geplante Ausgabe sind Design-Tokens und Frontend-Code. Tokens lassen sich sauber in die meisten Design-Tools importieren, aber das Tool zielt darauf ab, funktionierenden Code bereitzustellen.
Ist es legal, das UI eines anderen nachzubauen?
Layout- und Interaktionsmuster sind nicht so geschützt wie Markenassets. Verwenden Sie nicht deren Logo, Illustrationen, individuelle Schriftarten, Texte oder proprietären Code – übernehmen Sie die Struktur und bringen Sie Ihre eigene Identität ein.
Unterstützt es den Dunkelmodus?
Ja, das ist der Plan: Tokens werden pro Thema extrahiert, sodass die nachgebauten Komponenten sowohl im hellen als auch im dunklen Modus funktionieren, statt auf eines festgelegt zu sein.
Wann wird es veröffentlicht?
Noch kein öffentliches Datum. Erstellen Sie ein kostenloses Konto, und neue /make-Tools erscheinen in der App, sobald sie verfügbar sind.
Was kann ich in der Zwischenzeit nutzen?
Den Bild-Rekonstruktor von Rekreate für visuelle Elemente und den Logo-Rekonstruktor für Markenassets sowie ein spezielles Screenshot-zu-Code-Tool für Markup.
Erstelle dein nächstes virales Video mit Rekreate
Finde ein bewährtes Kurzvideo, erstelle es neu mit deinem Skript, Avatar und deiner Stimme und generiere Szenen mit Seedance, Kling und Veo in einem Arbeitsbereich.
Kostenlose Testversion starten →