I taught my AI to build Divi 5 pages the way I like them — and I’m giving it away for free

I’ve been a Divi fan for a long time. Like, a long time. It’s the theme I keep coming back to, the one I know in my bones, the one I reach for when a client needs a site that looks good and stays editable long after I’ve handed it over. So when Divi 5 started taking shape, I got genuinely excited. Under the hood it’s a big leap — pages are now built on WordPress’s own block markup instead of the old shortcodes, which makes them faster and cleaner.

And that got me thinking.

The itch

I build a lot of pages. And over the years I’ve developed strong opinions about how a Divi page should be put together — not just how it looks, but how it’s constructed so it stays maintainable:

  • Native modules, always. If Divi has a module for it, use the module — don’t drop in a lump of custom code that nobody can edit later in the Visual Builder.
  • No inline CSS. Styling belongs in the module’s own settings, not sprinkled through the markup.
  • Global colours and fonts, referenced by name. Change a brand colour in one place and the whole site follows. That’s the whole point of a design system.
  • The right layout tool for the job — flexible columns for content, CSS Grid for card layouts.

Building pages that follow all of those rules, every time, by hand, is a bit of a grind. It’s the kind of disciplined, repetitive work that’s easy to get slightly wrong when you’re tired or in a hurry.

So I taught my AI assistant to do it my way

I’ve been using Claude (Anthropic’s AI) as a coding partner for a while now. And it occurred to me that instead of describing my “house rules” over and over, I could just… teach it once. Properly.

So I built what’s called a skill — a little package of instructions and tools that teaches Claude exactly how I like Divi 5 pages built. Now I describe a page in a compact, readable spec (roughly: “a hero section with this heading and image, then a three-card feature row, then a call-to-action”), and it produces a real Divi 5 page — native modules, global colours, no inline CSS, the works — straight onto the site over WordPress’s own API.

And here’s the part I care about most: because it uses native modules, everything it builds is still fully editable in the Divi Visual Builder afterwards. It’s not a black box, and it’s not locking anything down. It just does the careful, rule-following construction so I can spend my time on the design decisions that actually matter.

Here’s roughly what a page spec looks like — nothing scary:

{
  "sections": [
    {
      "background": { "color": "gcid-primary-color" },
      "rows": [{
        "columns": [{
          "modules": [
            { "type": "heading", "level": "h1", "text": "Build Divi 5 pages from a spec" },
            { "type": "text", "html": "<p>Native modules. Global colours. No inline CSS.</p>" },
            { "type": "button", "text": "Get started", "url": "#" }
          ]
        }]
      }]
    }
  ]
}

That compiles into proper Divi 5 block markup and lands on the site as a real, editable page.

Why I’m putting it on GitHub, for free

Honestly? Because it’s been so useful to me that it felt a bit selfish to keep it in a drawer. I’ve been using it across a bunch of Divi 5 projects and it just keeps saving me time and keeping my pages tidy.

So I’ve cleaned it up, written it up, and published it as free, open-source software (MIT licensed) on GitHub. If you build with Divi 5 and you’re comfortable with a little Node.js, you might find it handy too. And if you improve it — add support for a module I haven’t covered yet, fix something, make it better — pull requests are very welcome. That’s the beauty of open source: it gets better when people use it.

👉 Get it on GitHub

A few honest caveats

  • This is a community project — completely independent, not affiliated with or endorsed by Elegant Themes. I’m just a happy Divi user who built a tool for himself and decided to share it.
  • Divi 5 is still evolving quickly. The page format was worked out against real, live sites and verified — but it can change between releases. Always try it on a staging site first.
  • It’s a developer tool. You’ll need a WordPress site running Divi 5, a WordPress Application Password, and Node.js. The README walks through all of it.

That’s it

I made a thing that makes my own work with a theme I love a little easier, and I’m sharing it in case it helps someone else. If you give it a spin, I’d genuinely love to hear how it goes — and if you build something great with it, even better.

Happy building. 🛠️

Get a Quote