← Connecting Claude · Home · Next: Free vs Pro →
Once Claude is connected, you build by describing what you want — a single section, a full page, or an entire website. Claude 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 — Claude plans it, builds it page by page, and keeps the style consistent throughout.
The recommended flow #
- Let Claude 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. Claude 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 Claude 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 Claude stays on-brand #
When connected, Claude 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
Claude 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. Claude 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 Claude 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, Claude 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.
The Design System (new in 1.8.0) #
The Design System tab in the Divi Connect dashboard lets you put a complete, coordinated design system on your site — colours, fonts, spacing, and (on Pro) a fluid type/size scale plus a full set of presets — that all work together. The tab is organised into three parts: Current System (everything installed, and what each colour is used for), Presets (browse every ready-made style), and Flavours (build or switch your whole look).
- Install a flavour. Pick a few brand inputs and the generator expands them into a full, accessible design system; preview it live and install in one click. Free installs colours, fonts and adopts your existing look; the fluid size scale and presets are Pro.
- Re-theme without rebuilding. Because your pages are built on these tokens, installing a different flavour changes the whole site’s look — colours, fonts, spacing — without touching your pages.
- One-click revert. Before every install, Divi Connect automatically snapshots your whole design system — colours, fonts, sizes and presets — so any site-wide change is a single click to undo, all the way back to how your site looked before you installed anything. Reverting snapshots your current state first, so it’s always safe to try.
- Generate a Style Guide page (Pro) — one click builds a real, editable Divi page showing every colour, font, size and preset; edit any preset at its source and the change flows everywhere.
You can drive it from chat too: “install the Divi Love design system”, “switch my site to a warmer look,” or “undo that design system change.”
Matching a reference (new in 1.8.0) #
To make a page match something, hand Claude the closest reference you can:
- A page on your own site — Claude 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://…”. Claude 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 Claude lays the page out from it.
It works best if you let Claude restate the structure it found and confirm it before building.
Safety controls (optional) #
Under Divi Connect → Settings there’s a set of on/off controls for how careful Claude should be. They’re all off by default — turn on the ones that suit how you work (the Pro ones are handy on live and client sites):
- AI always plans first — Claude asks a few planning questions and shows a short plan before building a new page.
- Always save new pages as drafts — new pages, posts and projects come in as drafts, not published live.
- Confirm before overwriting a page — Claude must ask before replacing the whole content of an existing page (small in-place edits aren’t affected).
- Protect global design & Theme Builder (Pro) — confirm before any site-wide change (global colors, variables, presets, Theme Builder templates).
- Read-only (draft-only) mode (Pro) — Claude can build drafts but can’t publish, delete, or change site-wide design.
- Stick strictly to my design tokens (Pro) — auto-snaps colors/sizes to your variables and flags any off-brand hardcoded color.
- Name the layers on pages the AI builds (Pro) — gives sections, rows and modules descriptive names in the Visual Builder’s layers view (e.g. “Hero Section”, “Pricing Row”, “Button: Get started”) instead of the generic “Section” / “Row”, so a long page is easy to navigate and edit by hand.
Deleting pages — safely #
Divi Connect won’t let Claude delete a page without your explicit say-so:
- You ask Claude to delete a page.
- Claude 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 Claude 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 Claude 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 Claude 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 →
