Case study

LeBlanc Figma-to-Elementor Loop

The LeBlanc project is a long-running design-to-WordPress automation that pulls section-level Figma designs, generates Elementor-ready blocks, captures iteration screenshots, and pushes side-by-side comparisons into Annotool for human review. The loop is driven by structured plans and runs across multiple worktrees.

RoleArchitecture, agent loop orchestration, design tooling
TimelineOngoing
FocusDesign Automation + Agent Loop
Figma extractionElementor block generationIteration screenshottingReview handoff to Annotool
Figma -> ElementorPipeline
Annotool side-by-sideReview handoff

The brief

Challenge

Convert evolving Figma designs into clean Elementor sections at a rate that a small operation can actually review and approve.

Approach

What we made

Treated the conversion as a structured agent loop with explicit plans, isolated worktrees, automatic screenshots, and a human review step routed through the Annotool app.

  • Section-level Figma references drive Elementor block generation rather than full-page guesses.
  • Each loop iteration is screenshotted and pushed into Annotool for structured human review.
  • Multi-worktree workflow keeps experiments isolated from the main design loop state.

Outcome

Results

A repeatable pipeline that turns Figma section updates into reviewed Elementor sections with auditable iteration history.

PythonFigma APIWordPressElementorPlaywright

Gallery

Visual snapshots

Click any image to expand.

Next project

PayItForward Redux

Web + mobile pay-it-forward platform built as a Firebase-backed PWA with a separate mobile app, shared logic, and storage rules.

View next project