Produkteinführungsseiten
Teste eine Überschrift, ein Angebot und ein Anmeldeformular vor dem Launch-Tag.
KI-Website-Mockup-Generator
Beschreibe eine Website oder füge eine Skizze an. Manus verwandelt sie in einen klickbaren, hochwertigen Website-Mockup für Desktop und Mobilgeräte.
Website-Mockup-Beispiel: ein Briefing, zwei Bildschirme
Ein gutes Briefing benennt die Marke, die Bereiche, den Stil und die Screens. Hier ist eines, das alle vier abdeckt.
Ein illustratives Design für eine fiktive Marke. Dein Mockup folgt deinem eigenen Briefing.
Eingaben für den Website-Mockup-Generator: ein Satz, eine Skizze oder ein Screenshot
Verwende, was du schon hast. Füge Bilder mit dem +-Button in der Box oben hinzu.
Hast du das Design schon in Figma? Verwende Figma to code, um aus einem Frame eine funktionierende Web-App zu machen.
Mockup-Ideen für Websites, Shops und Apps
Wähle ein Beispiel aus, um dessen Anfrage in das Feld oben einzufügen, und ändere dann die Details.
Online-Shops
Sieh dir eine Startseite, eine Produktseite und einen Warenkorb an, bevor du eine Plattform wählst.
Web-App-Bildschirme
Zeige Investoren oder Entwicklern, wie die Hauptbildschirme aussehen sollen.
Portfolios
Probiere ein paar Wege aus, deine Arbeit zu präsentieren, bevor du jede Fallstudie schreibst.
Restaurants und lokale Unternehmen
Platziere Speisekarte, Öffnungszeiten und Buchungsbutton dort, wo Gäste zuerst hinschauen.
Kundenpräsentationen
Bring zwei Designrichtungen zum ersten Kundentermin.
Wireframe vs. Mockup vs. Prototyp
Ein Wireframe zeigt die Struktur, ein Mockup zeigt das fertige Aussehen, und ein Prototyp zeigt das Verhalten.
Zeige deine Website auf einem Laptop und einem Smartphone
Einen Screenshot in ein Gerätemockup für Präsentationen, Portfolios und Launch-Beiträge verwandeln.
Füge einen Screenshot hinzu und gib an, welche Geräte und Szene du möchtest. Du erhältst eine Bilddatei für ein Pitch-Deck, ein Portfolio oder einen Launch-Post.
- Wähle die Geräte aus: Laptop, Desktop-Monitor, Tablet oder Smartphone
- Beschreibe die Szene: einen Schreibtisch, einen schlichten Studiohintergrund oder eine Hand
- Gib die Größe an, zum Beispiel 16:9 für Folien oder 4:5 für Social-Media-Beiträge
Brauchst du dazu ein Logo, ein Banner oder Social-Media-Grafiken? Probiere KI-Design.
Das genehmigte Mockup in eine Live-Website verwandeln
Das Mockup ist bereits eine Webseite, sodass du es nach der Design-Abnahme einfach weiter ausbauen kannst.
Sieh, wie der Manus-Website-Builder Logins, Datenbanken und Zahlungen hinzufügt, oder starte eine vollständige Website mit dem KI-Website-Generator oder eine einzelne Seite mit dem Landingpage-Builder.
Häufig gestellte Fragen
Was ist ein Website-Mockup?
Ein Website-Mockup ist ein realistisches Bild einer Seite, bevor sie gebaut wird: das echte Layout, Farben, Schriften, Bilder und Texte. Es liegt zwischen einem Wireframe, das nur die Struktur zeigt, und der fertigen Website.
Wie erstelle ich ein Website-Mockup mit KI?
Beschreibe die Seite im Feld oben auf dieser Seite: für wen sie ist, welche Abschnitte du brauchst und welchen Stil du magst. Manus erstellt den Mockup als Webseite, die du auf Desktop und Mobilgeräten öffnen kannst, und du kannst dann innerhalb derselben Aufgabe Änderungen anfordern.
Ist dieser Website-Mockup-Generator kostenlos?
Jede Anfrage läuft als Manus-Aufgabe, und Aufgaben verbrauchen Credits. Die Credit-Optionen findest du auf der Preisseite.
Kann ich eine Skizze oder einen Screenshot in ein Mockup umwandeln?
Ja. Füge ein Foto einer handgezeichneten Skizze, eines Whiteboards oder einen Screenshot deiner aktuellen Website hinzu und gib an, was beibehalten und was geändert werden soll. Manus verwendet das Bild als Ausgangslayout.
Funktioniert das Mockup auf Mobilgeräten?
Bitte um eine responsive Seite, und Manus gestaltet sie sowohl für Desktop- als auch für Handy-Bildschirme. Öffne die Vorschau auf deinem Handy, oder bitte um ein separates Mobile-Mockup, um beide zu vergleichen.
Was ist der Unterschied zwischen einem Wireframe und einem Mockup?
Ein Wireframe nutzt Kästen und graue Platzhalter, um sich auf die Struktur zu verständigen. Ein Mockup fügt das visuelle Design hinzu, damit man beurteilen kann, wie die Seite wirklich aussehen wird. Ein Prototyp geht noch einen Schritt weiter und lässt Nutzer den Ablauf anklicken.
Kann ich das Mockup bearbeiten und den Code behalten?
Ja. Fordere Änderungen an der Aufgabe an, oder nutze den Design-Bearbeitungsmodus, um Layout, Farben, Typografie und Abstände ohne Code anzupassen. Du kannst jederzeit den vollständigen Code herunterladen oder die Seite weiter zu einer Live-Website ausbauen.
Kann ich ein Gerät-Mockup meiner Website erstellen?
Ja. Füge einen Screenshot deiner Website hinzu und bitte darum, sie auf einem Laptop, Smartphone oder Tablet in der gewünschten Szene zu zeigen. Manus erstellt das Bild zum Herunterladen.
Erstelle dein nächstes Website-Mockup
Beschreibe die Seite oder füge eine Skizze an und prüfe sie auf Desktop und Mobilgeräten.