How to Make the Most of Claude Design: Practical Tips for Better Results

Claude Design turns prompts, files and your codebase into designs, prototypes and decks. How to set up a design system, refine, export and hand off.

By CrunchCube21 October 20264 min read

Claude Design launched on 17 April 2026 as an Anthropic Labs experiment for making visual work with Claude: designs, interactive prototypes, slide decks, one-pagers and landing pages. In October it came out of beta and onto every Claude plan, including Free, and it now works directly inside normal Claude conversations.

Getting a first design is easy. Getting a design you'd actually ship takes a few habits. Here they are.

What it does, in one paragraph

You describe what you want, or give Claude something to start from: a screenshot, a DOCX, PPTX or XLSX file, your codebase, or elements captured straight from a live website. Claude builds the design, and you refine it by chatting, commenting on specific elements, editing text directly, or nudging spacing, colour and layout with adjustment controls. When it's done, you export it or hand it to Claude Code to build.

1. Set up your design system first

This is the single biggest quality jump, and most people skip it.

During setup, Claude can read your codebase and design files and build a design system from them: your colours, typography and components. After that, every project uses them automatically, so designs look like your product instead of a generic template.

Think of it like a football team's kit. Every player turns up in the same colours without being told. You can refine the system over time, and a team can keep more than one (say, one for the product and one for marketing).

2. Start from something real

A blank prompt gives Claude nothing to anchor to. Better starting points:

  • A screenshot of the screen you want to improve.
  • Your existing deck or document (PPTX, DOCX) when you want a redesign, not a reinvention.
  • The web capture tool, to grab elements from your live site so a prototype looks like your actual product.

"Redesign this pricing page so the middle plan stands out, keep our nav and footer" beats "design a pricing page" every time.

3. Say who it's for and where it'll be seen

Designers ask these questions first, so tell Claude up front:

  • Audience: investors, first-time visitors, existing customers?
  • Format: phone screen, projector, printed A4?
  • The one action you want: sign up, book a call, approve the budget?

4. Refine precisely, then apply broadly

Don't regenerate the whole design to fix one thing. Use the precise tools:

  1. Comment inline on the exact element that's wrong.
  2. Edit text directly when you already know the words.
  3. Use the adjustment controls for spacing, colour and layout tweaks you can see live.
  4. Once something looks right, ask Claude to apply the change across the whole design: "use this card style for every card".

Teams have reported big time savings from this loop: one customer said complex pages took 2 prompts instead of more than 20 in other tools.

5. Make prototypes, not just pictures

Claude Design can build interactive, code-powered prototypes: clickable flows, and even ones with video, 3D, shaders or built-in AI. For anything you want to test with users, ask for a working prototype rather than static screens. Datadog described going from idea to working prototype within a single meeting.

6. Share with the right access

Designs can be private, viewable by link inside your organisation, or editable by colleagues. People with edit access can chat with Claude together in the same conversation, which is handy for a quick group critique. Give view access for feedback and edit access only to people who'll actually change things.

7. Export for where it's going

Going to...Export as
A meeting or emailPDF
Someone who'll edit slidesPPTX
Your marketing teamCanva
A quick live demo or simple pageStandalone HTML
Developers to buildHandoff bundle to Claude Code

The Claude Code handoff packages the finished design so developers (or Claude Code itself) can build it with a single instruction, instead of re-creating it from screenshots.

Moving from the old site

If you used the standalone claude.ai/design site, it stays open until 14 December 2026 and then redirects to Claude. Organisations can move their design systems across from the Artifacts page with "Migrate team design systems".

What to watch out for

  • Usage limits apply. Big, iterative design sessions use your plan's allowance faster than chatting does.
  • Check accessibility yourself. Look at contrast and text size, especially on brand colours like orange or yellow on white.
  • Treat AI copy as a draft. Replace placeholder claims and numbers with real ones before anything goes public.

In one line: set up your design system, start from real material, refine with comments and controls, and export to where the work is going, including straight to Claude Code.

Keep reading

New games, tools and tutorials

About one short email a week. No spam, one-click unsubscribe.