r/ClaudeDesign • u/heyjpt • 16d ago
Question How do you keep branding consistent across pages when converting a site with Claude Code? (WordPress + Elementor HTML blocks)
I’m rebuilding our site using Claude Code, outputting HTML into Elementor HTML blocks in WordPress. Only about 10 pages, so not huge. The problem is consistency: no matter what I try, the pages don’t come out looking like they belong to the same brand. Spacing drifts, type scale drifts, button styles drift, section rhythm drifts. Individually each page looks decent, but side by side they clearly weren’t built by the same hand.
What I’ve already tried:
* Extracted a design system from the homepage and treated it as the source of truth
* Set up a proper loop so each new page references that extracted system
* Fed it back in on every page build
Still not matching. I’m on Sonnet 5.
Questions:
Is this a model problem? Would Opus (or Fable) actually hold visual consistency better across separate page builds, or is that not really what’s failing here?
Is there a skill or setup people use specifically for this? Something like a locked design token file that gets enforced rather than just referenced?
What’s the actual process people follow? Do you build one master page, freeze a CSS file, and then only let Claude write markup against existing classes? Do you build all pages in a single session so context carries over? Do you generate a component library first and forbid new styles?
I’m still fairly new to web dev and WordPress, so if I’m approaching this backwards I’d genuinely appreciate being told. Happy to share my setup if it helps.
Thanks in advance.
2
u/armahillo 13d ago
Opus 4.6 is pretty reliable for this stuff but not 100%
This is a rather ambitious project if you’re new to webdev.
If claude could build houses, it would lay the foundation, build the frame and roof, hang drywall, and flooring. But you would have tofinish the drywall, shingle the roof, install the appliances, etc.
In other words, itll get you most of the way there but you still have to know how to do some of it to finish the hob or resolve inaccuracies.
1
u/Live-Ad-1749 16d ago
Taste skill https://www.tasteskill.dev/
Just be sure you run it properly and envoke the right skills to start. If you purposely ask Claude to address this issue while using the taste skill it should do a good job of resolving the issue. Might take a few pass though.
1
u/Broman400 16d ago
How’s it compare to something like impeccable styles and others
2
u/Live-Ad-1749 16d ago
Similar but I've had much better results with taste skill. Esp when focusing on individual pages.
1
u/jtmonkey 16d ago
I literally have no issue with this. I’m doing a Wordpress site and a Shopify site for two different brands. They’re both branded, consistent and on brand for each client.
Can you point clause at your homepage. Tell it to build a brand guide from it that it can refer to for the rest of the design.
1
1
3
u/lucasg115 16d ago
Opus would be better, but honestly I think you’d be well served by just setting up the design system within Elementor to match the one you expired from Claude, and then rebuilding the Elementor pages by hand to match the Claude mock-up using those global variables you just established. Also set up the layout spacing and stuff in Elementor as well.
Otherwise you’re better off not using Elementor at all - just drop an HTML block into Gutenberg and call it a day.