Skip to content

Design from an Image in JDoodle.ai

Upload an image, a mockup, a mood board, or even a screenshot, and JDoodle.ai will generate a website layout inspired by its structure and style. Just add a prompt to guide the output, and let the image set the tone for the page.

TL;DR:

  • Feature: Upload an image, add a Prompt and Get a full layout design

  • Supported formats: JPG, PNG, JPEG, SVG (max 300 KB), GIF, WEBP (max 5 MB)

  • Best for: Mockups, screenshots, moodboards, UI inspiration

  • Prompt examples:

    • “Design a modern SaaS landing page using this image.”

    • “Build a minimal homepage inspired by this visual.”

What is “Design from an Image” in JDoodle.ai?

“Design from an Image” is a feature that lets you upload an image and generate a custom layout based on that visual. The image uploaded is used as a creative reference, combined with the prompt to build a unique web page.

How to Use It (Step-by-Step)

Step 1: Open the Prompt Editor

Go to home page and go to the option “design from an image” option.

design from an image

Step 2: Upload an Image

Click the 📎 Upload icon near the prompt, or upload option in “design from an image” option and choose your file. It could be any UI/UX wireframe image or screenshot of an existing website

Supported formats:

  • JPG / JPEG

  • PNG

  • SVG (max 300 KB)

  • GIF

  • WEBP (max 5 MB)

Step 3: Add a Prompt

Once the image is attached, type a clear instruction after uploading your image.

Example :

  • Design a clean product landing page based on this image.

  • Build a dark-themed homepage using this as a visual reference.

  • Use this image to create a modern portfolio layout.

Step 4: Click “enter”

Once you entered, jdoodle.ai will be able to create a website based on the image reference and the prompt entered.

What kind of images work best?

  • UI mockups (Figma/Sketch screenshots)

  • Landing page designs or inspiration shots

  • Moodboards or color palettes

  • Marketing graphics or brand-style references

Here is an example of how the result will be : The uploaded image:

uploaded image

And the result :

jdoodle ai webapp

A few prompt examples to try :

For Layout Types :

  • Design a modern SaaS landing page based on the attached image.

  • Build a one-page portfolio inspired by the image attached

  • Create a dashboard-style UI using this image as reference.

  • Use this image and design a similar clean product detail page.

For Visual Style / Aesthetic :

  • Create a bold and dark-themed layout using the style from the image

  • Use the attached image as a base for a soft, neutral-toned portfolio.

For Structure / Components :

  • Build a layout by adding features, footer, contact us pages using the attached image as reference.

  • Design a three-section homepage layout inspired by the attached mockup.

  • Use the attached image to guide the structure of a pricing page.

FAQs: Frequently Asked Questions

Can I upload multiple images at once?

No. At present, jdoodle.ai processes one image per prompt. You can upload more images using additional prompts.

Will JDoodle recreate the design pixel-by-pixel?

No. It creates a new layout inspired by the uploaded image, not a direct copy. The structure and vibe will reflect the visual input, but content and styling can be changed based on prompt given.

Can I control the output more specifically?

Yes. It doesn’t mean the layout will be the same just as the uploaded image. You can get your desired output by adding desired prompts.

You can change the

Layout type as dashboard, portfolio, homepage

Style can be dark mode, minimal, bold, modern

Add sections like features, pricing, footer

1. What happens if I don’t like the result?

If you are not happy with how the website design has turned out, you can tweak your prompt and re-run it. If you prefer to change the whole layout, you can upload a different image and try again.

2. Can I edit the generated layout later?

Yes. The layout is completely editable and you can continue to customize using additional prompts.

3. Tips for Better Results

  • Using clear keywords like “homepage,” “grid,” or “two-column” will help you get better results.

  • Include tone and style hints: minimal, dark, playful, bold.

  • Try uploading UI screenshots or mockups for more structured layouts.

4. How to Reset or Start Over?

If you are not happy with the results and want a fresh design, you can :

  1. Upload a new image

  2. Add a new prompt

  3. Hit Enter

Need Support?

Still unsure or stuck? Contact us at [email protected] and we're happy to help you bring your visual ideas to life. Or connect with our community on Reddit to share feedback, ask questions, and get inspired.