I want to walk you through a workflow I stumbled into recently that genuinely changed how I approach client projects. It combines Claude, Elementor, and a technique called clamp() to handle responsive typography, and the result was one of the cleanest dev handoffs I’ve had in years.
Before I get into the workflow itself, let me give you a bit of context, because the backstory is actually the most important part.
The client situation
A guy reached out asking for help making edits to his Elementor site. Simple enough. But when I got in there, I found a disaster: 8 installed themes, 24 plugins, and a page structure built entirely with the old column-based layout system. No flex containers, no grid. Just the legacy column builder that Elementor moved away from three years ago when they introduced proper flex and grid container support.
I asked him what the goal of his website was. He said: attract young people to sign up for his soccer summer camp. Then I asked if I could see his homepage. He pointed me to a Revolution Slider with three images and zero actual content.
REAL TALK I told him straight: a homepage exists to sell. It needs to clearly communicate the problem you solve and the solution you offer. He went quiet for a few seconds, then said: "I'm not offended at all. What you're telling me makes sense and what you've shown me is exactly what we need to do." We closed the project within the hour.
Generating the design system with Claude
I had already built a mockup in Claude Code to show the client what was possible. Once we agreed on direction, I moved into Elementor to build the real thing. But instead of copying values manually, I used Claude Code to generate a full design system for the landing page first.
I asked it to output all color tokens as CSS custom properties, and to create text styles using clamp() for fluid typography. If you haven’t used clamp() before: it’s a CSS function that lets you define a minimum size, a maximum size, and a fluid range in between. The browser handles all the responsive scaling automatically. One line of code replaces four media queries.
It was my first time using it on a real project and honestly, it’s hard to go back.
The dev inspector trick
Here’s the part that really made the workflow click. I asked Claude Code to also generate a development overlay tool, a small script that lets me hover over any element on the page and see exactly which text style and color token it maps to.
This meant that as I was rebuilding the page layer by layer in Elementor, I could always verify I was using the right values. No second-guessing. No “wait, was that the heading XL or the heading L?” Just hover, check, apply. The whole design system stayed consistent from start to finish.
STACK NOTE: Everything was built with Elementor Free and the Hello Biz theme for the header and footer. No Pro license. No premium plugins. 3 plugins total, down from 24.
The migration headache
Once the design was done and reviewed, it was time to migrate the content to the client’s live site. That’s where things got interesting. I cleaned up the install, going from 24 plugins to 3 and from 12 themes to 1, and then tried to import the page. It failed.
I spent at least three hours trying to figure out what was wrong. Eventually I decided to just recreate the page directly on the client’s install, and that’s when I noticed it: his Elementor settings were outdated and still defaulting to the old column layout instead of flex containers. One toggle. That was it. Once I switched it over, the import worked immediately.
The clamp() gotcha on mobile
There’s one thing I want to flag for anyone planning to use this approach. clamp()works beautifully until a theme or Elementor itself has a hardcoded mobile font size for a specific element. When that happens, the theme’s value overrides your clamp declaration and things stop scaling the way you expect.
I noticed some typography looking off on mobile and couldn’t figure out why for a couple of hours. Once I traced it back to the theme overriding specific font sizes on small breakpoints, I cleared those overrides and everything snapped into place. Worth keeping in mind if you go this route.
What I’m taking from this
The workflow I ended up with, Claude generating the design system, tokens mapped as global CSS variables in Elementor, a hover inspector for verification, and clamp() handling all the responsive type scaling, felt genuinely new. Not just faster, but more systematic.
Being able to name every color and text style, then verify them live as I built, removed a huge amount of cognitive overhead. The client gets a cleaner, more consistent result. I spend less time second-guessing and more time actually building.
The project is almost wrapped, just waiting on a few final copy updates from the client. But the process? I’ll definitely be running this one back.