Webseiten und KI-Layouts in bearbeitbare Mockups umwandeln
Importiere Live-Webseiten, Seitenbereiche und KI-generierte Layouts direkt in Moqups als vollständig bearbeitbare Hi-Fi-Designs oder Lo-Fi-Wireframes.
Webseiten-Import
Bringe jede Live-Webseite in Moqups
Klicke auf das Erweiterungs-Icon, um eine vollständige Seite, einen Bereich oder einzelne Elemente auszuwählen. Füge sie direkt in Moqups als vollständig bearbeitbares Layout ein – jedes Objekt ist anpassbar.
- Importiere die gesamte Seite oder wähle einen bestimmten Bereich aus
- Erfasse einzelne Elemente mit der Leertaste
- Füge in ein vorhandenes Projekt ein oder öffne es in einem neuen
Als Desktop-, Laptop- oder Handy-Ansicht importieren
Wähle die Viewport-Größe noch vor dem Import. So wird das Layout genau in dem Format und den Abmessungen in Moqups eingefügt, die du benötigst – nicht nur das, was dein Browser anzeigt.
KI-Design-Import
KI-Layouts erfassen und zu deinen eigenen machen
Bringe KI-Entwürfe direkt in Moqups. Bearbeite sie mit deinem Team in einem gemeinsamen Arbeitsbereich – und spare dabei auch noch Tokens! Verfeinere den Text, passe die Layouts an und korrigiere Details, die die KI falsch macht. Exportiere dann eine PDF der überarbeiteten Version für deine nächste Runde mit der KI.
- Klicke auf den iFrame, um das Design zu kopieren
- Als Hi-Fi-Design oder Lo-Fi-Wireframe importieren
- Funktioniert mit jedem KI-Tool, das einen iFrame rendert
Hilf der KI, deine Marke und deinen Stil zu treffen
Extrahiere den visuellen Stil eines geöffneten Browserfensters – Farben, Typografie, Button-Stile, Eingabe-Stile – und erstelle ein strukturiertes Design-Briefing. Füge dieses Briefing in einen KI-Prompt ein, damit die generierten Layouts dein Branding und Designsystem exakt widerspiegeln.
Designs in voller Wiedergabetreue importieren – oder in Wireframes umwandeln
Beim Konvertieren einer Webseite oder eines KI-Layouts hast du zwei Optionen: Importiere das Design genau so, wie es erscheint – als Hi-Fi-Layout – oder konvertiere es in ein Lo-Fi-Wireframe in Graustufen. In beiden Fällen erhältst du ein vollständig bearbeitbares Mockup – aber eines legt den Fokus auf Branding und Stil, das andere auf Struktur und Inhalt. Die Wahl liegt bei dir!
Jedes Element gehört dir zum Bearbeiten
Importierte Designs kommen als vollständig bearbeitbare Layouts an, sodass du und dein Team innerhalb von Sekunden mit dem Bearbeiten, Aktualisieren und Anpassen beginnen können.
Text bearbeiten
Klicke auf einen beliebigen Textblock, um Überschriften, Labels und Button-Texte zu ändern.
Farben & Schriften anpassen
Ändere Farben und Typografie für ausgewählte Elemente oder das gesamte Layout.
Bilder ersetzen
Tausche Platzhalter und Grafiken durch eigene Assets aus deiner Bildbibliothek aus.
UI-Komponenten hinzufügen
Ziehe Buttons, Formulare, Modals und Icons aus der Moqups-Schablonenbibliothek.
Größe ändern & neu anordnen
Verschiebe, ordne um und ändere die Größe jedes Elements mithilfe von Hilfslinien und Einrasten.
Kommentieren & zusammenarbeiten
Arbeite in Echtzeit mit deinem Team und hinterlasse Kommentare und Anmerkungen im Design.
Bring dein Team zusammen, um die Arbeit besser zu machen
Teile Ideen und bedeutungsvolle Gespräche – synchron und asynchron – mit Live-Cursorn, Haftnotizen, Anmerkungen und farbcodierten Kommentaren. Sammle Feedback, spezifiziere Anforderungen, baue Konsens auf und triff großartige Entscheidungen.
Häufig gestellte Fragen
Welche Browser unterstützt die Erweiterung?
Die Erweiterung ist für Chrome und Firefox verfügbar. Brave-Nutzer können die Chrome-Version direkt installieren. Eine Safari-Erweiterung befindet sich in der Entwicklung, und wir teilen ein Update, wenn sie bereit ist.
Ist sie kostenlos?
Ja, die Erweiterung ist kostenlos zum Installieren und Verwenden. Um importierte Designs in ein Projekt einzufügen, benötigst du ein Moqups-Konto – das ebenfalls kostenlos ist und keine Kreditkarte erfordert.
Funktioniert sie mit jedem KI-Tool?
Ja. Die Erweiterung kann jedes KI-Design importieren, das als iFrame in deinem Browser dargestellt wird. Dazu gehören Artefakte von Claude, ChatGPT, Gemini und anderen. Klicke auf den iFrame, um das vollständige Layout zu importieren, oder verwende die Leertaste, um ein bestimmtes Element darin auszuwählen.
Was kann die Erweiterung sonst noch?
Einige weitere wissenswerte Funktionen: Screenshots: Erfasse den sichtbaren Bereich, eine benutzerdefinierte Auswahl oder die vollständige Seite und speichere sie direkt in deiner Moqups-Team-Bildbibliothek. Nützlich für Mood Boards, Wettbewerbsrecherchen und schnelle Referenzen. Hinweis: Screenshots sind Bildaufnahmen, keine bearbeitbaren Layouts. Projekte sofort erstellen: Klicke auf das Moqups-Erweiterungs-Icon im Browser, um ein neues Projekt zu erstellen oder direkt zum Dashboard zu gelangen, ohne den Tab zu wechseln. Farbauswahl: Für Chrome-Versionen vor 95 aktiviert die Erweiterung unsere In-App-Pipette, mit der du jede Farbe aus deinem Browser aufnehmen und auf deine Designelemente anwenden kannst.
Was bedeutet „vollständig bearbeitbar"?
Wenn du eine Webseite oder ein KI-Design importierst, kommt es nicht als flaches Bild an. Jede Komponente – Text, Buttons, Bilder, Navigationselemente, Eingabefelder – kommt als separates Objekt in deinem Moqups-Projekt an. Du kannst auf jedes Element klicken, um es auszuwählen, Farben und Schriften anpassen, Bilder ersetzen, Dinge verschieben und neue UI-Komponenten aus unserer Schablonenbibliothek einfügen.
Ich habe die Moqups-Erweiterung bereits. Muss ich sie aktualisieren?
Nein, sie aktualisiert sich automatisch. Wenn du sie zuvor installiert hast, sind die neuen Funktionen bereits verfügbar.
Mit dem Importieren beginnen. Mit dem Neuaufbau aufhören.
Die Erweiterung ist kostenlos und dauert ca. zehn Sekunden zum Installieren.