A Divi 5 AI Workflow · For web designers

Build With Claude

A Divi 5 AI Workflow

This is how I use Claude and a set of skill files to build complete Divi 5 websites. Faster, more consistent — and you stay in creative control the whole time.

Get the guide & skill files → See how it works

The idea behind this

Claude builds the house.
You decorate it.

A builder puts up the structure — the walls, the wiring, the foundations. But the builder doesn't choose the wallpaper. They don't know what your client needs to feel when they walk through the front door.

That's the interior designer's job. And no AI can do it for you.

This workflow gives Claude the technical knowledge to build valid Divi 5 JSON — quickly, consistently, without the silent import failures. You bring the design decisions, the brand direction, your knowledge of the client. That part stays yours.

Claude handles

The structure

  • Valid Divi 5 JSON generation
  • Consistent design variable references
  • Structural validation before import
  • The same spacing decision, every page
  • Debugging what silently broke

You bring

The design

  • The colour palette and brand feeling
  • The typography and font pairing
  • What each page needs to communicate
  • Copy that feels written for one person
  • Your images, graphics, icons — the soul

What's in the bundle

Everything you need to start building

A PDF guide, a set of skill files for your Claude Project, and a working design system example. I tested everything on a real six-page website build.

📖

The PDF guide

6 chapters covering the full workflow — from setting up your Claude Project to generating validated page JSON. Everything in it comes from building a real website system, not theory.

🧠

7 skill files

Structured knowledge documents you upload to Claude Projects. They teach Claude the confirmed Divi 5 JSON schemas — module types, nesting rules, styling properties, layout patterns.

🎨

Design system JSON

A complete example design system you can import into a fresh Divi install — plus a visual HTML reference so you can see how all the variables and presets fit together.

💬

Starter prompt sheet

The exact prompts for every stage of the workflow — setup, design system, page review, copy direction, JSON generation, and debugging after import.

⚙️

The six-stage workflow

Design system first, HTML review before JSON, copy approval before building, and finally adding your own images, graphics and copy — the discipline that makes every page feel intentional.

🔁

Works for any niche

The workflow isn't built for one type of website. You know your clients, your niche, your palette. This system works with whatever you bring to it.

The workflow

How it works in practice

Six stages, every page, every project. The discipline is what keeps the system consistent — and the last step is entirely yours.

1

Build your design system first

Before any pages, define your variables — colours, type scale, spacing. Bring your moodboard and font references to Claude. It organises your decisions into a variable system and generates the design system JSON file. Import it into Divi once. Every page draws from it automatically.

2

HTML review before any JSON

For each page, Claude produces a self-contained HTML preview — your colours, your fonts, real placeholder copy. You see the full page before a single line of Divi JSON is written. Design decisions happen here, not mid-import.

3

Refine copy and layout

Work through the HTML section by section. Get the headlines, body text, and CTAs right at this stage. Changing copy after JSON generation means rebuilding — this stage exists so you never have to.

4

Approve, then generate

When the page looks and reads right, you give the go-ahead. Claude generates the Divi 5 JSON using the skill file schemas and your design variables, runs structural validation checks, and writes the output file.

5

Import and publish

Import via Divi Library → Import & Export. Because the design system was imported first and the JSON was validated before export, it almost always works correctly first time.

6

Make it yours

Add your real images, photography, custom icons, patterns, and graphics. Replace placeholder copy with your client's actual words. Fine-tune spacing, colours, and anything that needs adjusting until the page feels exactly right — like it was made for one specific person.

This step is entirely yours. No AI can do it for you.

Where this came from

How this workflow was actually built

Hi, I'm Agi. I've been building websites with Divi for 6 years, and started working with Divi 5 this year. It's still early days for the new builder — but I'm excited about what it makes possible, and this workflow is a big part of why.

When I first tried using Claude for Divi work, the output looked plausible — but it broke on import, every time. So I started digging into how Divi 5 JSON actually works, and figured out a process to make Claude generate valid files that import correctly.

Then came the key insight: don't jump straight to pages. Build the design system first — fonts, colours, spacing, presets — import it once, and let every page draw from the same source of truth. I also started feeding Claude real finished Divi 5 page exports alongside the skill files — giving it working examples, not just theory. The output got noticeably better.

"The result was a six-page website template system — a complete design system, six page templates, a Python build pipeline, and validated JSON throughout."

This guide documents that workflow so other Divi designers can use it — whatever niche you work in. It's a new workflow and I'm still learning as I go. If you find something that makes it better, I'd love to hear it.

Early feedback

"The documentation is really easy to follow, and I like how the system includes automation but still encourages you to be creative. I'd been worried about AI ripping the creative side out of web design — this has a really good balance."

— a Divi designer, one of the first buyers

PDF + Skill Files Bundle

Ready to let
Claude build?

Get the complete guide, ready-to-use prompts, skill files, and a design system example—everything tested on a real project. Adapt it to any niche, industry, or client type.

Get Build With Claude →

Requires a Claude.ai account (free plan works) · Divi 5 knowledge assumed