I took an HTML export from Lovable, opened Claude Code, and in one day had a complete WordPress theme -- 11 custom blocks, 4 custom post types, deployment pipeline. 83 files, over 7,300 lines of code. Without an AI agent? That would've taken a week at least.
The Brief
I needed a new website for the Czech ecological organization Stromy v krajine (Trees in the Landscape). Their old site was outdated and the client wanted to manage content themselves -- projects, events, team members, partners, and news. WordPress was the obvious choice.
I had Lovable generate the design -- an AI tool that creates a complete React SPA from a text description. The result looked great: responsive design, beautiful color palette (forest green + gold), Tailwind CSS, interactive components. But the client needed WordPress, not a React app.
Step 1: Analyzing the Lovable Export
Lovable generated a React/Vite SPA with dozens of components: HeroSection.tsx, AboutSection.tsx, AchievementsSection.tsx, pages for news, contact, photo gallery. The entire design system in Tailwind with HSL variables -- primary: 142 70% 25% (forest green), accent: 47 96% 53% (gold).
First step was having Claude Code explore the entire React codebase -- every component, every design token, every breakpoint. It built a complete map of what needed to be converted.
Step 2: WordPress Theme in an Hour
From the React code analysis, Claude Code generated the entire theme structure:
- 11 custom blocks -- Hero, Quote + About, Achievements, Contact Info, Contact Form, Photo Gallery, listings for Projects, Events, Team, and Partners
- 4 custom post types with Czech labels -- Projects (status, location, tree count), Events (date and time), Team (social media), Partners (logo)
- Tailwind pipeline via Vite -- identical design tokens as in Lovable
- Custom Nav Walker for desktop and mobile navigation
- Vanilla JS lightbox with arrow navigation
55 files, over 5,000 lines -- in a single commit.
Step 3: The Pivot -- ACF to Carbon Fields
The original plan was ACF (Advanced Custom Fields) for blocks and metadata. But ACF Free lacks:
- Repeater fields (item lists)
- Gallery fields (photo gallery)
- Options pages (footer settings)
ACF Pro costs $199+/year. Instead I switched to Carbon Fields -- an open-source alternative with full functionality via Composer.
The migration happened the same day. Claude Code rewrote all 11 blocks from ACF API to Carbon Fields API, swapped get_field() for carbon_get_the_post_meta(), and added Docker Compose for local development. Zero licensing costs, 100% open-source.
Step 4: Polish
What remained was fine-tuning details to match the Lovable design:
- Styling the Aktuality (blog) page to match the Lovable template
- Contact form with validation replacing the placeholder
- Editable footer via WordPress widget areas
- CTA button moved from hardcoded header to WordPress menu system
- Gallery with lightbox and arrow navigation
- Editor styling -- blocks in Gutenberg get labels and borders
Step 5: Deployment
Finally, a Deployer pipeline:
- Local build via Vite (Tailwind + JS)
- rsync to production server with release management
- Zero-downtime deploy via symlinks
- Content sync scripts (WP-CLI export/import + search-replace)
- Media sync via rsync to a shared uploads directory
Timeline
| Time | What happened |
|---|---|
| 0h | Lovable HTML export imported |
| 1h | Complete WordPress theme + ACF blocks |
| 2h | Pivot to Carbon Fields + Docker setup |
| 3-6h | Styling, admin flexibility, interactions |
| 7-8h | Deployment pipeline, documentation |
24 commits over 2 days. 83 files. 7,300+ lines of code.
Why This Wouldn't Work Without Claude Code
This was a project where an AI agent really shined:
- Codebase analysis -- explored the entire React export and understood the design system
- Structure generation -- 55 theme files in a single step
- Rapid pivot -- ACF to Carbon Fields migration in an hour instead of a day
- Repetitive patterns -- controllers, template parts, CPT registration, block definitions
- Tailwind conversion -- 1:1 transfer of design tokens from React to WordPress
Key decisions -- architecture, Carbon Fields vs ACF, deployment strategy -- required human judgment. But the actual execution? The AI agent sped that up maybe 5-10x.
One person + Claude Code = a complete WordPress theme in a day. The future of development is here.
Top comments (0)