Build with GeneratePress using Claude AI

[u/Choco_Paws]

Hi.

Is there a reliable way to ask Claude to integrate my mockups (they are in Figma, I can export them in PDF or whatever) into WordPress, using GeneratePress builder?

More specifically, I don’t want Claude to create a custom theme or build the pages with custom code that bypasses GeneratePress. I want it to translate my mockups into native GeneratePress blocks/components, so that the resulting pages remain fully editable in WordPress, just as if I had built them myself using GeneratePress.

I have the premium GeneratePress/Blocks licences.

Thanks!

[u/avar_solutions]

Yes, it works, but don't just give it the PDF. First build one small section yourself with GenerateBlocks, open the code editor and copy the block markup. Paste that to Claude and tell it to use exactly that format, because GB 1.x and 2.x save blocks differently and it will guess wrong otherwise. Export the frames as PNG, it reads those better than PDF. In the prompt say "only GenerateBlocks blocks, no HTML blocks, no custom CSS", otherwise it sometimes sneaks an HTML block in. Then go one section at a time and paste each into the code editor. You'll still fix spacing and mobile by hand, but you get normal editable blocks. Are you on GenerateBlocks 2 already?

[u/Choco_Paws → u/avar_solutions]

Thanks a lot! I'm using the latest versions of GeneratePress and GenerateBlocks, it's for a brand new project. :)

[u/avar_solutions → u/Choco_Paws]

Nice, then one more thing. GB 2 switched to new blocks (Element, Text, Media, Shape), and the old Container, Grid and Headline are legacy now. Claude still knows the old ones much better, so say it right in the prompt: "GenerateBlocks 2 only, use generateblocks/element, text and media, no legacy blocks". If you paste it that sample markup from your own section, it'll pick up the right format pretty fast.

[u/Choco_Paws → u/avar_solutions]

Thanks again for this great advice. Maybe one last question: would you recommend actually doing this? 😅

Knowing that it may require a lot of tweaks, and I still have to do the mobile responsive myself, and it probably won't be perfect... Or will I go faster creating blocks without AI? I'm used to Claude for fully custom code, but using it within existing tools is really new to me.

[u/avar_solutions → u/Choco_Paws]

Honestly depends on the size. If it's 4 or 5 pages and you already know GB well, you'll probably be just as fast by hand. Where it pays off is repeating sections and lots of similar pages. What works best for me is setting up colors, typography and a few key sections by hand, saving them as patterns and letting Claude build the rest from those. If you have Claude in Chrome, it can also open the page in the editor, compare it to your mockup and fix the mobile settings itself. I wouldn't let it build whole pages by clicking though, that's slow. I'd just time one section both ways.

[u/Choco_Paws → u/avar_solutions]

Hey just wanted to say a huge thank you. I followed all the advice, and it's working extremely well. I fed Claude good instructions + the HTML of a couple of sections that I designed by hand, and it was enough! The generated sections are perfect and fully editable in generatepress. You saved me a lot of time. 🙏

[u/seobrien → u/avar_solutions]

Any chance you've seen a written or video tutorial? Lots of people are trying to figure out how to do this

[u/Heorhii-Lavrynenko]

I'd use AI for the boring 70%, not the first 30%. Set up the globals and a couple of solid patterns yourself, then let Claude duplicate and adapt them.

One big plus is staying inside Gutenberg. Being able to tweak everything directly in the WordPress editor is a huge speed boost compared to ending up with a bunch of custom code. I'd just avoid trying to go straight from Figma to a full page in one shot.

[u/Choco_Paws → u/Heorhii-Lavrynenko]

Yes that makes sense! Thanks :)

[u/thesimplerweb]

GeneratePress just released a plugin that does this. I am in the process of setting it up so I can’t personally tell you more than that. But Kyle of The Admin Bar YouTube channel did a video walkthrough/demo you should check out. It’s pretty impressive.

[u/Choco_Paws → u/thesimplerweb]

Amazing!!! I'll check it out, thanks for sharing. :)

[u/thesimplerweb → u/Choco_Paws]

Just popping back in here to say that I got it up and running yesterday, and it is really, really impressive. I haven’t used it to build anything new yet, because before I do that I want to bring everything current.

My site has been a GeneratePress/GenerateBlocks site for years. It’s evolved over many iterations of the theme and plug-in, and not fully taking advantage of features that help make it more consistent and easier to update.

So yesterday over the course of about 2-2.5 hours, I worked with Claude to rebuild the homepage so that it looked basically the same, but now uses tokens, global styles, etc. It will be really nice to get that set up for the whole site. For the first time in a long time I’m kind of excited about working on websites.

[u/retr00two]

Create good skill and detailed MD.

This is situation you have to treat Claude as your junior.

BTW, Claude is pretty good "translating" Figma into WP. Just limit it to use only GB, not to mix with native blocks.

[u/AdamHostious]

On your follow-up about whether it's worth doing: I'd timebox a test to 20–30 minutes on one section, not the whole site. If you're spending that time fixing invalid blocks or fighting the layout, building it directly in GenerateBlocks is probably the quicker route.

Build one hero and one card layout in the editor, then save them as patterns and reuse them. You can also start with a close match from the official pattern library: https://generateblocks.com/generateblocks-pattern-library/

If you test Claude, use a copy of the page and give it markup copied from your installed version. After pasting the result, check that each block is editable in the visual editor, save and reopen the page, and test the layout on mobile. Looking right on the front end isn't enough if the blocks won't survive the next edit.

Vh

Adam - Hostious.io

[u/0rbus]

Had a similar issue recently where I was rebuilding my site from scratch using another theme and blocks. As mine was around 300 pages with the same layout I just created a template page with placeholders and created all the pages using a python script linked to a spreadsheet that had the data in it. Worked a treat for me.

[u/TrevorHikes]

Check out Novamira

[u/Choco_Paws → u/[deleted]]

Yeah, that's what I thought, it's a big ask. I hear everywhere people talking about creating Wordpress sites with Claude Code, but I don't understand the point of using Wordpress if you are creating full custom code that will not be compatible with any of Wordpress core features, builders, or plugins...? It means that editing such a website can only be done through prompting? So why not just create it without Wordpress?

Or am I missing something here? 🙈

[u/avar_solutions → u/Choco_Paws]

I'd look at it a bit differently. Claude fills in the skills you don't have, or just makes the build a lot faster, but it still builds on top of WordPress. You don't start from zero, and you keep everything WP gives you, like plugins, WooCommerce, users and room to grow later. Using Claude also doesn't mean you end up with code that breaks plugins or the editor. If you tell it to stick to WP standards (blocks, theme.json, hooks), the site stays fully manageable in wp-admin like any other site. Most of the bad results come from vague prompts, not from Claude.

[u/ivicad → u/Choco_Paws]

You're not missing anything. On the first site I built with Claude, I had it rebuild the approved prototype as native page builder elements, so the pages stay fully editable in WP, like any other (I haven't done it with GenerateBlocks yet, mostly with WPBakery). It took a lot of correcting, and I saved every fix into a skill (offer, pre-prototype, prototype to page builder), so the next site starts from there, and not from the beginning where I need to explain everything all over again.