# An AI sitemap and wireframe generator for your whole site URL: https://xodia.ai/product/plan Description: An AI sitemap and wireframe generator that stays in sync with your site: your AI drafts every page, its sections and style, then builds them in real code. Last updated: 2026-11-08 Every plan The Plan tab is Xodia's AI sitemap and wireframe generator: you describe the business, and your AI drafts every page, its sections, the navigation and the style on one canvas, then builds the pages in your site's real code. The plan stays in sync with your site as you and your AI change it, on every plan. [Start free](https://app.xodia.ai/auth/sign-up?ref=product-plan) [See pricing](https://xodia.ai/pricing) Free plan. No card needed. What you plan ## Everything a site needs, before a page is built The plan is a file in your site, so your AI, your team and the builds all read the same one. - A brief and sites you like Say what the business does, who it is for and the main action. Add sites you like and what you like about each, and your AI notes what to take from them. - A sitemap Every page as a card, inside its folder, with its sections in order, your CMS collections beside it and whether it is in the menu. - Wireframes of every page Each page drawn full height in grey boxes, at desktop, tablet and phone width, before any code is written. - One header and footer The menu, the header layout and the footer are planned once and shared by every page. - Colours and type A palette with a role for each colour, fonts for headings and body text, and Apply to theme to set them as tokens. - Icons and motion One of 9 free icon sets for the whole site, and how much it moves, from none to expressive. Sitemap ## From the AI sitemap to a wireframe of every page Switch the board between Sitemap and Wireframe. Both show the same plan, so a change in one shows in the other. - Add pages blank, from one of 23 page templates or from a page you saved - Drag sections between pages, change a section's layout from its drawing, or ask your AI to change one page - Wireframe the pages you pick, or all of them, and see each one at desktop, tablet and phone width - Each card shows Planned, Wireframed or Built, read from your code, and a dot when it changed after its last build Always in sync Every plan ## A plan that follows your site Your site is the truth for what exists, and the plan keeps your intent. Edit a page, a section or the theme in Design and the plan follows at once; changes from your AI, the Code tab or a GitHub pull reach it as soon as they land. - The sync bar says when the plan is in sync, or how many changes came from your site, with Review and Update plan - Pages on your site that aren't planned yet show as On site only, and join the plan as they are - A page or section with your notes that left the site is marked Removed from site, and waits for you to keep or remove it - Each sync is an unsaved change, and undoing an edit in Design takes the plan back with it - Build changed sends your AI only the pages whose plan changed since they were built Folders and collections ## The sitemap mirrors your folders and collections Pages sit in the sitemap the way they sit in your site's folders, and your CMS collections show beside them with their collection pages. - Drag a page onto a folder to move it. A planned page moves in the plan; a built page makes the same move as the Pages panel, with its links updated and a redirect, after you review it - A folder with a page of its own shows it as the folder page - Plan a collection, such as blog posts or team members, then Create on site adds it to your [Xodia CMS](https://xodia.ai/product/cms) content with its collection page, on Free, Starter, Pro and Agency - Once a collection is on the site, rename it or change its fields in the Content tab and the plan follows From your site Every plan ## Create the plan from your site Open the Plan tab on a site without a plan and choose Create the plan from your site. Xodia lists your pages, their sections, the menu and the brand from the code, for free and with no AI. - Projects from a starter, GitHub imports, Import a website and Convert to React get their plan when they are created - Pages already on the site show as Built, so building sends your AI only what is new - Step by step: [Plan a website you already have](https://xodia.ai/guides/plan-existing-website) Section library ## 40 section types, 138 layouts Add section opens the library: heroes, stories, offers, proof, people, media, help, content and closing sections, each with layouts drawn so you can pick one at a glance. - Search by name, layout or use, or browse by category - Every layout comes with a note on its structure, which your AI follows when it builds - Shuffle a section to try its next layout in place Navigation and footer ## A menu and footer shared by every page Plan the menu's links and their order, the header layout and how it opens on a phone, and the footer's columns and legal links. - Each page's menu label is used in the footer too, and Home is linked from the logo - Pages left out of the menu say Not in menu on their card - Wireframe or build the header and footer on their own, without touching the pages Style ## The brand, its colours, fonts and motion The Style view holds what the site looks and sounds like, beside a preview of its home page. - Brand name, pitch and tone of voice, which your AI writes the copy from - Colours with roles (background, surface, text, muted, primary, border) and Apply to theme - Heading and body fonts, with samples in the font - Motion from None to Expressive with a feel (soft, crisp, springy or cinematic); visitors who ask for reduced motion always get it - Words to use and avoid, which the copy check holds your AI to Build ## Build every page with your AI Build all pages sends one request per page to the AI you connected. Each page moves to Built as your AI finishes it, and the changes stay in Xodia for you to review before you push. - Skip pages already built, rebuild only the ones that changed, or rebuild them all - Build options in one line: the motion, the copy (placeholder, a draft in your voice, or your own words), the visuals and the icon set - Your AI links the pages to each other and runs the design, copy and link checks on its work Runs on Claude Code, Cursor or any MCP app. See [your AI in Xodia](https://xodia.ai/product/ai) and [the checks it runs](https://xodia.ai/product/checks). Matching art ## Placeholder images replaced with matching SVG Select a placeholder image in Design and choose Replace with matching SVG. Your AI draws on-brand art for that spot, in your theme colours and icon set. - Or set matching SVGs in the build options, and every placeholder gets art as the pages are built - Avatars for real people stay placeholders until the quote has a real name - The art is plain SVG in your code, so you can edit it like any other file Start with a plan ## Tick Plan the site with AI next When you create a project from a starter, tick Plan the site with AI next and Xodia opens the Plan tab once the project is ready. You can also open the Plan tab on any site you already have. See [every way to start a site](https://xodia.ai/start). Questions ## Questions about planning **Which AI plans my site?** The AI you connect: Claude Code, the Claude app, Cursor, Codex or any MCP app, on your own plan with it. Xodia gives it the tools and skills to plan and build. **Which plans include the Plan tab?** Every plan has the Plan tab kept in sync with your site, and Create the plan from your site, with no AI needed. Drafting a plan from a brief, wireframing and building pages with your AI come with Free, Starter, Pro and Agency. See [pricing](https://xodia.ai/pricing). **Can I plan a site I already have?** Yes. Open the Plan tab and choose Create the plan from your site: Xodia lists your pages, sections, menu and brand from the code, for free. Imported sites get their plan when they are created. Then add the pages you want next and build only those. See [Plan your site](https://docs.xodia.ai/plan). **Does the plan write the code?** The plan is a file in your site that your AI reads. When you build, your AI writes the pages in your site's own framework and styling, and every change stays in Xodia until you push it. **Can I change the plan after building?** Yes, and you can change the site too. Edits in Design, the Pages panel, the Code tab or by your AI flow back into the plan, while your notes stay. When you change a built page's plan instead, its card shows it, and Build changed rebuilds only those pages. **Which frameworks can I plan for?** Any site Xodia opens. Your AI builds in the site's own stack: React with Vite, or plain HTML. See [frameworks](https://xodia.ai/frameworks). Keep exploring ## Related pages - [Checks Design, copy and link checks your AI runs on its work](https://xodia.ai/product/checks) - [Bring your AI Claude, Cursor and any MCP app, with Xodia's tools and skills](https://xodia.ai/product/ai) - [Start a site Plan with AI, a starter, GitHub or a website](https://xodia.ai/start) - [Build a React Router website with AI Plan and build a multi-page React Router site](https://xodia.ai/guides/build-react-router-website-ai) - [Build a new site From a brief to a live site with your AI](https://xodia.ai/solutions/new-site) - [Product overview Every feature in the order you use it](https://xodia.ai/product) - [AI website builder What it is, the three kinds, and how to set one up](https://xodia.ai/ai-website-builder) - [Pricing Plans, limits and what Free includes](https://xodia.ai/pricing) ## Plan your next site with your AI. [Start free](https://app.xodia.ai/auth/sign-up?ref=product-plan-cta) [See pricing](https://xodia.ai/pricing)