Turn Images into Catchy Landing Pages with Zero Coding

Creating a visually attractive landing page used to mean hiring developers or learning how to code. But now, with the integration of ChatGPT and Gemini into Selldone’s Page Builder, that’s no longer the case.

This new AI-powered workflow allows anyone—regardless of technical experience—to convert a simple image, sketch, or even a rough idea into a beautiful, fully responsive section for their online store or landing page. Everything is done in a way that works instantly within the Selldone ecosystem, with no manual coding required.

Whether you're building a personal brand or managing an online business, this method makes it easy to launch polished, modern pages in minutes.

From Concept to Component in Minutes

Let’s say you come across a design you like. Maybe it’s a product showcase on another website, a marketing banner you created in Canva, or even just a screenshot you saved. You don’t need to figure out how to code it or where to start.

Simply upload the image or describe the layout, and ask ChatGPT (using the Selldone plugin) or Gemini to convert it into a landing page section. The AI understands both Selldone’s technical format and the structure of dynamic Vue components used in the platform. You’ll receive a block of copy-paste-ready code that fits directly into Selldone’s Page Builder.

This section will include:

• All text and headings
  

• Images and links
  

• Buttons, fonts, and colors
  

• Dynamic features like product cards or testimonials
  

Most importantly, it will be responsive on desktop, tablet, and mobile—automatically.

A Simple Process for Powerful Results

To add this section to your Selldone page, follow these steps:

1. Upload or describe your design idea to ChatGPT or Gemini.
   

2. Ask for a Vue component compatible with the Selldone Page Builder.
   

3. Copy the generated code.
   

4. In Selldone’s Page Builder, drag and drop the Code element into the landing page

5. Paste the code in the Vue tab and save.

1. Upload or describe your design idea to ChatGPT or Gemini.

Important Reminder: Please use this link for direct access to the ChatGPT Selldone Plugin.

Tip: From your desktop, upload the design image you prefer to ChatGPT. Along with the image, provide a detailed explanation to help generate a more accurate component and minimize future revisions.

Example Prompt:

Your new section is live, fully styled, and mobile-ready.

You can now customize it through the property panel or go back to the AI to request edits—whether that’s adjusting a layout, changing colors, adding features, or replacing text.

Recommended Prompt for the Best Results

To help the AI understand exactly what you need, we recommend using this prompt:

Please generate a responsive Vue component for Selldone Page Builder based on this image or description. All text, buttons, images, colors, and fonts should be defined inside the properties object. The component must follow Vuetify 3 standards, be responsive across devices, and follow Selldone’s rules including no self-closing tags. If applicable, include product cards, rating stars, and action buttons. For all texts and cards and buttons, please add visual color picker, fontsize, fontweight and radius.

You can reuse this prompt any time you want to create or adjust a section. It ensures the code is generated cleanly and aligns with Selldone’s requirements.

Fully Customizable, Fully Scalable

Once your section is in place, you’re not limited to what you started with. You can ask ChatGPT or Gemini to change anything:

• Replace or move an image
  

• Update titles and subtitles
  

• Add new buttons, sliders, testimonials, or banners
  

• Adjust text styles and sizes
  

• Modify spacing and layout for a different look
  

You can keep expanding the page with new sections. There’s no limit to how many components you can add, and every one of them will be built on the same reliable, flexible structure.

Each element is editable. Colors can be changed using visual pickers, and images can be replaced or uploaded easily. The experience is made to be intuitive, even if you’ve never used a page builder before.

Possible Errors

Error #1

If you encounter errors after pasting the code into the Selldone builder (as shown in the image below), simply ask ChatGPT or Gemini to help you resolve them.

The tools will automatically respond and begin fixing the code for you.

Error #2

If you copy and paste the code in the HTML tab, the section will be shown as blank:

As you can see, I mistakenly entered the code in the HTML tab, which I shouldn't have.

Error #3

Sometimes, when you request a slider, carousel, or scrollbar to be added to a section, you might notice unwanted elements like extra dots, dashes, or arrow buttons appearing outside the section. This usually happens because ChatGPT used MDI (Material Design Icons) instead of the required Google Font Material Icons. To fix this, make sure to ask ChatGPT to use only Google’s official Material Icons.

Before You Begin, Read These Tips:

• Sometimes, after the tool replies, you may need to ask it to write the full code. If the changes are minor and the original code is long, it may prefer to give you instructions to replace specific lines instead of rewriting the entire block.
• It’s recommended to start a new Selldone ChatGPT conversation for each new section. Continuing from a previous session may cause the tool to apply old instructions that aren’t relevant to your new component.
• Sometimes, ChatGPT may give you an input in Selldone component properties to enter an image URL, but your image is stored locally on your computer. In such cases, ask ChatGPT to define the element (e.g., a carousel or slider) as an object, so you can upload images directly instead of using URLs.
• If an image contains many visual elements, you can simply upload it to ChatGPT and ask for a description. Then, copy that description and use it as a prompt to ask ChatGPT to generate a component. This approach often leads to better and more accurate results.

Why This Matters

With this workflow, anyone can go from a visual concept to a responsive, production-ready landing section in minutes. No more waiting for developers or struggling with layout builders. No need to learn Vue, CSS, or responsive design.

Everything the AI generates is already optimized to look good on all devices. You don't have to worry about breaking the layout, resizing images, or writing style rules. The sections follow strict standards based on Selldone’s design language and best practices.

You’ll spend more time creating and less time fixing.

Try It Yourself Today

Getting started is simple. Choose a section you’d like to create—whether it’s inspired by another website, a sketch, or a product flyer—and describe it to ChatGPT or Gemini using the recommended prompt. You’ll receive the code, paste it into Selldone, and your landing page comes to life.

It’s fast. It’s easy. And it’s open-ended.

There is no cap on creativity, and no ceiling on how far you can go. With AI and Selldone, building powerful, beautiful web pages is now as simple as describing what you want.