A Divi 5 AI Workflow · For web designers

Build With Claude

A Divi 5 AI Workflow

How to use Claude and a set of skill files to design and generate complete Divi 5 websites — faster, more consistently, and without giving up creative control.

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. With total technical precision. 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 — consistently, quickly, without the silent failures. You bring the design decisions, the brand direction, the creative judgment. You stay in control of everything that matters.

Claude handles

The structure

  • Valid Divi 5 JSON generation
  • Consistent design token 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
  • Whether the result is actually right

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 — all tested 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. Written from real experience building a complete website system.

🧠

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 working example design system you can import into Divi immediately, plus a blank starter template to fill with your own tokens and hand to Claude.

💬

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 five-stage workflow

Design system first, HTML review before JSON, copy approval before building — the discipline that keeps every page consistent even when you're on your fourth one at 11pm.

🔁

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

Five stages, every page, every project. The discipline is what keeps the system consistent.

1

Build your design system first

Before any pages, define your tokens — colours, type scale, spacing. Bring your moodboard and font references to Claude. It organises your decisions into a token 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 tokens, 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.

Where this came from

How this workflow was actually built

It started with skill files from Shashank Gupta at divilove.com — structured knowledge documents that teach Claude the confirmed Divi 5 JSON schemas. Before having them, Claude's Divi output looked plausible but broke on import. After uploading the skills, it generated valid JSON correctly.

The conceptual piece — understanding what a Divi 5 design system actually is, how global variables work, why you build the system before the pages — came from Ania Romańska at divilover.com. Her course on Divi 5 design systems is something worth taking alongside this guide.

Then came the key insight: don't jump straight to pages. Build the design system first, import it, and let every page draw from the same source of truth. Then I 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 they work in.

PDF + Skill Files Bundle

Ready to let Claude build
while you design?

Get the guide, the skill files, the design system starter, and the prompt sheet. Everything tested on a real project. Works for any niche, any client type.

Get Build With Claude →

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