Our Honest Claude Design Tool Review: From Prompt to Live Site

Introduction

The pressure to refresh a website quickly often forces teams into the same frustrating cycle. You brief someone, wait for mockups, give feedback that gets partially interpreted, wait again, and somewhere in that process the original vision gets diluted. When Anthropic released Claude Design through Anthropic Labs earlier this week, we decided to cut that process entirely and test it directly on our own site. The premise is straightforward: describe what you want, get a working design back, and refine it through conversation until it matches your intent. No Figma, no design handoffs, no waiting. We were skeptical enough to want to see it ourselves, and what we found was worth writing about in detail.

While we were running this test, it became clear that this shift is not isolated. Teams are already starting to treat tools like Claude as part of their day-to-day design workflow rather than an experiment. A recent write-up from Jane Street describes a similar transition, where Claude is used directly in the design process instead of traditional tools like Figma. The pattern is consistent. The interface becomes less about manipulating layouts manually and more about describing intent clearly enough for the system to execute on it.

What Is Claude Design?

Claude Design is a new AI-powered design tool from Anthropic that generates visual interfaces, interactive prototypes, presentations, and one-pagers from a text prompt. It is part of Anthropic Labs, the company's experimental product arm, and it runs on Claude Opus 4.7, their most capable vision model released alongside it. What separates it from other AI generation tools is that the entire workflow is conversational and iterative. You describe what you need, review the output, identify what needs to change, and refine through chat until the result matches your intent. For teams that connect their codebase and design files during onboarding, Claude Design automatically applies the correct brand colors, typography, and component patterns to everything it produces. For smaller teams working without a formal design system, it works from a cold start just fine, though the output will be more generic by default. It is currently available in research preview for Pro, Max, Team, and Enterprise subscribers, with its own separate usage tracking and weekly limits that sit alongside your existing Claude plan rather than inside it.

The Claude Design Tool Review: Our Full Process

Many teams assume that AI design tools do the heavy lifting entirely on their own. This assumption leads to vague prompts and disappointing results. The reality is that Claude Design builds what you describe, so the quality of the output depends directly on the quality of the input. Treating the prompt like a proper design brief rather than a casual search query makes an immediate and noticeable difference in what comes back.

Writing the Prompt

The first thing we did was spend about 15 minutes writing a structured JSON prompt before touching the tool at all. Instead of describing the site in plain text, we defined the entire design system in code: color palette with primary, secondary, accent, and text values, border radius rules, box shadow parameters, button variants and sizes, heading hierarchy, icon style, and a full website schema that mapped out every section from header to footer with its components and layout logic.

Here's a small slice of what that JSON prompt actually looked like:

1{2  "design system": {3    "pallete": {4      "primary": "#191265",5      "accent": "linear-gradient(to right, var(--primary), var(--primary-light))",6      "background": "#ffffff"7    },8    "components": {9      "button": {10        "sizes": ["small", "medium", "large"],11        "variants": ["primary", "secondary"],12        "notes": "All options fully rounded. Primary has primary bg. Secondary has white bg"13      },14      "icon": {15        "variants": ["dot", "solid"],16        "notes": "All icons should be dotted so icon completely consists from dots that create an icon shape"17      }18    },19    "websiteSchema": {20      "hero": {21        "components": ["Container", "Label", "H1", "Text", "Button"],22        "structure": "Hero block is 'contrastBlock' type. Container inside, then label, h1, text and button large secondary option"23      }24    }25  }26}

This is a partial excerpt. The full prompt covers all eight sections, from header to footer, with complete component and layout logic. Message us on LinkedIn and we'll send it over, or book a quick call if you'd rather talk through how it fits your project first

The schema covered eight sections in total. The header included a logo, navigation with a dropdown for solutions, and a primary CTA button. The hero was defined as a contrast block with a label, H1, description, and a large secondary button. Below that we described case study cards, a services grid with six cards and dotted-style icons, a results block split into a text column and a testimonial grid, a values section with six numbered cards, a partner logo strip with infinite scroll, a toggleable FAQ, and a footer with a citation block and a contrasted CTA section.

The level of specificity in the prompt is what made the first generation come back as close to the intended result as it did. Claude Design builds what you describe, and the more precisely you define the structure, hierarchy, and visual logic upfront, the less refinement work you need afterward.

Common Prompting Mistakes (And How to Avoid Them)

Most disappointing Claude Design outputs trace back to the same handful of prompting habits, not to the tool's limitations:

• No spacing or sizing tokens. Describing "make it spacious" or "add some padding" leaves Claude to guess. Our prompt defined explicit border radius rules and box shadow values upfront, which removed that guesswork entirely.

• Sections described in prose instead of structure. Writing "a hero, then some services, then results" gives Claude less to work with than mapping out the website schema section by section, with components and layout logic spelled out for each one.

• No notes on component behavior. A button definition without a note like "no big difference between sizes, fully rounded" leaves Claude to default to whatever it considers reasonable, which is rarely what you had in mind.

• No mention of responsive behavior. None of the eight sections in our prompt addressed mobile layout explicitly, and that was one of the few things we had to clean up manually after the second round. A clear reminder that if it's not in the prompt, don't expect it in the output.

The pattern holds across all of it: Claude Design builds exactly what you describe. Vague input produces vague output, structured input produces structured output.

First Generation

After submitting the prompt, the first version came back in roughly five minutes. The layout was clean, the sections were in the right order, and the visual hierarchy made sense immediately. It was not perfect, but it was a credible, clickable starting point that would have taken considerably longer to produce through any traditional process. The fact that it returned as an interactive layout rather than a flat image meant we could evaluate it as a real design straight away, clicking through sections and assessing the flow rather than imagining how it might feel in practice.

Refinement Process

The first version had a few things we wanted to adjust. The hero section image appeared slightly undersized, and the text alignment with the cards wasn’t fully consistent across the layout, which affected overall visual balance:

One of the service cards had inconsistent spacing:

The footer didn’t fully match the intended color palette, so it felt slightly inconsistent with the overall visual system:

Rather than manually adjusting anything, we described the problems in the chat interface and let Claude Design handle the changes.

The updates came back within a couple of minutes. This is genuinely where the tool earns its value.

The iteration loop is fast enough that you maintain momentum through the process rather than losing it to waiting. We went through two rounds of refinement before arriving at something we were satisfied with, and the full process from first prompt to final version took under an hour.

AI Website Redesign: Before vs After

Our original site already had solid content, but there were a few minor structural and presentation issues. The tone was appropriate, and the overall structure was already heading in the right direction, but the layout still felt slightly rigid, and the visual hierarchy wasn’t fully optimized for clarity.

The Claude Design version refined these areas further. It improved the information hierarchy, addressed all the issues we found, added better spacing between sections, and made the structure easier to scan and navigate. That shift in hierarchy was the most meaningful improvement, more so than any individual visual change.

There were only small remaining adjustments needed after the second version, mainly minor copy refinements and a few mobile proportion tweaks. Overall, these were subtle polish-level issues rather than fundamental problems.

What Claude Design Does Well (And Where It Falls Short)

The speed from zero to a usable first draft is the most obvious strength and it is genuinely impressive in practice. The conversational refinement loop keeps the process moving in a way that feels closer to working with a fast collaborator than operating a tool. No prior design knowledge is required to get a result worth showing, and the export options mean the output is immediately usable. This matters more than it might seem at first glance. Industry data from Figma shows that design iteration and alignment are consistently among the most time-consuming parts of the product development process. When each change requires manual updates, feedback cycles, and coordination across tools, even small decisions start to compound into delays. A system that collapses those loops into a single conversational flow changes not just the speed of execution, but the structure of the workflow itself. Teams can export to:

• HTML for direct use or handoff to a developer

• PDF for sharing and documentation

• PPTX for presentation contexts

• Canva for collaborative editing and publishing

Where the tool still has room to grow: fine-grained control over spacing, type scale, and responsive behavior requires precise language in your prompts, which takes practice to develop. Without a connected design system, outputs can feel somewhat generic in ways that require manual follow-up. And because it is in research preview, there are rough edges to be aware of. Inline comments occasionally need to be pasted into the chat manually if they do not register, and very large codebases can cause lag during initial setup. For a straightforward AI website redesign of a business or product site, the tool is already producing results that are worth taking seriously.

How Claude Design Compares to Other AI Design Tools

Claude Design isn't the only tool in this space. Here's how it stacks up against the other AI design and prototyping tools teams are using in 2026:

For teams without a dedicated designer working from an existing codebase, Claude Design and Lovable solve the closest problem, the difference is whether you need a design artifact or a deployed app. Pricing and feature data as of June 2026, verify before relying on exact figures.

Who Should Try Claude Design

Founders, product managers, and marketers who need to visualize an idea quickly and do not have a designer available will get the most immediate value from this tool. It removes most of the friction between having a concept and having something you can actually show to a client or stakeholder.

This shift is also reflected in broader industry trends. Reports on AI-assisted design and development workflows show that teams are increasingly looking for ways to reduce dependency on specialized roles during early-stage exploration. Instead of waiting for fully polished design outputs, the focus is moving toward faster validation and iteration, where ideas can be tested and adjusted before significant resources are committed.

Experienced designers will find it most useful as an ideation accelerant rather than a replacement for their existing workflow. The ability to generate a wide range of layout directions quickly and then focus attention on the strongest one is a genuine advantage during early-stage exploration where time is the limiting factor. For pixel-perfect production work or highly bespoke brand-critical design, a skilled designer is still the right choice. But Claude Design can handle a substantial portion of the early work before that stage becomes necessary, and that alone changes the economics of the discovery phase considerably.

Conclusion

A successful website refresh no longer requires weeks of back-and-forth between stakeholders and designers. Claude Design compresses that timeline significantly by turning a well-written prompt into a clickable, exportable layout within minutes. The tool is not a replacement for design expertise on complex or brand-critical work, but for teams that need to move from idea to something tangible quickly, it removes most of the friction that typically slows that process down. If your team is working on an MVP or early product interface and wants to see how AI-assisted prototyping fits into a real development workflow, our team at Pollume works through exactly these kinds of decisions with founders and product teams at the start of every build.