Ask most AI tools for a Divi layout and you get HTML in a Code module, or markup the Visual Builder can’t open. It looks fine on the front end, but there’s nothing on the page you can edit.

Divi 5 skills for Novamira let Claude Code build pages from Divi’s own modules, as drafts you open and edit in the Visual Builder like any other page.

What it does

Novamira is a WordPress plugin that connects Claude Code to a site. Its free version has no Divi tools. The skills supply that knowledge, so everything here works with free Novamira.

You ask in plain English (“add an FAQ to the volunteering page”) and Claude builds a draft. It uses the site’s global colours, variables and presets where they exist, and checks the layout at desktop and phone width.

It works well with custom post types and the Loop Builder. Claude can register the fields, set up loops with ACF data, filters and pagination, and build the Theme Builder templates that display them.

It can also build a page from a brief or pasted copy, and flags gaps and contradictions instead of inventing facts to fill them. For a redesign, it builds a design showcase page first and waits for your approval.

Setup installs a set of site instructions that Claude follows every session. Claude builds new pages as drafts and publishes only when you ask. It never deletes or unpublishes a page, and it creates presets, global colours and variables only after you agree. It never uses Code modules or injected CSS or JavaScript for layout.

How it works

Divi 5 stores content as WordPress block markup. Claude builds each page as PHP arrays and turns them into markup with WordPress’s own serialize_blocks(), which gives exactly what the Visual Builder saves. Reading a page and writing it back loses nothing, so edits and copies are safe.

Every rule in the eight skills was written to a test site, rendered, read back and checked in a browser where layout or JavaScript matters. Fresh Claude agents given only the skills then built pages, layouts and loops from short requests. The results are in docs/09-test-results.md, with the Divi and Novamira versions for each test.

Every change Claude makes is logged on your computer, with how to undo it.

What you need

• Divi 5.7.0 or later (tested on 5.15.1 and 5.16.0)
• Novamira, free version (tested on 1.12.9 to 1.12.12)
• Claude Code
• A development or staging copy of the site, never the live one, because Novamira gives Claude full administrator, PHP, database and file access

Divi’s loop filters take fixed dates, so for “events from today onwards” use Date Conditions for Divi, which the skills already know how to use.

Set it up

1. Install Divi and Novamira on your staging site.
2. In wp-admin, go to Novamira → Configuration, choose Claude Code, create an application password and copy the prompt.
3. Clone the repo, start Claude Code in it, paste the prompt and restart when it asks.
4. Ask Claude: “Set up this site for Divi 5.”

The skills are free and MIT-licensed. They’re an independent project, not made or supported by Novamira or Elegant Themes. Found a bug or have an idea? Open an issue on GitHub.