Planning A Website In Siteplay.ai

The planning workflow in Siteplay.ai helps you create the foundation of your website before moving into prototyping or design.

A well-structured website plan helps you:

• Organize pages clearly
• Define page hierarchy
• Plan section layouts
• Improve user navigation
• Speed up the design process
• Generate better AI results

Siteplay.ai provides two ways to plan your website:

1. Planning With AI
2. Planning Manually

We recommend you to take hybrid approch to have more control on the sitemap creation.

---

Planning With AI

The fastest way to create a website structure is by using AI.

You can simply enter a prompt describing your website idea, business, or product, and Siteplay.ai will automatically generate a sitemap with pages and sections.

Generating Pages

Directions

To generate pages, enter a site prompt in the dialog by clicking on the edit button (besides logo) on the top left corner of the visual builder.

Enter the site prompt and click on Generate Site button.

AI kicks in and it will create a sitemap for the give prompt.

For example:

Create a SaaS website for an AI meeting summarizer with
pricing, blog, integrations, and Contact pages.

Using this prompt, Siteplay.ai can instantly generate below pages:

• Homepage
• Pricing page
• Blog pages
• Contact page
• Additional supporting pages

The AI planning workflow automatically creates a complete website sitemap based on your prompt.

This helps you avoid manually thinking about:

• Which pages to create
• How pages should be organized
• What content should appear on each page
• Common website structures for your niche

The generated sitemap acts as the blueprint for your website.

Generating Sections

Directions

To generate sections for each page, click on the Generate Page Sections button in each blank page in the sitemap.

After generating pages, Siteplay.ai can also generate sections for each page automatically.

For example, a homepage may include:

• Hero section
• Features section
• Testimonials
• FAQ
• Pricing preview
• CTA section
• Footer

A pricing page may include:

• Pricing cards
• Feature comparison
• FAQ
• Enterprise CTA

This allows you to quickly scaffold complete pages without manually building every section from scratch.

Why Use AI Planning?

AI planning is useful when you want to:

• Build websites quickly
• Generate initial ideas
• Create MVP websites
• Speed up client work
• Explore multiple website structures
• Reduce repetitive planning tasks

It is especially helpful for startups, freelancers, and developers who want a faster workflow.

---

Planning Manually

If you want more control over your website structure, Siteplay.ai also supports manual planning workflows.

You can manually:

• Add pages
• Rename pages
• Organize sitemap hierarchy by drag and drop pages
• Add sections
• Remove sections
• Reorder sections by drag and drop
• Customize layouts

This workflow gives you full flexibility over how your website is structured.

Adding Pages

Directions

To manually create pages in the planning workflow, click on the + button on every page node.

Double click on the page node title/label to open Edit Site Page dialog to enter page details.

You can create pages one-by-one based on your project requirements.

For example:

• Home
• Features
• Pricing
• Blog
• Careers
• Documentation
• Contact

This approach is useful when you already have a clear sitemap in mind or need precise control over navigation structure.

Adding Sections

Directions

To manually add sections in the planning workflow, click on the Add Section button on blank page node. It will bring up a Add Sections dialog with search and filter options. You can filter by category and start adding sections. loading=“lazy”

You can also manually add sections to each page.

Siteplay.ai provides reusable sections that can be mixed and matched across pages.

Examples include:

• Hero sections
• Feature grids
• Stats sections
• Testimonials
• FAQs
• Pricing tables
• CTAs
• Footers

Sections can be reordered and customized at any time.

---

AI + Manual Workflow

Most users combine both workflows together. We recommend this approach for all our users.

A common workflow is:

1. Generate sitemap with AI
2. Generate sections with AI
3. Manually refine pages
4. Customize sections
5. Reorder layouts
6. Continue into prototype and design workflows

This hybrid approach gives you the speed of AI with the flexibility of manual control.

Whether you prefer:

• AI-powered sitemap generation
• Manual page organization
• AI-generated sections
• Fully custom page structures

Siteplay.ai gives you the flexibility to plan websites your way before moving into prototype and design phases.