Claude Design vs Figma AI: I Designed the Same Web Page With Both

AI design tools are starting to look increasingly similar: you describe what you want in natural language, AI generates an interface, and you continue refining it through conversation.

Claude Design and Figma AI agent both follow this general pattern, but they approach the problem from very different directions.

Claude Design is Anthropic's dedicated space for creating visual assets. It can generate UI designs and interactive prototypes, let you modify individual elements, work with a design system, and eventually hand the result to Claude Code for implementation.

Figma AI, meanwhile, is positioned as a prompt-to-design space. You can generate UI layouts and refine them in Figma just like how you do it with a regular designs created manually.

These descriptions sound surprisingly similar.

So which one is actually better for product designers?

I decided to design exactly the same web page with both.

The experiment

For this experiment, I wanted something more substantial than a simple hero section but not complex enough that implementation became the main challenge.

And taking into strong focus that Claude Design puts on design system, I decided not to use any existing design system for my examples to prevent biased results.

I will create a homepage for Lingo, an online platform for learning Spanish.

This should be a typical landing page that needs a hero section, navigation, a preview of the learning experience, social proof, a section explaining how the product works, and a final call to action.

I will use the same starting prompt in Claude Design and Figma AI.

Design a responsive homepage for Lingo, an online platform for
learning Spanish.

The audience is young professionals who want to learn conversational
Spanish for travel and everyday communication.

The page should include navigation, a hero section with a strong
primary CTA, social proof, a preview of an interactive lesson,
a section explaining how the product works, testimonials, and a final CTA.

The visual direction should feel modern, editorial, playful, and premium.

Avoid the stereotypical AI-generated SaaS aesthetic: excessive cards,
gradients, rounded containers, oversized text, and generic feature grids.

Use typography, composition, imagery, whitespace, and hierarchy
to give the page a distinctive visual identity.

Design for desktop at 1440px wide.

Design a responsive homepage for Lingo, an online platform forlearning Spanish.
The audience is young professionals who want to learn conversationalSpanish for travel and everyday communication.The page should include navigation, a hero section with a strongprimary CTA, social proof, a preview of an interactive lesson,a section explaining how the product works, testimonials, and a final CTA.The visual direction should feel modern, editorial, playful, and premium.Avoid the stereotypical AI-generated SaaS aesthetic: excessive cards,gradients, rounded containers, oversized text, and generic feature grids.Use typography, composition, imagery, whitespace, and hierarchyto give the page a distinctive visual identity.Design for desktop at 1440px wide.

Quick note: This is intentionally a fairly open prompt. I didn't want to tell either tool exactly where every element should go because that would mostly test instruction following.

I wanted to see how much design judgment (or, better put, AI taste) each tool would contribute by itself.

Starting with Claude Design

The process of creating a new design with Claude Design is straightforward: you prompt it to build a new design, and it does the job.

Claude Design used to approach the task more like a conversation with a designer: once you submit a prompt, it typically asked you a series of clarification questions about your design before creating a new design.

But recently I've noticed Claude becoming more autonomous, and it strongly focuses on building a design artifact for your review.

A very nice thing about Claude Design is that it gives you a visual workspace (called canvas) in which the design itself becomes the object you're discussing. You can interact with a design just like you interact with a real website, and refine it in context.

As you can probably see, the layout doesn't have any images (only placeholders for images), but that's totally fine. The first thing I would look at when evaluating a new design isn't pixel-level polish; it's the decisions Claude made that weren't explicitly included in my prompt.

The questions I ask are

• Did it create a strong visual hierarchy?
• Did it introduce an interesting composition?
• Did the lesson preview actually communicate what Lingo does?
• Did it avoid collapsing everything into interchangeable rounded cards?

Those decisions tell me far more about the model's design ability than whether the button radius happens to look good. And overall I should say that Claude Design tends to produce decent outputs for one-shot prompts.

Iterating on the design with Claude Design

There are a few ways to iterate on the design: you can make manual changes in the design on the canvas or ask AI to change the design for you. For my experiment, I'm more interested in testing AI capabilities, so I will ask AI to make two changes.

Introducing a local tweak for design with Claude Design

Claude Code makes it easy to change the visual or functional attributes of a particular element on the page. You can click Comment, select an element you want to modify and leave a comment… for AI. Yes, you read it right: you leave a comment for AI so it can redesign a certain element.

In my case, I will ask AI to make the hero image more visually prominent with a prompt

make it pop

And in less than a minute, I've got an updated design from Claude. Frankly speaking, the visual pattern that Claude used is not ideal, but the hero image indeed has more visual weight now.

Global redesign with Claude Design

If you want to make a more radical revamp for your design, you can submit a follow up prompt. I typically change the effort level to High or Extra High to achieve the best possible results from AI.

Here is the prompt I use for a more radical redesign:

The page feels too much like a typical AI-generated landing page.
Make the visual direction more distinctive and editorial.
Reduce the use of containers and cards. 
Use composition,typography, whitespace, and imagery to create hierarchy instead.

And here is what Claude generated for me. Yes, its not a super cool web design, but definitely not a bad result for a one-shot prompt.

Now let's see what Figma can offer

I started a new Figma Design file and gave it exactly the same initial prompt. There is a very interesting thing about the Figma AI agent: unlike Claude Code, which can only use Claude AI models, Figma can select an AI model that is the best fit for the design task at hand (Figma have access to GPT, Gemini, and Claude AI models).

But in my experience, Figma tends to use the fastest, not the most powerful, AI model (Gemini Flash) for design tasks, and you can easily notice that in the output it produces. Below you can see the result of the first take for this task. This design looks and feels like an ultra-stereotypical landing page.

Introducing a local tweak with Figma

Figma also makes it easy to change the visual or functional attributes of a particular element on the page. All you need to do is select the element and write a follow-up prompt.

Let's do exactly the same exercise: select the hero image and ask AI to make it pop.

In my experience, it typically takes Figma longer to make a single design change than Claude (with the Opus AI model at Medium effort). In my experience, it took about a minute for Figma to introduce a small tweak that you see below.

My honest opinion about the quality of output: unfortunately its below average. Apart from the subtle shadow Figma introduced to create a sense of dimensionality or visual noise, such as the decorative badge "Espana 2024", the section looks pretty much the same.

Global redesign with Figma

Let's see how Figma can deal with a global web page redesign.

I'll use the same prompt for Figma and let it choose the right AI model for this task (unlike Claude, I cannot select the AI model manually, so I need to trust Figma to make the right selection).

And below, you can see the output that Figma generated for me. The radical redesign doesn't feel radical at all. It feels more like a subtle refinement over the existing design. The page still looks ultra generic and nearly screams "AI-generated design."

So which AI tool is better?

If I were exploring an idea from scratch and wanted AI to take a larger role in interpreting the brief, proposing a visual direction, and iterating with me conversationally, I would lean toward Claude Design.

Claude Design feels like an AI designer with a canvas, while Figma AI feels like Figma with some AI capabilities added on top of the existing product.

Want to master Claude Design?

Check out my complete guide to Claude Design, packed with practical insights on how to use it for various design tasks, from UI design to logo design. The guide is updated weekly, so you'll always have access to the latest information about the tool.