UXMagic Startseite
  • Funktionen
  • Bibliotheken
  • Community
  • Preise
  • Partnerprogramm
  • Ressourcen
UXMagic Startseite
UXMagic Startseite

Bibliotheken

Community
Preise
Partnerprogramm

Ressourcen

Folge uns auf:
  • Folge uns auf Slack
  • Folge uns auf Twitter
  • Folge uns auf LinkedIn
  • Folge uns auf YouTube
  • Folge uns auf Instagram
Hilfe-Center
  • 🚀Erste Schritte
  • ✨Designs generieren
  • 🎨Designen & bearbeiten
    • Einen Screen bearbeiten
    • Mit dem Chat bearbeiten
    • Themes und Styleguides
    • Schriften und Typografie
    • Bilder in deinen Designs
    • Versionen und Verlauf
    • Responsive und Gerätevarianten
    • Komponentenbibliotheken und Designsysteme
  • 📦Export & Übergabe
  • 🌐Website veröffentlichen
  • 🤝Teilen & zusammenarbeiten
  • 🔌Integrationen & Entwicklung
  • 💳Tarife, Credits & Abrechnung
  • 🛠Fehlerbehebung

Kommst du nicht weiter?

Unser Team antwortet direkt aus dem Produkt heraus.

Support kontaktieren →
  1. Hilfe-Center/
  2. Designen & bearbeiten/
  3. Responsive und Gerätevarianten

Responsive und Gerätevarianten

Mobil- und Desktop-Fassungen eines Screens erstellen und im Gleichschritt halten.

Zuletzt aktualisiert: 27. August 2026

Auf dieser Seite

  • Eine Variante erstellen
  • Kosten
  • Varianten im Gleichschritt halten
  • Theme wird geteilt
  • Exportierter Code

Eine Variante erstellen#

Frag sie an oder nutz das Gerätebedienelement am Screen:

Mach eine Mobilfassung der Landingpage.

Die Variante ist ein neuer Screen auf dem Canvas, angepasst an die Zielbreite — keine fließende Größenänderung. Layouts werden wirklich umgebaut: mehrspaltige Abschnitte stapeln sich, die Navigation klappt zusammen, die Schrift skaliert herunter.

Kosten#

Einen Screen auf eine andere Gerätegröße umzustellen wird pro Screen zum selben Satz wie eine Neugenerierung abgerechnet, weil es eine ist. Acht Screens umzustellen kostet das Achtfache — lohnt sich, vorher das Guthaben zu prüfen.

Varianten im Gleichschritt halten#

Varianten sind eigene Screens, eine spätere Änderung an der Desktop-Fassung fließt also nicht automatisch in die mobile. Zwei Möglichkeiten:

  • Frag die Änderung für beide ausdrücklich an: „Ändere auf der Desktop- und der Mobil-Landingpage den CTA zu ‚Kostenlos starten‘.“
  • Oder mach das Desktop-Design zuerst fertig und generier die Varianten einmal am Ende. Das ist meist die günstigere Reihenfolge.

Theme wird geteilt#

Beide Varianten nutzen das Projekt-Theme, Farb- und Schriftänderungen gelten also automatisch für beide. Nur das Layout ist variantenspezifisch.

Exportierter Code#

Exportierter Code bildet den Screen ab, den du exportiert hast. Wenn du eine wirklich responsive Implementierung statt zweier fester Layouts brauchst, exportier den Desktop-Screen und pass ihn an, oder exportier beide und führ sie am Breakpoint zusammen — siehe Code exportieren.

War dieser Artikel hilfreich?

Verwandte Artikel

Einen Screen bearbeiten

Die drei Wege, ein Design zu ändern — Chat, Bearbeitungsmodus und Theme — und wann welcher der richtige ist.

Themes und Styleguides

Wie das Projekt-Theme funktioniert, wie du es gefahrlos änderst und warum Farben nie Screen für Screen bearbeitet werden sollten.

Code exportieren (HTML, React, Tailwind)

Exportier einen einzelnen Screen oder ein ganzes Projekt als produktionsreifen Frontend-Code.

← ZurückVersionen und VerlaufWeiter →Komponentenbibliotheken und Designsysteme

Auf dieser Seite

  • Eine Variante erstellen
  • Kosten
  • Varianten im Gleichschritt halten
  • Theme wird geteilt
  • Exportierter Code

deine nächste idee
verdient es zu existieren

hör auf, drüber nachzudenken. tipp es einfach ein. Unfertig, halbgar, egal. Wir machen etwas Echtes daraus.

Produkt

  • Community
  • Preispläne
  • Partnerprogramm
  • UXMagic MCP
  • Claude MCP
  • KI-Infos

Ressourcen

  • Hilfe-Center
  • Figma-Bibliothek
  • React-Bibliothek
  • Mobile-App-Vorlagen
  • Dokumentation
  • Tutorials

Funktionen

  • Prompt zu UI
  • Bild zu UI
  • Skizze zu UI
  • Website klonen
  • Aus Figma importieren
  • AI Wireframe Generator
  • AI Mockup Generator
  • AI Prototype Generator
  • AI Dashboard Generator
  • Alle Funktionen

Vergleichen

  • vs. UX Pilot
  • vs. Relume
  • vs. MagicPath
  • vs. Magic Patterns
  • vs. Banani
  • vs. Galileo AI
  • vs v0
  • vs Lovable
  • vs Base44
  • Alle Wettbewerber

Blog

  • KI im UX-Design-Workflow: Was wirklich funktioniert
  • Prompt-Vorlagen für SaaS-Dashboards
  • Echte Prompts, mit denen wir Produkt-Flows generieren
  • Prompt Engineering für UX-Designer
  • Die besten Wireframing-Tools 2026: 10 kostenlose & Pro-Optionen im Vergleich
  • Alle Blogartikel

Unternehmen & Support

  • Karriere
  • Kontakt
  • Datenschutzerklärung
  • Nutzungsbedingungen
  • Cookie-Einstellungen
  • Folge uns auf Slack
  • Folge uns auf Twitter
  • Folge uns auf LinkedIn
  • Folge uns auf YouTube
  • Folge uns auf Instagram

© 2026 UXMagic AI Technologies Inc.