Claude Design Guide

Claude Design lets you create websites, prototypes, mockups, and visual designs by describing what you want. Anthropic introduced it in April 2026, and since September it works anywhere in Claude.

Claude Design can help you:

• Turn an idea into a clickable prototype
• Design landing pages and app screens
• Explore several visual directions quickly
• Apply your brand colors and fonts
• Hand designs to Claude Code to build

Design by describing. Refine by reacting.

October 8

Claude Design, Docs, and Slides left beta and became available on every plan, including Free.

By December 14

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

• What you are designing
• Who it is for
• The main goal or action
• Pages or screens needed
• Brand colors, fonts, and logo
• Examples you like
• Devices: phone, desktop, or both

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

Give Claude your brand rules once and reuse them:

• Exact hex colors
• Font families and sizes
• Logo files
• Spacing and corner style
• Tone of voice for copy
• Things to avoid

Ask for two or three different directions before choosing one. Compare layout, hierarchy, and mood, then combine the best ideas.

• “Make the headline shorter and larger.”
• “Move pricing above the FAQ.”
• “Use more white space between sections.”
• “Make the primary button stand out more.”
• “Show the mobile version.”

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

Make key screens clickable and walk through the main task:

• Can a new user find the main action?
• How many steps does it take?
• What happens on errors?
• Does it work on a phone?

Show the prototype to two or three real users before building.

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

• Enough color contrast for text
• Readable font sizes on phones
• Clear labels on buttons and forms
• Keyboard-friendly navigation
• Alt text for images

Ask Claude to review the design for accessibility before handoff.

• Landing pages and websites
• App screens and onboarding flows
• Dashboards and admin panels
• Pitch and product mockups
• Social graphics and visual assets

• Starting without a goal
• Asking for “something modern” with no details
• Changing everything at once
• Skipping mobile
• Using images or fonts you do not have 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 two different directions first. Make it mobile first and accessible. After I choose a direction, make the key screens clickable and list anything you need from me.