Studio Editor: Generating a Visual Sitemap and Wireframes for a New Site
In this article
- Step 1 | Fill in details about your client's site
- Step 2 | Choose what to generate
- Step 3 | Review the sitemap and content in the editor
Accelerate site planning using our AI-powered visual sitemap tool. Tell us about your client's business and goals and we’ll generate a visual sitemap with wireframes that you can edit and manage.
The content, pages and business solutions that you see in the visual sitemap are tailored to the brief—the more details you share, the more precise the results.
Tip:
As different clients may require different workflows, we also offer other ways to create a Studio site – you can start with a blank canvas, explore our variety of templates or use
your own custom template.
Step 1 | Fill in details about your client's site
To get started, go to the Sites page in your workspace. You can then select to create a new site with AI-generated sitemap and wireframes, tailor-made to your client's unique needs.
The only fields that are mandatory are the site type (e.g. online clothing store) and a short description. However, there are many other details you can share in order to make the result more precise to your client's brief.
To start creating a new site:
- Go to Sites in your Wix Studio workspace.
- Click Create New Site at the top right.
- Select Studio sitemap & wireframes.
- Enter the site's main purpose under What's the business type (e.g. online clothing store, boutique fitness studio, etc.)
- Choose how you want to complete the rest of the form:
Fill the form manually
Complete the form with AI
As an alternative, you can click
Skip to Templates at the bottom to see our available site templates. However, keep in mind the text and pages you get in a template are more generic.
Step 2 | Choose what to generate
Before proceeding to the editor, decide what you want AI to generate for you:
- Visual sitemap & wireframes: AI generates the structure of pages and sections for you, while also creating wireframes for an easy start on your design.
- Visual sitemap only: If you have a very specific vision for your design and don't need wireframes, you can choose this option. AI only generates the sitemap – the pages and sections will appear blank, allowing you to start from scratch.
Select the option that meets your needs and click
Start Generating.
Step 3 | Review the sitemap and content in the editor
Once you click
Start Generating, AI gets to work creating your client's site. You are then redirected to the editor to see the end result: a comprehensive sitemap with pages and sections.
The new site may also include Wix apps. For example, if you describe a fitness club, we automatically add the Wix Bookings and Members Area apps so your clients can book classes and log in to their own account.
Your starting point depends on what you chose to generate:
- Visual sitemap & wireframes: You're redirected to the Home page, which already includes relevant wireframes.
- Visual sitemap only: You're redirected to see the visual sitemap so you can review the structure. Exit the panel to start working on your design.
Note: Pages related to Wix apps will be populated with app elements that you can customize.
Choose what to do next:
Review and edit the sitemap
on the left side of the editor.
above or below it. You can add a blank section, a global section, one of our general sections or let AI generate one for you. 
at the top. 
Add and customize elements
on the left side of the editor to explore our full range of elements.
Add Wix business solutions
on the left side of the editor to explore our full range of apps.
Design and edit the wireframes
Have existing sites built on Studio?
The
visual sitemap panel is available for all Studio Editor sites, including any existing sites you've built.
