Our developers ran a multi-page WordPress project where the AI agent handled the build, and the team reviewed and steered every decision along the way.
.png)
On a recent multi-page WordPress project, our developers set up a coding agent to handle the actual implementation, working from Figma designs and the Chisel starter theme. The deal was simple. The agent builds, the humans review and steer.
Turning a WordPress Codebase Into an AI Agent Playbook
On a recent WordPress project built on Chisel 2.0, our developer pointed a coding agent at the existing starter theme and asked it to analyze the codebase. The agent generated a building playbook. That became its instruction manual for the rest of the project, describing how to make architectural decisions within the project, which patterns to follow for different component types, and how the build pipeline worked.
From that point, each page section followed the same cycle: the agent proposed a plan, a developer reviewed it, the agent implemented it, and the result was checked against the Figma design.
We also built dedicated agent skills (reusable instruction sets) for working with Chisel. One skill covers general Chisel development patterns, another handles ACF block creation, and a third manages the Figma-to-WordPress conversion flow. These skills package up project-specific knowledge so the agent doesn't have to rediscover conventions on every task. Combined with MCP servers for WordPress block markup and Figma, the agent has access to both the design source and the CMS tooling it needs.
Connecting Figma to WordPress With AI (Figma MCP in Practice)
On the same WordPress project, our developer connected the coding agent to Figma via MCP. The agent could reference specific design frames by name during implementation ("build the hero section from the Homepage frame") and pull the actual spacing, colors, and typography values from the design.
Design tokens (colors, spacing, font sizes) were extracted and mapped directly to the WordPress theme.json configuration. The implemented site used the same values as the design, not close-enough approximations.
At xfive We Tried Building a WordPress Site With AI, Step by Step
- Documentation first. The agent analyzed the Chisel codebase and generated a building playbook, its instruction manual for the rest of the project.
- Design inventory. The agent scanned all Figma frames via MCP and built a reference list. From there, sections could be called by name: "implement the Testimonials section from the About page."
- Token extraction. Design tokens pulled from Figma (one view at a time, which was painful) and mapped to theme.json.
- Section-by-section build. Every page section went through the same loop: plan, human review, implement, check against the design.
- Human role. Minimal code writing. Mostly feedback: "this doesn't match the design," "this interaction is broken," "the spacing is off here."
The workflow that worked best was deliberate. Logic first, appearance second. Instead of converting the entire Figma project in one go, our developers built the needed blocks with dummy content first, then styled everything and filled in real content from the design. They always started in Plan Mode and only moved to implementation after agreeing on the approach. Every prompt reminded the model to use the relevant skills and MCP servers.
The results were solid: functional, nearly production-ready solutions that followed the Chisel spec, with developers keeping control over the architecture throughout.
Where AI-Built WordPress Code Still Needs Human Fixes
Some sections landed close to the designs on the first try. Others took several rounds. The codebase ended up bigger than it needed to be. AI tends to over-scaffold, adding wrappers and utility functions a human wouldn't bother with. Character escaping and special characters in CMS content kept causing rendering issues.
What We Learned About Using AI Coding Agents for WordPress
- Documentation is the multiplier. A solid playbook improved every task the agent touched after the first one.
- Design quality is a dev problem. Messy Figma files produce messy code, every time.
- Base components need to be solid. Without a good button/card/layout foundation, the AI copies styles into every section it builds.
- Naming conventions matter. When design tokens and theme config speak the same language, mapping is almost automatic. When they don't, every section needs manual fixes.
- Plan, review, implement, always. Letting AI run unsupervised creates drift. Small deviations stack up into something that doesn't match the design or the intent.
- Logic first, styling second. Building functional blocks with dummy content before layering on styles and real content works much better than trying to do everything at once.
How This Project Changed Our AI Development Workflow
Faster prototypes.
AI-assisted implementation changed what a quick prototype can look like. Work that used to need a full sprint can now be shown as a focused, working version much sooner.
Prototyping earlier.
We now build working prototypes to validate functionality before committing to a full build. AI made this fast enough to be worth doing on more projects, not just the biggest ones.
Figma-first approach.
All projects start with structured Figma designs, even if those designs are AI-generated. The structure matters more than how it was created.
Agent instructions as project artifacts.
Playbooks, skills, design inventories, and agent configuration files are now part of standard project setup.
Model flexibility.
Team members pick the model that fits the task at hand, and share what works in internal reviews.
Custom tools where needed.
When off-the-shelf doesn't cover a use case, like our SEO pipeline, we build our own. AI makes this faster than it used to be.
Knowledge base in progress.
Templates, naming conventions, reusable skills, and agent configurations are being collected into a shared library.
About the author
