Easily visualize websites, apps, and more with Firefly Builder, which turns your prompts and references into responsive designs you can preview and edit directly on the canvas.
Simply type a prompt or upload your brand guidelines to generate a design system that will keep your look and feel consistent across versions. Edit your designs via the Properties panel, or select any element with the Inspect tool and type a prompt to describe the changes you’d like to see.
Firefly Builder brings your designs to life as clickable prototypes that you can test out right on the canvas. Send a link to stakeholders, clients, and collaborators to get their feedback so you can revise and refine before development begins.
Hand off clean HTML code bundles to a developer or import them into web coding tools to take your designs to deployment.
Go to firefly.adobe.com/builder and join the waitlist for Firefly Builder using your Adobe ID, or create a free account if you don’t already have one..
Once the app is available, log in using your Adobe ID.
Click the paper airplane icon in the lower right corner of the prompt window. Firefly Builder will begin generating your design on the canvas, and you’ll see its actions in real time, step by step.
When Firefly Builder is done, you’ll get an interactive preview of your project. You can expand the frame, inspect individual elements, or test out the experience in a new browser tab.
Continue editing your project by selecting its frame and typing instructions into the agent chat window.
To create a new project, deselect the app frame and zoom out. Draw a new frame anywhere on the canvas using the Frame tool in the bottom toolbar. Then generate a new design inside this frame by selecting it and entering a new prompt.
Move from one project to another by selecting them on the canvas or in the dropdown menu in the top left area of the chat panel.
With the ability to generate design systems and edit all the details of your designs right on the canvas, Firefly Builder brings a new level of precision to vibe coding.
Simply type descriptions, add visual references, and upload your brand guidelines, and the AI website builder will quickly generate interactive designs that match your vision.
Once a design is in a good place, get a shareable link to send to collaborators and stakeholders for review. No file exports or handoffs needed.
Firefly Builder quickly produces clean code bundles that are ready to enhance further in web development tools.
