#000

https://main--cc--adobecom.aem.live/cc-shared/assets/img/firefly.svg|AdobeFirefly Adobe Firefly

Erstelle interaktive Designs mit Firefly Builder, dem KI-Website-Builder.

Mit Firefly Builder kannst du Websites und Apps visualisieren – deine Prompts und Referenzen werden in responsive Designs umgewandelt, die sich direkt auf der Arbeitsfläche in der Vorschau anzeigen und bearbeiten lassen.

In Warteliste eintragen

style
dark
#000

https://main--da-cc--adobecom.aem.page/cc-shared/assets/img/product-icons/svg/firefly-80.svg|Adobe Firefly

Zur Firefly Builder-Warteliste anmelden

https://main--da-cc--adobecom.aem.page/cc-shared/assets/img/product-icons/svg/firefly-80.svg

Adobe Firefly

In Warteliste für Firefly Builder eintragen

https://main--da-cc--adobecom.aem.page/cc-shared/assets/img/product-icons/svg/firefly-80.svg

Adobe Firefly

In Warteliste für Firefly Builder eintragen

style
Sticky bottom, dark

Vibe Coding trifft auf kreative Kontrolle: Firefly Builder.

Designerinnen und Designer können ihre Ideen jetzt schnell in interaktive, markengerechte Web- und Appdesigns umsetzen – ohne eine einzige Zeile Code zu schreiben. Erstelle und verwalte mehrere Projekte auf einer einzigen Arbeitsfläche, und passe alle Details per Chat mit einem Agenten oder durch direkte Auswahl und Bearbeitung an. Exportiere anschließend deine Code-Bundles für die weitere Entwicklung.

background
#FFF
style
xxl-spacing-top, xl-top-rounded-corners, static links

Konsistenz und Kontrolle – mit Design-Systemen und Bearbeitung direkt auf der Arbeitsfläche.

Gib einfach einen Prompt ein oder lade deine Markenrichtlinien hoch, um ein Design-System zu generieren, das deinen Marken-Look über alle Versionen hinweg gewährleistet. Bearbeite deine Designs über das Eigenschaften-Bedienfeld, oder wähle ein beliebiges Element mit dem Inspect-Tool aus und gib einen Prompt ein, um die gewünschten Änderungen zu beschreiben.

Überprüfung und Freigabe leicht gemacht.

Firefly Builder erweckt deine Designs als klickbare Prototypen zum Leben, die du direkt auf der Arbeitsfläche testen kannst. Schicke einen Link an Stakeholder, Kundinnen und Kunden sowie Mitarbeitende, um ihr Feedback einzuholen – damit du deine Entwürfe noch vor der Entwicklung perfektionieren kannst.

Experience aus dem KI-Website-Builder exportieren.

Stelle saubere HTML-Code-Bundles für Entwicklerinnen und Entwickler bereit, oder importiere die Bundles in Web-Coding-Tools, um deine Designs fertigzustellen.

So erstellst du interaktive Designs mit Firefly Builder.

Schritt 1

In die Warteliste eintragen.

Melde dich auf firefly.adobe.com/builder mit deiner Adobe ID an, und trage dich in die Warteliste für Firefly Builder ein. Falls du noch kein Adobe-Konto hast, kannst du kostenlos ein neues erstellen.

Schritt 2

Firefly Builder öffnen.

Sobald das Tool verfügbar ist, melde dich mit deiner Adobe ID an.

Schritt 3

Dein Projekt generieren.

Klicke auf das Papierflieger-Symbol in der unteren rechten Ecke des Prompt-Fensters. Firefly Builder beginnt dann, dein Design auf der Arbeitsfläche zu generieren. Dabei kannst du jeden Schritt in Echtzeit mitverfolgen.

Schritt 4

Dein Projekt in der Vorschau ansehen.

Wenn Firefly Builder fertig ist, erhältst du eine interaktive Vorschau deines Projekts. Du kannst den Rahmen erweitern, einzelne Elemente untersuchen oder das interaktive Erlebnis in einem neuen Browser-Fenster testen.

Schritt 5

Ergebnisse verfeinern.

Bearbeite dein Projekt weiter, indem du den Rahmen auswählst und Anweisungen in das Chat-Fenster des Agenten eingibst.

Schritt 6

Optional: Ein weiteres Projekt generieren.

Um ein neues Projekt zu erstellen, hebe die Auswahl des Rahmens auf und zoome heraus. Zeichne mit dem Rahmen-Werkzeug (auf der unteren Werkzeugleiste) einen neuen Rahmen an beliebiger Stelle auf der Arbeitsfläche. Wähle diesen Rahmen aus und gib einen neuen Prompt ein, um das gewünschte Design zu generieren.

Wechsle zwischen Projekten, indem du sie auf der Arbeitsfläche oder im Dropdown-Menü oben links im Chat-Fenster auswählst.

So erstellst du interaktive Erlebnisse mit Firefly Builder.

Schritte zur Erstellung interaktiver Erlebnisse mit Firefly Builder.

PT5M

firefly

In Warteliste eintragen
style
xl-bottom-rounded-corners
background
linear-gradient(180deg, #FFF 0%, #F0F0F7 27.32%)

Warum Firefly Builder als KI-Website-Builder nutzen?

Mit Firefly Builder können Kreativprofis bzw. Profis für Grafik oder UI/UX-Design interaktive Erlebnisse generieren – ganz ohne Code schreiben zu müssen. Ob du eine einfache Web-Anwendung entwerfen oder eine markenkonforme Microsite für eine Produkteinführung gestalten möchtest: Mit Firefly Builder kannst du das Look-and-Feel des fertigen Produkts visualisieren und testen, wie es sich verhält.

background
#FFF
style
xxl-spacing-top, xl-top-rounded-corners, static links
#FFF

Kreative Kontrolle.

Mit der Möglichkeit, Design-Systeme zu generieren und alle Details deiner Designs direkt auf der Arbeitsfläche zu bearbeiten, bringt Firefly Builder das Vibe Coding auf ein völlig neues Präzisionsniveau.

#FFF

Interaktives Design ohne Coding.

Beschreibe dein Konzept, füge visuelle Referenzen hinzu und lade deine Markenrichtlinien hoch – schon generiert der KI-Website-Builder interaktive Designs, die deiner Vision entsprechen.

#FFF

Einfache Weitergabe.

Sobald du mit deinem Design zufrieden bist, gib es per Link für Mitarbeitende und Stakeholder zur Überprüfung frei – ohne Dateiexport oder umständliche Bereitstellung.

#FFF

Produktionsfertiger Output.

Firefly Builder generiert schnell saubere Code-Bundles, die du in Tools für Web-Entwicklung weiter verfeinern kannst.

style
two up, s spacing top, l spacing bottom, show-2-desktop, static-links
background
#FFF
In Warteliste eintragen
background
#FFF
style
xl-top-rounded-corners, static links

Entdecke, was du mit Firefly Builder alles machen kannst.

In die Warteliste eintragen
https://firefly.adobe.com/builder/join?ff_source=adobe-com&ff_campaign=ff-builder-page
In die Warteliste eintragen
https://firefly.adobe.com/builder/join?ff_source=adobe-com&ff_campaign=ff-builder-page
In die Warteliste eintragen
https://firefly.adobe.com/builder/join?ff_source=adobe-com&ff_campaign=ff-builder-page

Entdecke weitere Features

background
#F0F0F7
Text zu Bild Bild zu Bild Skizze zu Bild KI-Grafik-Design generieren KI-Kunstgenerator KI-Zeichnungsgenerator KI-Videogenerator KI-Animationsgenerator KI-Porträtgenerator KI-Cartoon-Generator KI-Musikgenerator KI-Sound-Effekt generieren
background
linear-gradient(180deg, #FFF 0%, #F0F0F7 27.32%)
style
xl-bottom-rounded-corners, spacing-bottom-180

Fragen? Wir haben die Antworten.

Was ist Firefly Builder?

Firefly Builder ist ein Webtool, mit dem du interaktive Designs wie Websites und Apps ganz ohne Coding erstellen kannst.

Für wen ist Firefly Builder geeignet?

Firefly Builder richtet sich an Design- und Kreativ-Profis, die visuelle Storys für interaktive Erlebnisse wie Websites und Apps erzählen möchten – ob für Kundenprojekte oder die eigene Unternehmensmarke.

Wann kann ich auf den KI-Website-Builder von Firefly Builder zugreifen?

Das Tool ist jetzt im Rahmen eines privaten Beta-Programms verfügbar. Weitere Informationen findest du unter firefly.adobe.com/builder.

Welche Sprachen werden unterstützt?

Firefly Builder ist derzeit nur auf Englisch verfügbar.

Welche Dateitypen kann ich in das Prompt-Fenster hochladen?

Firefly Builder unterstützt derzeit folgende Dateitypen: JPEG, PNG, PDF, MD und GIF.

Kann ich den KI-Website- und App-Builder von Firefly Builder auf meinem Mobilgerät nutzen?

Ja. Firefly Builder unterstützt Browser auf dem Desktop und Mobilgeräten. Die Ausgabe von Code-Bundles für Mobile Apps wird derzeit noch nicht unterstützt.

Welche Browser unterstützt Firefly Builder?

Du kannst Firefly Builder in Google Chrome, Apple Safari, Microsoft Edge und Mozilla Firefox verwenden.

Kann ich meine Designs nach der Generierung bearbeiten?

Ja. Du kannst deine Designs direkt über das Eigenschaften-Bedienfeld bearbeiten oder das Inspect-Tool nutzen, um gezielt einzelne Elemente anzusteuern und per Prompt Änderungen vorzunehmen.

Diese Seite teilen

style
xxl spacing bottom