Claude Design Guide

Claude Design lets you create websites, prototypes, mockups, and visual designs just by describing them. Anthropic introduced it in April 2026, and since September it has worked anywhere in Claude.

With Claude Design you can:

• Turn a rough idea into a clickable prototype
• Lay out landing pages and app screens
• Explore several visual directions fast
• Apply your brand colors and fonts
• Pass finished designs to Claude Code for the build

Describe to design. React to refine.

October 8

Claude Design, Docs, and Slides left beta and opened to every plan, Free included.

By December 14

The standalone Claude Design experience moves into the main Claude app. Anthropic’s help center has a migration guide.

• What you are designing
• Who the audience is
• The primary goal or action
• The pages or screens you need
• Your brand colors, fonts, and logo
• Examples you admire
• Target devices: phone, desktop, or both

Design a landing page for a meal-planning app aimed at busy parents. Goal: free trial signups. Sections: hero, three benefits, how it works, pricing, FAQ. Colors: forest green and cream. Clean, friendly, and mobile first.

Hand Claude your brand rules once, then reuse them every time:

• Exact hex color codes
• Font families and sizes
• Logo files
• Spacing and corner style
• Voice and tone for copy
• Things to steer clear of

Request two or three distinct directions before you commit. Compare layout, hierarchy, and mood, then merge the strongest ideas.

• “Make the headline shorter and bigger.”
• “Put pricing above the FAQ.”
• “Add more white space between sections.”
• “Make the primary button pop more.”
• “Show me the mobile version.”

Change one element at a time so you can see what actually improves.

Make the key screens clickable and walk through the main task yourself:

• Can a new user spot the main action?
• How many steps does the task take?
• What happens when an error occurs?
• Does it work well on a phone?

Put the prototype in front of two or three real users before anything gets built.

Once the design is approved, pass it to Claude Code to build as a real website or app. Ask it to match the design exactly, use your stack, and keep components reusable.

• Strong color contrast for text
• Font sizes that stay readable on phones
• Clear labels on every button and form
• Navigation that works by keyboard
• Alt text on every image

Have Claude run an accessibility review on the design before handoff.

• Landing pages and full websites
• App screens and onboarding flows
• Dashboards and admin panels
• Mockups for pitches and products
• Social graphics and other visual assets

• Starting with no clear goal
• Requesting “something modern” without details
• Changing everything in one pass
• Ignoring the mobile view
• Using images or fonts you lack the rights to

Design a [website, app screen, or prototype] for [audience]. Goal: [main action]. Pages or screens: [list]. Brand: colors [hex codes], fonts [fonts], style [style]. Show me two distinct directions first. Make it mobile first and accessible. Once I pick a direction, make the key screens clickable and list anything you need from me.