← Connecting Claude · Home · Next: Free vs Pro →
Once your AI is connected, you build by describing what you want — a single section, a full page, or an entire website. Your AI reads your design system, plans the layout, builds it in Divi 5 markup, and publishes it to your site — then gives you the live URL.
The workflow is the same at every scale; you just describe more. Ask for one pricing section, a complete landing page, or a whole multi-page site with a shared header and footer — your AI plans it, builds it page by page, and keeps the style consistent throughout.
The recommended flow #
- Let your AI read your design system first. Either it does this automatically (the connector tells it to), or you can prompt: “Read my Divi design system and tell me what colors and variables I have.”
- Confirm the site. Your AI states which site it’s connected to (helpful if you have several). Make sure it’s the right one before publishing.
- Describe what to build — a section, a page, or a whole site. Be as specific or as loose as you like.
- Review the live URL your AI returns, open it, and ask for tweaks.
Example prompts #
Build a single section:
“Add a pricing section to my homepage: three plan cards side by side with a Most popular badge on the middle one, using my brand colors and spacing.”
Build a full page:
“Build a Services page: a hero with a heading and subheading, a 3-column row of service cards (icon, title, short description), a testimonial section, and a call-to-action band at the bottom. Use my brand colors and spacing.”
Build a whole website:
“Build me a 5-page website for my coaching business — Home, About, Services, Pricing, and Contact — with a shared header and footer. Keep the style consistent across every page and use my brand colors.”
Build a draft instead of publishing:
“Create that as a draft so I can review it in the builder before it goes live.”
Use a specific token:
“Make the CTA background my primary gradient and the heading my dark brand color.”
Iterate:
“On the page you just built, make the hero taller and center the buttons.”
How your AI stays on-brand #
When connected, your AI calls divi_get_design_system, which returns the exact token strings for your:
- Global colors (e.g. your primary/secondary brand colors)
- Size & spacing variables (your spacing and type scale)
- Gradients
- Module presets
Your AI then uses those tokens in the page instead of hardcoded values, so the page matches your brand. A color that matches one of your variables is linked to that variable automatically, and you can refer to a variable by its name (“use my Primary color”).
This includes Divi’s five core brand colors — Primary, Secondary, Heading, Body and Link. Your AI can now read those (not just your custom colors) and, on Pro, set a brand palette that overwrites them in place rather than adding duplicate “brand” colors to your picker.
If you bring a palette that’s close but not identical to your variables (for example a design imported from Figma), Divi Connect stops and asks whether to snap those colors to your existing variables, update your variables site-wide, or add them as new ones — so imported designs still reference your design system instead of a pile of one-off values.
- On Free, color and gradient variables stay linked to your design system. Size variables are baked to fixed values in the page.
- On Professional, size variables stay linked too — change a token later and every page using it reflows. See Free vs Pro.
Ready-made section patterns #
You don’t have to describe every section from scratch. Divi Connect ships a library of about 200 ready-made section patterns — professionally-designed, responsive building blocks for the parts of a page you reach for most: hero, feature grid, pricing tables, testimonials, stats, FAQ, team, logo strip, timeline, gallery, comparison table, tabs, slider, blog list, portfolio, contact form, before/after and more.
Just name the section you want — “add a pricing section with three tiers”, “put a testimonials row under the hero” — and your AI assembles it from the matching pattern. Because each pattern is built from real, native Divi modules (not code blocks), everything stays fully editable in the Visual Builder. This keeps layout, spacing and structure consistent and polished by default; you just supply the content and colors.
Building a long page in stages. For a large multi-section page, your AI can add a few sections at a time rather than building it all in one request — so big landing pages come together reliably, step by step. Each stage is additive and undoable, so nothing is lost if you change direction partway through.
Whole layouts, and Figma. Library → Layouts in the Divi Connect dashboard has ready-made sections you can pick from and stack into a new draft without your AI. On Pro, Integrations can also turn a Figma design into a Divi page.
The Design System #
Design in the Divi Connect dashboard puts a coordinated design system on your site — colours, fonts and spacing, and (on Pro) a size scale your pages follow plus a full set of presets — that all work together. You pick a few colours, fonts and a style; Divi Connect makes every shade and size from them, and your presets and pages use those. Change a pick and the rest follows.
Design has five tabs:
| Tab | What it’s for |
|---|---|
| Overview | How your design fits together: your choices, the shades and sizes made from them, your presets, and how many of your pages use them. |
| Your choices | Your colours, fonts and style. Start from one of five looks, from your own colours, or from the design of a page you like. |
| Colours & sizes | Every colour and size on the site and where each one is used. Remove the ones you don’t want: each is replaced by the one you pick, and everything that used it moves to the replacement. |
| Health | Anything to fix, such as text that is hard to read or colours you didn’t pick. |
| History | Every design change, with a copy saved first so you can undo it. Also downloads your design as a file or as design.md. |
- The first install starts from a choice — one of five looks, your own colours, or a page you like — and you choose which colours, sizes, fonts and presets go on. Free installs colours and fonts; the size scale and presets are Pro.
- Re-theme without rebuilding. Because your pages are built on your design system, changing it changes the whole site’s look — colours, fonts, spacing — without touching your pages.
- Undo any design change. Before every change, Divi Connect saves a copy of your whole design system — colours, fonts, sizes and presets. Design → History takes you back, and undoing saves your current state first, so it’s always safe to try.
- Generate a Style Guide page — on Design → Overview: a real, editable Divi page showing your colours and fonts, and your sizes if your site has a size scale; edit a value at its source and the change flows everywhere.
- Preset pages by module (Pro) — on Library → Presets → Health: one page per kind of module, showing every preset on a real module.
You can drive it from chat too: “install the Divi Love design system”, “switch my site to a warmer look,” or “undo that design change.”
Matching a reference #
To make a page match something, hand your AI the closest reference you can:
- A page on your own site — your AI reads its exact structure and reproduces it (or duplicates it and edits the copy).
- A live web page — “build me a page laid out like https://…”. Your AI reads that page’s real structure (sections, headings, images, calls-to-action) and rebuilds it in your own design system — it copies the layout and content, not the other site’s colours, so the result comes out on-brand.
- A screenshot / mockup — attach it and your AI lays the page out from it.
It works best if you let your AI restate the structure it found and confirm it before building.
Safety controls (optional) #
Under Divi Connect → Help & settings → Settings there are controls for how careful your AI should be. Turn on the ones that suit how you work (the Pro ones are handy on live and client sites).
When your AI builds a page
- AI always plans first — before a new page, your AI asks a few planning questions and shows a short plan to approve.
- Confirm before overwriting a page — your AI stops and asks before replacing the whole content of an existing page (small in-place edits aren’t affected).
- Name the layers on pages the AI builds (Pro) — sections, rows and modules get descriptive names in the Visual Builder’s layers view (e.g. “Hero Section”, “Pricing Row”) instead of “Section” and “Row”, so a long page is easy to navigate and edit by hand.
Safety — what can your AI change on your live site? Choose one:
- Anything (default) — your AI creates, publishes, changes and deletes pages when you ask it to.
- New pages start as drafts — every new page, post or project is saved as a draft, never published straight away. Your AI can still publish it when you ask, and change pages that are already live.
- Only drafts (Pro) — your AI can read the site and work on drafts, but cannot publish, delete pages or change site-wide design. To change a live page, it duplicates it to a draft and edits the copy.
And on its own switch:
- Approve site-wide changes here, not in the chat (Pro) — site-wide changes wait until an administrator presses Approve on Home; a “yes” in the chat is not enough.
Your design
- Protect global design & Theme Builder (Pro) — your AI asks before changing anything site-wide: global colours, variables, presets or the Theme Builder.
- Stick strictly to my design tokens (Pro) — when a colour or size is close to one of yours but not the same, your AI asks first.
- Keep to my colour palette (Pro) — colours in pages your AI builds or imports are matched to your saved colours when they are close.
Font sizes in a design you hand over — when you give your AI a design to rebuild (a Figma export, a PDF, a screenshot), choose what happens to the font sizes it reads off it: ask me each time (default), keep the sizes exactly as given, round them to the nearest size on my scale, or let my preset library decide.
Deleting pages — safely #
Divi Connect won’t let your AI delete a page without your explicit say-so:
- You ask your AI to delete a page.
- Your AI asks you to confirm first and shows the page title — it does not delete yet.
- After you confirm, the page is moved to Trash (recoverable from WordPress → Pages → Trash).
- Only if you explicitly ask to permanently delete will it skip the Trash (irreversible).
This is built into the connector, so even a misunderstanding won’t wipe a page without a confirmation step.
Tips for good results #
- Name the sections you want. “Hero, features, pricing, FAQ, CTA” gives your AI a clear structure.
- Mention which tokens. “Use my primary color / my large heading size” keeps it on-brand.
- Start as a draft for big pages, then publish once you’ve reviewed it in the Divi builder.
- Ask your AI what’s available. “List my presets” or “what colors do I have?” before building.
- One site at a time. If you have several sites connected, confirm the target site name before publishing.
What about headers, footers, and shop pages? #
Those are Professional features:
- Theme Builder templates (headers, footers, post/archive templates)
- Global layouts
- WooCommerce cart & checkout pages
- Editing your design system — creating/updating colors, variables and presets, setting your five core brand colors, and deleting or clearing colors, variables or presets you no longer want (just ask, e.g. “remove the colors we added by mistake”)
You can also edit existing content in place — ask your AI to change one module (“make the hero heading bigger”, “add a button under the intro”) on a page, post, or Divi Portfolio project, instead of rebuilding the whole thing.
See Free vs Professional for the full breakdown.
← Connecting Claude · Home · Next: Free vs Pro →
