Cowboy Productions: From a Lovable Design to WordPress in 12 Hours
Cowboy Productions makes brand, pitch and animation videos for startups and companies in Israel. It had a WordPress site built on Elementor and a new design made in Lovable. The job was to give the site the new design without losing anything the old one had earned: its pages, its blog, its projects and its place in search.
At a glance
| Site | thecowboy.co.il |
|---|---|
| Before | WordPress with Elementor |
| New design | Made in Lovable |
| Built with | Custom native Gutenberg blocks on one design system, no page builder |
| Carried over | 16 pages and 34 blog posts with their addresses, titles and descriptions, and 77 projects as their own content type |
| Language | Hebrew, right to left |
| Time | 12 hours of work, delivered in one week (8 to 15 October 2026) |
| Run by | The team, in the WordPress admin and through Claude connected over MCP |
“Oleg transformed our Lovable website to WordPress in the cleanest and most efficient way. The best solution out there!”
Avi Graiver, Cowboy Productions
The brief
The studio had a new look ready in Lovable: bold, dark, with a Wild West theme running through it, from a cowboy hat in the logo to testimonials styled as wanted posters. The live site was still the old WordPress one. The brief was to make the WordPress site match the new design, keep the content and the search history, and let the team run it with Claude.
Why the design moved to WordPress, not the other way round
Lovable is quick at turning an idea into working screens. But the site was more than a few screens: dozens of blog posts that bring visitors from search, a portfolio of 77 projects that grows with every job, and titles and descriptions tuned over years in Yoast. All of that already lived in WordPress. Lovable’s own documentation describes no built-in blog or content editor; content goes into database tables or an outside CMS. So the design came to the content, not the other way round.
How the two tools compare in general is on Lovable vs Fabrement.
From a Lovable design to native blocks
The design came over as code, not as screenshots: Lovable keeps the project in a GitHub repository, and the agent worked from its components and styles. Every section of the design became its own native Gutenberg block on one design system, with fields the team can edit in the block editor. The home page alone uses a dozen of them:
- a header and a footer;
- a hero with a background video;
- a value strip and a scrolling row of client logos;
- a track record with a counter and award cards;
- a projects grid fed by the projects content type;
- a process section, testimonials as wanted posters, a call to action, a slider of tips and a floating contact button.
The Wild West details survived as editable blocks, not as pictures of a design. And the whole site reads right to left, as Hebrew should.
The content and its search history came along
The 16 pages and 34 blog posts moved into the new design with their addresses, titles and descriptions, so links from search and from other sites still land where they used to. The 77 projects became their own content type, each a record with its own fields, and the projects grid on the home page reads straight from it. A new project is one more record, not another hand-built section.
Before anything was built, the old site was mapped page by page from its Yoast sitemaps. The title template was set so the old titles came out word for word, and the schema, social images and robots settings stayed as they were. The projects kept their dates, their order and all 25 video categories. The six service pages kept their own text, FAQs and video lists, in the same order, now in the new design. Where the old site had nothing, new pages were added: a contact page with Google Calendar booking and a branded 404 page.
Lighter than before
The old site loaded Elementor, a caching plugin and a handful of other plugins on the front end. The new home page loads two: the contact form and Fabrement. Each block brings only its own code to the pages that use it. On launch day, Google’s speed test scored the new home page 93 on mobile, with no layout shift at all. The real-visitor numbers in Google’s report cover the last 28 days, so for now they still describe the old site, including the layout jumps the new design removed. We will add them here once they cover the new one.
Twelve hours
The whole job took 12 hours of work, and very little of it was writing code: the agent wrote the blocks. The time went into checking. Section by section, the result was compared with the design, and the details an agent can miss, such as a font, a spacing or an animation, were fixed. Our standard is pixel perfect by eye, and neither the designer nor the client could see a difference between the Lovable design and the live site.
Some of those details hide in the prototype itself. Lovable’s animations don’t run in a background browser tab, so elements sit 20 to 30 px away from where they end up, and a measurement taken there is wrong. The fix was to read each element’s starting offset and subtract it. Blog cards that declared a hover lift but never actually lifted got the behaviour the prototype really shows: a shadow and a zoom on the cover.
The rest went into decisions no tool makes for you. How the site is structured, so the team can run it as one system later: what becomes a block, what becomes a field, what becomes its own content type. Then moving the search data, and checking the content on the new site against the live one before the switch.
How the team runs it now
The team connected Claude to the site over MCP. A new project, a new blog post or a changed headline is a request in plain language, and the agent works through the same blocks and fields a person would use in the editor. When they would rather click than ask, they edit those same blocks and fields in the WordPress admin.
Build a site like this
Want to move a Lovable design to WordPress yourself? Follow the step-by-step guide: Lovable to WordPress. Have a new design for an old site? See how to rebuild an old WordPress site overnight. Starting from a design file? See Figma to WordPress. How the agent builds a site from blocks on one design system is on how Fabrement builds a WordPress site.
Built by Oleg from the 7Fridays team with Fabrement. Shown with the permission of Cowboy Productions.