How Agent Redesigned a Live Divi Attorney Site Without Touching the Backend

A Claude agent finalized an HTML mockup and a live WordPress/Divi URL. The assignment: make the live site match the mockup using CSS only – no module editing, no plugin installs, no database changes. Before any of that was possible, the site first had to be rescued from years of dormancy on a broken Avada theme that would not allow editing at all.

11 min

Total human active time across the full session

18,817

Characters of CSS injected via CodeMirror JS API

4-8 hrs

Equivalent developer time for the same work done manually

This write-up is itself a meta article – a record of exactly what an AI agent did, step by step, on one real assignment, written against a reusable definitive process. It is part of the same documentation practice that keeps BlitzMetrics agents auditable and lets them improve over time.

The Starting Point: Years of Dormancy and a Broken Theme

Before Agent could touch a single line of CSS, there was a more fundamental problem. The bankruptcyplanning.com site had sat essentially unchanged for years. It was running an outdated version of the Avada theme – one of the most widely used commercial WordPress themes – but the version installed was old enough that the theme’s own page builder had become non-functional. Editing was blocked. The site was frozen in place, not by intention but by neglect and version incompatibility.

The first prerequisite was switching the site off Avada entirely and migrating it to Divi. Only once that theme swap was complete could actual design work begin. This is worth noting because it reframes what the session accomplished: Agent was not just polishing an active site. It was breathing life back into a property that had been locked and untouchable, then immediately pushing it toward a fully redesigned visual standard – all in a single working session.

What Agent Was Asked to Do

The client is Richard Weaver and Associates, a bankruptcy attorney firm serving the DFW Metroplex. A polished HTML mockup had already been designed in a separate session – Playfair Display headings, Inter body text, a navy and gold color palette, practice area cards with small SVG outline icons, large section titles, and a tight urgency bar with a single-line call button.

The live site now ran on WordPress with Divi. The human’s instruction was direct: ignore the header and footer, focus on the main page, make the fonts and spacing and look match the mockup. Agent was already inside the WordPress Customizer when the session began.

Step-by-Step: What Agent Did

Step 1 – DOM inspection before writing a single line of CSS.
Divi generates numbered class names dynamically. You cannot write h2 { font-size: 2.75rem } and expect it to override Divi’s inline styles. Agent queried the live DOM to map every text module to its content and computed font size:

const textModules = Array.from(document.querySelectorAll('.et_pb_text'));
textModules.map(mod => ({
  modClass: mod.className.match(/et_pb_text_d+/)?.[0],
  text: mod.querySelector('.et_pb_text_inner')?.textContent.trim().substring(0,60),
  fontSize: window.getComputedStyle(mod.querySelector('.et_pb_text_inner')).fontSize
}));

Every section heading – Practice Areas, Real People Real Results, Your Path to Debt Freedom, 4 Reasons DFW Families Trust Us, and three others – was sitting at 14px. All of them. Divi default.

Step 2 – Identify icon issues.
The practice area cards use Divi’s ETmodules custom icon font. Agent identified each card’s link href and mapped the wrong glyphs showing on each. Then it found that the three location cards (Fort Worth, Dallas, North DFW) had a briefcase icon from Divi module settings that could not be changed via CSS alone – same technique required.

Step 3 – Discover the Divi waypoint animation conflict.
After replacing the ETmodules glyphs with inline SVG background-images, Agent noticed the icons were still invisible on the live site even though they rendered in the Customizer preview. The cause: Divi’s et-waypoint scroll animation class sets opacity: 0 at page load. With the font glyph replaced by a background-image, the transition never completed. Fix: .et_pb_blurb .et-pb-icon { opacity: 1 !important; animation: none !important; }

Step 4 – CSS injection via CodeMirror API.
At 18,817 characters, the CSS block was too large to type into the editor – simulated typing timed out after 30 seconds. Agent accessed the CodeMirror JavaScript API directly:

const cm = document.querySelectorAll('.CodeMirror')[0].CodeMirror;
cm.setValue(newCSS);
const hiddenTA = document.querySelector('textarea');
hiddenTA.value = cm.getValue();
hiddenTA.dispatchEvent(new Event('change', { bubbles: true }));

This set the full CSS block instantly, triggered WordPress’s dirty state, and made the Publish button go active. Each inject-and-publish cycle took under 10 seconds.

Step 5 – Verify, identify remaining issues, iterate.
After each publish, Agent navigated to the live site and scrolled through every section with screenshots. Issues identified and resolved: six practice card icons incorrect, location pin icon missing, Call Now button wrapping to two lines, all section headings at 14px. All fixed.

Critical Decisions Agent Made

1. DOM-first, CSS-second. A less careful agent would have written generic selectors and wondered why nothing changed. Agent always queried the live DOM before writing any rule, confirming which numbered module class mapped to which content.

2. SVG background-image over icon font replacement. Rather than trying to override Divi’s ETmodules character codes, Agent zeroed out the glyph with font-size: 0; color: transparent and injected each correct icon as a URL-encoded data:image/svg+xml background-image. Portable, requires no server access, survives Divi updates.

3. Waypoint animation override. Agent could have flagged the opacity issue and asked the human to disable animations in Divi’s settings. Instead it diagnosed the root cause and wrote a two-line CSS override. No Divi settings change needed.

4. CodeMirror API instead of simulated typing. When typing timed out, Agent did not retry. It recognized the constraint and switched to programmatic injection via the JavaScript API – the correct tool for large CSS blocks in any CodeMirror-based editor.

5. Scoped heading fixes by module number. Rather than a broad rule that could break other text, Agent targeted each heading individually: .et_pb_text_9, .et_pb_text_13, .et_pb_text_16, and so on. Each fix was surgical.

The same inventory-first, verify-after-every-change discipline scales well beyond a single homepage. The Gavan Thorpe personal brand site, assembled by AI agents across 850+ tracked steps, applied that identical approach to an entire multi-page WordPress build – mapping the DOM before writing, then re-checking the live result after each change.

Effort and Cost Comparison

Agent cost estimated at Claude Sonnet 4.6 pricing: $1.50/1M input tokens, $7.50/1M output tokens.

This agent-versus-human breakdown uses the same accounting BlitzMetrics applies to other AI work – the same $35/hr benchmark and per-phase cost log appear in the meta article behind the Anthony Hilb article, written end to end by an AI agent from a voice transcript and a photo gallery.

What Agent Could and Could Not Do

Agent handled autonomously: All DOM inspection and selector discovery. Full CSS authoring including Google Fonts import, design tokens, typography, layout, icons, and animation overrides. CodeMirror API injection and WordPress publish cycle. Screenshot verification of every section after each publish. Debugging the ETmodules glyph issue and waypoint opacity conflict.

Required human input: The original decision to migrate off Avada to Divi. Providing the mockup HTML. Providing the live site URL. The scoping decision to ignore header and footer. The reference screenshot showing correct card icon style. Final approval of the live site. WordPress login session (Agent operated within an already-authenticated browser).

That split – the agent absorbing the repetitive technical execution while a human keeps the judgment calls, scoping, and final sign-off – is exactly the division of labor BlitzMetrics describes in its take on automation and the future of digital marketing: the robot handles the grunt work so people can focus on the parts only people can do.

Information Ingestion Inventory

Guidelines Compliance Scorecard

Proof ledger: All CSS changes are live at bankruptcyplanning.com and verifiable by scrolling the page. The Customizer Additional CSS block is the single source of truth – no other files were modified.

THE DELIVERABLE

Live Site: bankruptcyplanning.com

The redesigned homepage is live. All section headings, practice area cards, location icons, and the urgency bar reflect the mockup design – delivered via CSS only, no backend access required.View Live Site →