From zero to AI-built Divi pages

Meet the Terminal

The Terminal is a text window where you type commands instead of clicking buttons. It looks intimidating, but for this guide you only ever do one thing: copy a command, paste it, press Return.

To open it: press ⌘ + Space, type Terminal, press Return. A window appears ending with a % sign — that's the "prompt", meaning it's waiting for you.

Install Homebrew

What it is: Homebrew is like an App Store for developer tools. Instead of hunting for downloads on websites, you type brew install something and it's done. Almost every guide you'll ever read assumes you have it.

Paste this into Terminal and press Return:

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

One extra step on newer Macs

At the very end, Homebrew prints a section called "Next steps". On Apple Silicon Macs (M1/M2/M3/M4) it asks you to run two commands so your Mac knows where to find brew. They look like this:

% echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
% eval "$(/opt/homebrew/bin/brew shellenv)"

If Homebrew's own "Next steps" text shows slightly different commands, use the ones it printed — they're tailored to your Mac.

Check it worked

% brew --version
Homebrew 4.x.x

A version number = success. command not found = close the Terminal window, open a new one, try again (fresh windows pick up the new setup).

Install Git

What it is: Git is the tool the whole software world uses to store, share, and track changes to code. Websites like GitHub host millions of Git "repositories" (project folders). For you it matters for one simple reason: it's how you'll download the Divi 5 skill in Step 4 — and how you'll update it later with a single command.

Your Mac probably already got a version of Git when Homebrew installed the Xcode tools, but installing it through Homebrew gives you the newest version and makes updates easy:

% brew install git

Check it worked

% git --version
git version 2.x.x

Install Claude Code

What it is: Claude Code is an AI assistant that lives in your Terminal. Unlike a chatbot in the browser, it can actually do things on your Mac: read and write files, run commands, and build entire projects — while asking your permission along the way. It's made by Anthropic, the company behind Claude.

Since you now have Homebrew, this is one command — same tool you just used for Git:

% brew install --cask claude-code

Check it worked, then log in

% claude --version
2.x.x

If you see command not found, close the Terminal and open a fresh window. Now start it for the first time:

% claude

Your browser opens and asks you to log in. Sign in with your Claude account — note that Claude Code needs a paid plan (Pro, Max, Team, or Enterprise); the free claude.ai tier doesn't include it. After logging in, you land back in the Terminal with a chat prompt. Type /exit or press Ctrl+C twice to leave anytime.

Install the Divi 5 Skill

What it is: Claude is smart, but it doesn't know the exact internal format Divi 5 uses for its layouts. The divi5-skill is a free, open-source "knowledge pack" — a folder of reference documents that teaches Claude how to write valid Divi 5 sections, rows, columns, modules, and styling. It's knowledge, not code: nothing runs, nothing installs into WordPress. Claude simply reads the files it needs for each task.

A "skill" in Claude Code is just a folder with a SKILL.md file at its root. Personal skills live in ~/.claude/skills/ (a hidden folder in your home directory). Create it and clone the skill into it — this is Git's moment to shine:

% mkdir -p ~/.claude/skills
% cd ~/.claude/skills
% git clone https://github.com/divilovewp/divi5-skill.git
Cloning into 'divi5-skill'...
done.

That's it. Line by line: mkdir -p creates the skills folder (if it doesn't exist yet), cd moves into it, and git clone downloads the whole project from GitHub.

Use it

Open Claude Code and just ask. Claude reads the skill's SKILL.md entry point first, then pulls in only the reference files your task needs (layout rules, styling, the specific modules you're using):

% claude
> Using the divi5-skill, build a Divi 5 landing page
  for a small olive oil brand: hero, three feature
  blurbs, testimonial, and a call-to-action.

The skill is designed to first ask you a few discovery questions (audience, style, goal of the page), then plan, then generate the layout. There are two ways to get the result onto your site: export the layout JSON and import it into Divi yourself, or — if you install the companion Divi Connect plugin on your WordPress site — let Claude publish pages live. The project wiki walks through both paths.

Update it later

Divi 5 evolves fast and the skill tracks it. Updating is one command:

% cd ~/.claude/skills/divi5-skill && git pull

Set up your first Divi 5 project

The idea: give every website its own folder. When you start Claude Code inside that folder, it sees your notes, your assets, and your previous layouts — the folder is the project's memory. Here we'll set one up for an imaginary olive oil shop.

1 · Create the folder structure

% mkdir -p ~/Projects/olive-site/layouts ~/Projects/olive-site/assets/images
% cd ~/Projects/olive-site

That gives you:

olive-site/
├── CLAUDE.md          ← project notes (you create this next)
├── layouts/           ← Divi JSON files Claude generates
└── assets/
    └── images/        ← originals of your photos & logos

2 · Write the CLAUDE.md

This file is read automatically every time Claude Code starts in this folder. Write it like a briefing for a new colleague — plain sentences, no special syntax needed. A good starting point:

# Olive Site — Divi 5 project

## What this is
Website for a small olive oil brand. Built with
WordPress + Divi 5. Live site: https://example.com

## How to work here
- Use the divi5-skill for all Divi layout work.
- Save layouts as JSON in layouts/, one file per page.
- Ask me discovery questions before designing a page.

## Design notes
- Colors: deep green #2F5233, warm gold #C9A227.
- Tone: warm, honest, family business. DE + EN text.

## Images
All image URLs in layouts must come from IMAGES.md.
Never use local file paths in JSON.

You can create it with any text editor — or simply tell Claude Code: "create a CLAUDE.md for this project with the following notes…"

3 · Images & favicon: the part that trips everyone up

Here's the crucial thing to understand: a Divi layout JSON doesn't contain images — it contains image URLs. When you import the JSON into your live site, Divi loads pictures from whatever web addresses are written inside it. A path like /Users/you/assets/images/hero.jpg only exists on your Mac, so on the live site it would show a broken image.

The workflow that always works:

1. Keep originals locally Put your photos and logos in assets/images/ — this is your archive, not what the site uses.
2. Upload to WordPress first On the live (or test) site, go to Media → Add New and upload the images. WordPress gives each one a permanent URL like https://example.com/wp-content/uploads/2026/07/hero.jpg.
3. Record the URLs Copy each URL into a simple list file, e.g. IMAGES.md in your project folder: one line per image with a short description ("hero photo of the grove: https://…").
4. Let Claude use the list Because your CLAUDE.md says "image URLs come from IMAGES.md", Claude writes those live URLs straight into the JSON — and the import just works, pictures and all.

A local WordPress test site with Docker

Why bother: importing untested layouts into a live client site is nerve-wracking. Docker lets you run a complete, disposable WordPress — database and all — on your own Mac, in about two minutes. Claude generates a layout, you import it at localhost:8080, look at it, iterate, and only push to the real site when it's right. Break it? Wipe it and start fresh in seconds.

What Docker is: think of it as shipping containers for software. A "container" is a sealed box with an application and everything it needs inside. One container runs WordPress, another runs its database — nothing gets installed into your Mac itself, and deleting them leaves no trace.

1 · Install Docker Desktop

% brew install --cask docker-desktop

Then start it once by hand so it can finish setting up (accept the terms; the free plan is fine for personal use):

% open -a Docker

Wait until the whale icon in your menu bar stops animating — that means the engine is running. Docker Desktop must be running whenever you use containers.

2 · Let Claude Code build the test site

This is where agentic coding gets fun: you don't need to learn Docker's configuration language, because Claude speaks it fluently. Start Claude Code in your project folder and ask:

% cd ~/Projects/olive-site && claude
> Create a docker-compose.yml in this project for a
  local WordPress test site: latest WordPress on port
  8080 plus a MariaDB database, with data stored in
  Docker volumes so it survives restarts. Then start
  it and tell me when I can open it in the browser.

Claude will write the file, show it to you, ask permission to run docker compose up -d, and report back. For reference (and so this guide works offline), here's the kind of file it will create:

services:
  wordpress:
    image: wordpress:latest
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wp
      WORDPRESS_DB_PASSWORD: wp_secret
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - wp_data:/var/www/html
    depends_on:
      - db

  db:
    image: mariadb:11
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp
      MYSQL_PASSWORD: wp_secret
      MYSQL_ROOT_PASSWORD: root_secret
    volumes:
      - db_data:/var/lib/mysql

volumes:
  wp_data:
  db_data:

3 · Finish WordPress & add Divi

Open http://localhost:8080 in your browser. You'll see the famous WordPress 5-minute install: pick a language, choose a site name and an admin login, done. Then one manual step Claude can't do for you: Divi is a paid theme, so download the theme ZIP from your own Elegant Themes account and upload it under Appearance → Themes → Add New → Upload Theme. Activate it and make sure Divi 5 is enabled.

4 · The test loop

1. Generate Ask Claude for a page using the divi5-skill; it saves the JSON into layouts/.
2. Import On the test site, create a page, open the Divi builder, and import the JSON via portability — or install the Divi Connect plugin on the test site and let Claude publish to localhost:8080 directly.
3. Look & iterate View the page in the browser. Tell Claude what to change ("more air in the hero, testimonial before the CTA") and re-import. Because it's local, this loop takes seconds, not minutes.
4. Promote Happy with it? Import the same JSON into the live site — swapping in the live image URLs from your IMAGES.md if the test site used different ones.

What is agentic coding?

A normal AI chatbot answers questions: you ask, it writes text, you copy-paste. An agent is different — it doesn't just tell you what to do, it does the work itself, in a loop, until the goal is reached. That's what makes Claude Code feel less like a search engine and more like a junior colleague sitting at your keyboard.

When you give Claude Code a task, roughly this happens:

1. Understand It reads your request and looks around: which files exist in this folder? Is there a skill or an instructions file that applies?
2. Plan It breaks the goal into steps — "read the Divi layout rules, draft the page structure, generate the JSON, validate it."
3. Act It executes a step: reading a file, writing one, or running a Terminal command. Anything that changes your system needs your approval first — you'll see exactly what it wants to do and can say yes or no.
4. Check It looks at the result. Did the command succeed? Does the output look right? Errors aren't failures — they're information.
5. Repeat Back to step 3 with the next step, or a fix for what went wrong, until the task is done. Then it summarizes what it did.

Two things make this safe for beginners. First, you stay in control: file edits and commands are shown to you for approval before they run. Second, everything is visible — you watch the agent think and act in plain text, so you learn how things work just by reading along.

What are all these .md files?

.md stands for Markdown — plain text files with a few simple symbols for formatting: # Heading, **bold**, - list item. You can open them in any text editor. No special software, nothing executable, just readable text.

Markdown matters in the AI world for a simple reason: it's the format both humans and AI read best. Instructions, knowledge, and project notes for agents are almost always written as .md files. In your new setup, you'll meet these:

The big idea: you can program an AI's behavior just by writing documents. The divi5-skill is nothing more than well-organized Markdown — and a CLAUDE.md you write yourself is you teaching your assistant how your projects work. No coding required.

Troubleshooting & cheat sheet

Commands worth remembering