We Gave Claude Design 90 Minutes and a Broken Landing Page. It Beat Our Designer’s First Draft.

Neeraj K Ravi Avatar
✨ Summarise and Analyse the Article

Anthropic just launched a design tool that reads your codebase. For a 3-person marketing team running paid ads on deadline, that’s either a gift or a trap. We tested it on live client work to find out.

It was a Thursday afternoon. A SaaS client — Series B, pipeline-obsessed, the kind of founder who refreshes HubSpot on weekends — sent us a Loom. Their new pricing page had gone live the week before. Our LinkedIn ads were driving clicks to it. The conversion rate had dropped 34%.

The ads were fine. The audience was fine. The page was the problem.

Our designer was booked solid for six days. We didn’t have six days. We had one paid campaign burning ~$1,100 a day on a page that was quietly pushing qualified traffic into the void.

So when Anthropic dropped Claude Design into research preview on April 17, we did what any small agency with too much work and not enough designers does: we opened it the same night and pointed it at the broken page.

This is what happened.

What Claude Design Actually Is (Skip If You’ve Read The Announcement)

Claude Design is a new Anthropic Labs product that lets you collaborate with Claude — powered by the new Opus 4.7 vision model — to create visual work. Prototypes, slides, landing pages, wireframes, pitch decks, marketing collateral. The kind of stuff that normally lives in Figma, Canva, and a Slack channel called #design-help-please.

The part that made us sit up: during onboarding, Claude reads your codebase and design files and builds your design system automatically. Every project after that uses your actual colors, typography, and components. Not “here’s a generic blue button.” Your button.

You import from text, images, DOCX, PPTX, XLSX, or a codebase. You can also point it at a live website with a web capture tool. You refine via chat, inline comments, direct edits, or custom sliders Claude builds on the fly. When you’re done, you export to PDF, PPTX, Canva, or a standalone HTML file. Or hand it off to Claude Code to build.

It’s available to Pro, Max, Team, and Enterprise subscribers. Enterprise admins have to flip it on manually.

That’s the brochure. Now the real test.

The $1,100/Day Landing Page Problem

Our client sells a B2B analytics tool. The old pricing page converted visitors to trial signups at 4.2%. The new one — shipped by an in-house designer with good instincts but no performance marketing context — sat at 2.8%.

On ~1,800 monthly paid clicks, that’s 25 lost trials a month. At their ACV, that’s about $18K in foregone pipeline. Every month.

We’d already run a quick heuristic audit. The problems weren’t subtle:

  1. The pricing tiers were visually balanced — which meant the “recommended” tier didn’t stand out at all.
  2. The CTAs on every tier were the same color, size, and weight.
  3. The social proof (logos, testimonials) was buried below the fold on mobile.
  4. The headline was about features, not outcomes.

A normal workflow: write a brief, Loom a walkthrough, get it into the designer’s queue, wait four days, review, iterate, wait two more days, ship. Eight days, minimum. We had until Monday morning.

Hour One: Onboarding (And The Thing That Made Me Stop Typing)

I signed in at 7:40 PM. Pointed Claude Design at the client’s GitHub repo and their existing Figma file.

It took about 11 minutes to ingest everything. When it finished, it showed me their design system — color tokens, type scale, spacing rules, button variants, the whole thing — laid out like they’d documented it themselves. They hadn’t. It had just… read the code.

I’ve watched designers spend two days doing this manually for a brand guidelines doc.

This is the part that matters for agencies: your client’s design system is now something you can hand to an AI in 11 minutes, not a six-week discovery engagement. If you’re billing for “brand foundation workshops,” the pricing model just got interesting.

Hour Two: The First Prototype

I typed roughly this: “Redesign this pricing page to improve conversion. The middle tier is the target. Make social proof prominent above the fold on mobile. Headlines should be outcome-based. Keep the existing design system.”

First pass came back in about 90 seconds.

It was… fine. Not great. The middle tier was now visually louder, which was what I asked for, but Claude had made it aggressively gold in a way that fought with the rest of the brand. The hero was better — outcome-focused, cleaner — but the testimonial section had been moved too far up and was now pushing the pricing grid below the fold on desktop.

Here’s where the tool got interesting. Instead of rewriting a prompt from scratch, I used the inline comment feature — the same way you’d comment on a Figma file. I marked the middle-tier card: “Too saturated. Reduce gold by ~60% and add a subtle 1px gold border instead of a fill.” I marked the testimonial block: “Good content, wrong position. Move below pricing grid on desktop, keep above grid on mobile.”

Claude applied both changes. Not perfectly — the mobile testimonial block was now too tall — but I used a slider Claude generated on the fly to adjust the spacing until it looked right.

Total time from import to first decent version: about 47 minutes.

Hour Three: The Thing That Broke

I want to be honest about what didn’t work, because everything you’ll read about Claude Design this week will be breathless.

The copy was the weakest part.

Claude’s outcome-focused headline was technically an improvement over the feature-heavy original. But it was generic SaaS copy — the kind of “Make better decisions, faster” line you’ve read 400 times. For a specialized B2B tool serving a specific buyer (data teams at mid-market e-commerce companies), generic copy costs you conversions even when the layout is perfect.

I rewrote every headline and CTA by hand. That took another 35 minutes.

The lesson: Claude Design is extraordinary at structure and weak at specificity. It can arrange a page beautifully. It can’t tell you why your buyer clicks. If you’re in performance marketing, this means the tool compresses the layout work from days to hours but doesn’t touch the part that actually moves conversion rates — the copy. That’s still yours. For now.

This matches something we wrote about earlier this year on building high-converting landing pages: the visual hierarchy matters, but the words on the page are what get people to act. Neither one alone is enough.

Hour Four: The Handoff

Final version was ready at around 10:15 PM. I exported three artifacts:

  • A standalone HTML file (for the dev team to diff against the current build).
  • A Claude Code handoff bundle (Anthropic’s pitch is that you can pass this to Claude Code with a single instruction and it builds the thing).
  • A PDF for the client review.

The Claude Code handoff is a genuinely new thing. It’s not “here are some screenshots, go figure it out.” It’s a packaged spec — design intent, component references, interaction notes — that the coding agent can actually execute on. We haven’t shipped this to production yet; that happens this week. But the spec itself was more detailed than most design handoffs we’ve received from human designers on a tight deadline.

Total elapsed time from opening the tool to shipping the handoff: 2 hours, 38 minutes.

What The Numbers Looked Like After

We deployed the new pricing page Monday morning. Same ad spend, same audience, same offer.

Week one:

  • Conversion rate: 4.9% (up from 2.8%)
  • Paid trial signups: 23 (up from 13 in the prior week)
  • Additional pipeline generated that week, estimated: $7,200

Obviously, one week is not a statistical result. We’ll know the real number in 30 days. But the direction is clear, and the old page was so clearly broken that “directionally better” was the only possible outcome.

Cost to us, in time: ~3 hours of my Thursday evening, including the hour I spent rewriting copy Claude got wrong. Cost if we’d waited for the in-house designer: 8 days and ~$8,800 in foregone pipeline.

What This Means For Small Performance Teams

I run a 3-person performance marketing agency. We manage paid media for B2B SaaS companies — Google Ads, LinkedIn, Meta, Reddit, X. The bottleneck in our work is almost never “can we buy the clicks.” It’s “can we ship the page they land on fast enough to matter.”

A landing page is the most important asset in a paid campaign. It’s also the most expensive one to iterate on, because it usually requires a designer, a developer, and a PM to coordinate. For small agencies and in-house teams running lean, a bad landing page can eat an entire quarter’s ad budget before anyone notices.

Claude Design doesn’t replace a designer. It doesn’t replace copy. It absolutely doesn’t replace someone who understands why your buyer clicks. What it does, cleanly and for the first time I’ve seen, is remove the layout step from the critical path. You can now prototype a landing page at the same speed you can write a brief for one.

For Series A and Series B SaaS companies running paid, that matters. For agencies like ours, it means we can actually hold ourselves accountable to pipeline outcomes instead of “we delivered the ads on spec, not our fault the page didn’t convert.” Which is what we’ve always argued the game should be — and now there’s one fewer excuse.

The Two Things I’d Tell You Before You Try It

1. Don’t skip the codebase import. If you just text-prompt Claude Design, you get a generic output. When it reads your design system, everything downstream gets 3x better. Budget the first hour for setup.

2. Keep writing your own copy. Claude is a good compositor. It is not your positioning. If you let it write your headlines, you’ll ship faster and convert worse. Write the words yourself. Let the tool do the rest.

There’s more to say about how generative AI is reshaping the paid media stack — we’ve written about how Performance Max is changing the game and what AI automation in PPC actually looks like in practice. The pattern is consistent: AI collapses the execution layer and amplifies the strategy layer. What you know about your buyer is worth more now, not less. The rest is leverage.

Discover more from OneMetrik

Subscribe now to keep reading and get access to the full archive.

Continue reading