Bloom Feature: Design from images and URLs

Designing storefronts usually means translating static visuals or existing websites into actual code. It is slow, repetitive, and easy to get wrong. Whether you are working from a Figma frame, a screenshot of an existing store, or a store you admire, the gap between design and implementation creates friction throughout the build process.

This is why we built Design from Images and Links, one of the most powerful capabilities in Bloom. Instead of rebuilding designs by hand, Bloom takes your references, understands them, and converts them into working storefront components that you can iterate on instantly.

Turn References Into Storefronts in Minutes

Design from Images and URL lets you import any visual reference and turn it into implementation-ready storefront code. You can upload screenshots, Figma mockups, URLs, or even photos of a layout. Bloom then analyzes the visual structure and applies the design directly to your storefront.

This helps you skip hand coding the layout, styling, spacing, and component structure. You upload the reference, tell Bloom what you want, and Bloom builds it for you.

Design From Images

Design from images lets you build a storefront based on an uploaded Figma design or other visual.

Upload and instruct

Start by uploading a reference and tell Bloom what you want to build. For example:

• Match the typography and spacing from the link/image

• Turn the reference into a hero section with a product carousel

• Copy the button styling shown here and apply it to my global theme

Design extraction

Bloom identifies the layout, text, colors, spacing, and component patterns inside the image. It then converts these visual cues into the actual storefront implementation including code, styling, and configuration.

Design building and iteration

Once extracted, Bloom applies the design directly to your storefront. You see the updated layout in the preview and can immediately iterate further using prompts or Selection Mode.

Design from Links

Design from Links extends this same concept to URLs. Instead of uploading an image, you give Bloom a link to any website and Bloom replicates the design structure in your project.

For example:

• Pass Bloom the URL of a website and mention a specific component you like. Bloom will rebuild that section or page inside your storefront
• Provide a link to your existing shop and Bloom will use it to recreate the main components, styling system, and layout structure in Medusa and Bloom
• Share the URL of your existing site and Bloom will extract the structure and convert it into editable storefront components

This makes it possible to design entire storefronts in minutes, based on real examples, without starting from a blank canvas.

Import of Products

Design from Links also makes product imports simple. If you provide Bloom with the URL or image of a product page, Bloom extracts the product information and adds it directly to your store. That includes title, description, gallery images, price, variants, and more.

You can use this to migrate from existing platforms, populate demo environments quickly, or pull in references from other online stores as you design.

Request early access today

Design from Images and Links is available in our early access program. We are rolling out invites continuously, so sign up today at bloom.medusajs.com and we will notify you as soon as your workspace is ready.