Plan your site

• Site plan in sync with your site on Free, Starter, Pro and Agency. Every plan The Plan tab's sitemap, wireframes and style, kept in step with your pages, sections, folders, collections and theme. Create the plan from your site in one click. No AI needed.
• Plan your site with AI on Free, Starter, Pro and Agency. Every plan Drafting from a brief, wireframing and building pages run on your own AI, connected over MCP.

Start a planLink to this section

Choose Plan in the modes pill. A project with no plan yet offers two ways in:

• Create the plan from your site lists your pages, sections, menu and brand from the code. It is free and needs no AI. New projects from a starter, GitHub imports, Import a website and Convert to React get this plan when they are created.
• Start from a brief for a new site: your AI writes the sitemap, sections and style from what you tell it.

Write a briefLink to this section

Choose Brief in the toolbar. Say what the business does, who the site is for and roughly how many pages it needs, add its languages, describe the look, paste content you already have, and add a few sites you like with what you like about each. Your AI studies those sites for direction only and never copies their code, text, images or logos.

Generate plan sends the brief to your AI, which drafts every page with its sections, the navigation and footer, and the colours and fonts. Running it again rewrites the plan from the brief, and pages already on your site keep their status.

The sitemapLink to this section

The Sitemap view shows Home and the pages under it as cards, each with its sections drawn as small layouts and the shared navigation and footer. Each card shows the page's status:

• Planned: in the plan, not on the site yet.
• Wireframed: on the site as grey boxes.
• Built: on the site with real sections.

Statuses come from the code, so a page your AI builds shows as built without anyone setting it.

Add page and Add section put new pages and sections in the plan, from the section library or a page template. Navigation edits the menu and footer every page shares.

Folders in the sitemapLink to this section

The sitemap follows your site's page folders: a folder shows its pages under it, and a folder with its own page shows it as the folder page. Drag a page beside another to reorder it, or onto a page or folder to move it there, or use Move to. A page that isn't on the site yet moves in the plan only. A built page goes through the same move as the Pages panel, with its links updated and a redirect, after you review it. See Pages, folders and redirects.

The wireframeLink to this section

The Wireframe view draws every page full height. Planned pages show as sketches of their sections; wireframed and built pages show the real page from the preview.

The styleLink to this section

The Style view sets colours by role, fonts and motion. It reads your site's real theme tokens; when the plan's brand and the theme differ, Apply to theme writes the plan's colours and fonts into the theme.

Build with your AILink to this section

From a page's menu, Wireframe this page asks your AI for grey boxes in your site's real code, and Build this page asks it to build the page for real. Build sends every planned page, with options for motion, copy, visuals and the icon set. Plan work in the toolbar lists the requests waiting and running. These steps need your AI, on Free, Starter, Pro and Agency; see Ways to connect your AI.

Always in sync with your siteLink to this section

Your site is the truth for what exists: pages and their addresses, the sections on each page and their order, the menu and the theme. The plan keeps your intent: the brief, each page's and section's purpose and notes, and pages you haven't built yet.

• Adding, renaming, moving or deleting a page in the Pages panel, adding, duplicating, moving or deleting a section on the canvas, and changing theme colours and fonts update the plan at once, and undoing the edit takes the plan back with it.
• Changes from your AI, the Code tab or a GitHub pull reach the plan after they land. The sync bar says Plan updated from your site with the number of changes, and the list shows what moved.
• When the plan changed since a page was built, Build changed sends only those pages to your AI.

Each sync is an unsaved change to the plan, so Discard in Save undoes it. Choose Update plan to sync at any time.

Review what was removedLink to this section

Sync never drops your notes on its own. A page or section that is gone from your site but still has a purpose or notes is marked Removed from site and waits in Changes from your site: choose Keep to leave it planned, or Remove to take it out of the plan, one at a time or with Apply all. Pages on your site that aren't in the plan yet are listed as On site only, and the next sync adds them as they are.

Collections in the planLink to this section

The plan lists your CMS collections next to the pages: blog posts, projects or team members, with a page per item. A planned collection stays in the plan until you choose Create on site, which adds it to your site's content with its collection page, on every plan within its collection limit. Once a collection is on the site, the site owns its name, URL folder and fields: change them in the Content tab and the plan follows. See CMS collections.

Undo and savingLink to this section

Undo plan edit and Redo in the toolbar, or the usual shortcuts, step through your edits on the board. Save plan writes the plan to your site as an unsaved change, and Discard edits drops the edits you haven't saved. The plan lives in your site's repository, per branch, so restore points bring it back with the code.