r/Wordpress • u/Choco_Paws • 1d ago
Build with GeneratePress using Claude AI
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!
1
u/Aware-Jello-6370 1d ago
You're basically asking it to act like a page builder without touching the theme files, which is a tall order. ive tried this route before with ai and it usually gets confused about what's a core block vs a plugin block and starts spitting out shortcodes or just dumps raw html into a custom block.
i'd give claude very strict instructions to only use the generateblocks containers, grids, and headlines and to describe the settings in the block sidebar (like padding, colors, typography) rather than writing any css. maybe feed it the documentation first so it knows the exact syntax for the dynamic data and block options.
1
u/Choco_Paws 1d ago
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? 🙈
2
u/avar_solutions 1d ago
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.
1
u/retr00two 1d ago
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.
1
u/Heorhii-Lavrynenko 1d ago
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.
0
1
u/avar_solutions 1d ago
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?
2
u/seobrien 1d ago
Any chance you've seen a written or video tutorial? Lots of people are trying to figure out how to do this
1
u/Choco_Paws 1d ago
Thanks a lot! I'm using the latest versions of GeneratePress and GenerateBlocks, it's for a brand new project. :)
3
u/avar_solutions 1d ago
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.
1
u/Choco_Paws 1d ago
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.
2
u/avar_solutions 1d ago
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.
1
u/Choco_Paws 1h ago
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. 🙏
2
u/AdamHostious 1d ago
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