Set Up Claude Design Like An Agency, Not A Hobbyist

Claude Design is the fastest design tool I have used, and without some setup it produces the same generic website as everyone else's. This post covers what it is, how to set it up properly in an agency, and where it fits in the work.

Claude Design: the brief in the chat panel on the left, the result on the canvas on the right, built in the AWIA design system.

What it is

Anthropic released Claude Design on 17 April 2026. It is a design tool driven by conversation. You describe what you want in a chat panel, Claude builds it on a canvas next to the chat, and you refine it by asking for changes, commenting on a particular element or moving things around directly. The output is working HTML, CSS and JavaScript rather than a static image, which means a prototype is clickable from the start. It exports to PDF, PPTX and HTML, sends to Canva and a few other tools, and can hand off to Claude Code for build. It is included in every paid Claude plan.

It is not a replacement for Figma. There is no pen tool, you cannot freely move elements around the way you would in a design tool, and there is no native export to Figma. It is best used for the early part of a project, where you want to explore directions and produce something clickable quickly, with a designer reviewing and finishing the work.

Feed it the brand first

The design system step is the one I would not skip. Without it Claude has nothing to work from, so you get a generic looking page with default fonts and colours that could belong to anyone.

Set up one design system per client, publish it and select it for each project. The quality of the output depends on what you feed it, and in my experience this is the order that works:

1. A coded design system. Tailwind tokens, CSS variables, a component library. Point /design-sync at the repo. This gives the best result by some margin.
2. A real, finished artefact. The live site via web capture, or a polished deck. Anthropic's own guide: real examples tell it more about a brand's feel than a palette does.
3. Brand guideline PDFs and colour swatches on their own. These work, but the results are noticeably weaker.

Once it is set up, ask for a simple landing page and check whether it looks like the brand before using it on real work.

The AWIA design system in Claude Design: wordmark, brand colours, neutrals and the component list down the left.

Where it fits

In practice, the early part of a design job (concepts, wireframes, prototypes, first drafts) gets a lot faster. The later part, where taste, polish and checking come in, still needs a designer.

It is also worth being clear with clients about scope. Claude Design suits a landing page or a small site. A large engagement with a full sitemap involves dozens of templates and a content model, and that is still a job for Figma and code. On a project like that, I would use it to concept the two or three templates that set the direction and then move on.

It uses a lot of your plan's allowance. Building one section at a time and asking for small changes rather than full rewrites helps, as does keeping design and coding in separate conversations.

Working with Figma

I would keep Figma as the source of truth. Claude Design does not push designs into Figma, so there are two ways to connect them. To keep working on a design in Figma, open the Claude Design output in Chrome and capture it with Figma's Chrome extension, which brings the page onto your canvas as editable layers. For the build step, you can skip the canvas and use Figma's Dev Mode MCP server with Claude Code. If your design system already lives in code, /design-sync and the handoff bundle give you a tighter loop than going through Figma at all.

Four ways Claude Design connects to Figma and code: capture the output into Figma with the Chrome extension, hand off to Claude Code, or pull a coded design system in with /design-sync.

Two things to sort out before client work goes in

The first is confidentiality. Client work should sit on a Team or Enterprise plan, because on those plans your content is not used for training. Claude Design does not yet offer audit logs or data residency, so I would keep NDA-bound and regulated clients out of it for now. It also helps to give one person the Claude Design Admin role so each brand's design system has a single owner.

The second is accessibility. A peer-reviewed study, "Generated Inaccessible", ran 21,880 checks on AI-generated interfaces and found 29% WCAG compliance. Colour contrast passed 26.8% of the time. So run every output through axe or the WebAIM contrast checker before a client sees it. Australian government and enterprise clients expect WCAG 2.1 or 2.2 AA, and the responsibility for meeting it sits with the agency, not the tool.

I would also tell clients you use it. Explain that it sits in exploration and drafting, and that a designer reviews and finishes everything they receive.

Key takeaways

1. Turn it on, on a Team plan, and run one real client concept through it.
2. Spend the first hour per client on the design system. Coded system first, live site second, PDFs last.
3. Use it for the front sixty per cent: pitches, wireframes, prototypes, deck drafts, handoff.
4. It suits landing pages and small sites, not large engagements with a full sitemap.
5. Keep Figma as source of truth, or hand off to Claude Code if your system lives in code.
6. Run an accessibility check on every output before a client sees it.
7. Consider selling a fixed-price concept sprint rather than absorbing the time saving into hourly billing.

References

• Anthropic, Introducing Claude Design by Anthropic Labs, 17 April 2026
• Anthropic, Claude Design product page
• Claude Help Center, Set up your design system in Claude Design
• Claude Help Center, Claude Design admin guide for Team and Enterprise plans
• Michael Nuñez, VentureBeat, Anthropic ships major Claude Design overhaul, 17 June 2026 (/design-sync, shared usage pool)
• Generated Inaccessible: Measuring WCAG Violations in AI UI Design Tools, Proceedings of the 23rd International Web for All Conference, ACM
• Figma, Figma Chrome extension: bring your live website into Figma as structured layers
• Figma Help Center, Guide to the Figma MCP server

Written by: Jamie Esterman Crumb & AWIA Board Member

The Australian Web Awards recognise excellence across six core disciplines: Accessibility, Content, Design, Development, SEO, and User Experience. Subscribe to AWIA’s newsletter for 2026 awards updates, AWIA news and accessibility events as they’re released.