Building Pages | Divi Love

← Connecting Claude · Home · Next: Free vs Pro →

Once Claude is connected, you build pages by describing what you want. 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 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 the page. 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 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 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.”

📷 Screenshot needed: A claude.ai chat where the user asks for a page and Claude responds with the built page + live URL (end-to-end example).

📷 Screenshot needed: The resulting Divi page rendered live in the browser (the on-brand output).

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.

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.

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.