Skip to main content

AI Dream Wizard Overview

Create your entire website structure and design language automatically - from concept to canvas.

I
Written by Inbal Shemesh
Updated over a week ago

🪄 AI Dream Wizard – From Idea to Designed Website

The AI Dream Wizard helps you generate a full website structure, wireframes, and design language - all with just a few prompts.
You can use it to create a new website from scratch or to build a new section inside an existing Flowmo project.


Step 1 – Dream Your Website

In this step, describe your vision.
You’ll choose whether you’re creating a Full Website or a Single Page, then fill in the basic project details:

  • Website Name : The name of your project.

  • Description: What the website is about, your target audience, and your goals.

  • Visual Style & Preferences: Describe the general look and feel (colors, typography, layout, mood).

  • (Optional) Wireframe Sketch: Upload a hand-drawn or visual layout reference to guide the AI.

When you’re done, click Generate Structure → to move to the next step.


Step 2 – Structure

Here you’ll get an AI-generated sitemap - with all your pages, header, and footer.
Each page starts with a simple card (Homepage, Features, Pricing, etc.), and you can:

  • Add or delete pages

  • Reorder pages by dragging

  • Generate sections for specific pages, or for all pages at once using Generate Sections Structure

Once sections are generated, you can edit, regenerate, or delete them as needed.
Each page has its own small menu with options:

  • Edit page details

  • Re-generate sections

  • Generate page wireframes

  • Duplicate

  • Delete

When you’re satisfied with the sitemap and section structure, click Generate Wireframes - either for the whole site or per page.

You can preview each page before moving on.


When everything looks right, click Add to Canvas to bring your wireframes into the Flowmo canvas.


Step 3 – Design Language

If you only need wireframes, you can stop here.
But if you want to generate a full visual design, continue to this step.

Here, you’ll define your design direction:

  • Design Vision – Describe your desired visual style, tone, and structure.

  • (Optional) Reference Image – Upload a screenshot or design that represents your vision.

Click Generate Design Language to create styled versions of your pages.

You’ll first get a homepage preview, where you can refine the design by typing feedback like: “Make the colors softer” or “Use a darker header and rounder buttons.”

When you’re happy, click Apply to All Pages - Flowmo will start generating the visual design for each page.


Once all pages are ready, click Finish and Import to Canvas to add them to your project.

All generated designs are fully editable - every element can be modified visually in the canvas, exactly like a design you created from scratch.


💡 Notes

  • Everything generated is responsive by default — you can preview desktop, tablet, and mobile layouts.

  • The Design Language step is optional — perfect for users who only need wireframes.

Did this answer your question?