Getting Started
Install NoLeemits AI Design, set your site up so the AI has something to work from, and build your first page — with or without an AI connected.
Requirements
- WordPress 6.4 or newer (tested to 7.0)
- PHP 8.0 or newer
- Any theme, including block themes
- An AI assistant that speaks MCP — optional, only needed for the AI design part
Install
- Plugins → Add New → Upload Plugin, choose the zip, install and activate.
- The plugin adds a Design Pages menu.
- Enter your licence key on the screen that opens after activation.
Your first page, without any AI
You do not need an AI account to use the editor.
- Design Pages → Add New.
- Add a section. Pick Content Mode if you want the friendly labelled form, or Advanced Mode to write
template_html,scoped_cssandsection_jsdirectly. - Save, then Preview. Previews render in a sandboxed iframe, so they match the real front end.
- Publish.
To show a draft to someone who has no WordPress login, ask a connected assistant for a preview link (get_preview_url). The link works for 24 hours without a login, so you can send it to a client or open it on your phone.
Your first page, with AI
- Open Design Pages → Settings → MCP Config. Sign in from the browser (nothing to copy), or generate an API token. Team members who aren't administrators get their own copy under Design Pages → MCP Connection, showing only their own connections.
- Connect your client. See MCP Setup.
- Ask for what you want: "Design a homepage for a dental practice: hero, services, team, testimonials, contact." The AI reads your design tokens and style guide first, then writes the sections straight into your database.
- Open the page in Content Mode and refine the words yourself. That part costs nothing.
Set the site up properly first
Ten minutes here saves the AI from guessing, and makes everything it builds consistent:
- Design Pages → Design Tokens: your colours, fonts, spacing and corner radius. Every page reads these.
- Design Pages → Business Info: phone, email, address, social links. Referenced anywhere as
{{business:phone}}and friends, and used for LocalBusiness JSON-LD. - Design Pages → Global Sections: your header and footer, defined once, injected on every page.
The Settings screens
Design Pages → Settings has ten tabs, in this order:
| Tab | What it controls |
|---|---|
| MCP Config | Connecting an AI assistant: browser sign-in or API token, setup steps for seven clients, every live connection and its access level |
| Integrations | Optional tool sets (Advanced Custom Fields, Gravity Forms, JetFormBuilder, Contact Form 7, Rank Math, Yoast SEO, WPCode), one switch each, and whether each is actually live |
| Builders | Other NoLeemits page builders on the site, which tool names overlap, and pages marked by both |
| General | Site-wide defaults, including Global Header & Footer on pages your theme or another builder renders |
| Post Types | Which post types can be Design Pages, and the default render mode for each |
| Templates | Template assignments for posts, archives, search, 404 and the homepage |
| Access | Which user roles may create and edit Design Pages |
| Revisions | How many versions to keep, and for how long |
| Caching | Render cache behaviour |
| Advanced | White label, agency attribution, and everything else |
Where things live
- Design Pages: your pages
- Design Pages → Design Systems: ready-made sites and section layouts to import
- Design Pages → Section Library: reusable sections
- Design Pages → Global Sections: header and footer
- Design Pages → Post Templates: templates for posts, archives, search and 404
- Design Pages → Design Tokens: colours, fonts, spacing and radius for every page
- Design Pages → Business Info: the
{{business:*}}values - Design Pages → Libraries: JS and CSS libraries loaded on your pages (administrators only)
- Design Pages → Comments: all feedback threads on the site
- Design Pages → Settings: everything above
Convert a Design Page to a regular page
Use Convert to Page on a Design Page in the list. Sections, page CSS and JS, extra stylesheets, schema, header and footer settings, the featured image, SEO fields and the layout mode all come across, and the original Design Page goes to the trash. If "Pages" is not ticked under allowed post types, converting ticks it.
The result reports whether the page's design tokens, fonts and page CSS print; for a published page it checks the live page. If Vision Builder Control is also active, the result names the styles it adds to the page. Restore to Design Page reverses it.
Next
- MCP Setup — connect an AI assistant
- Content Fields & Sections — how a section actually works
- Theme Compatibility — full mode vs content mode