Website and design · guide

Claude Design: design and prototyping with AI

Claude Design lets you design with Anthropic's Claude model. It builds the screen, landing page or visual you describe in text, and you then change it through chat or direct edits. This site's prototype was made this way.

Made by
Anthropic
Type
AI design
Access
Included in a Claude subscription
Output
Editable design and HTML

What is Claude Design?

You describe the task, the audience and the style, and Claude makes the first version. Then you iterate with instructions such as "calm the colours" or "fix the mobile version". Given a design system, the result follows it.

For me the main value is speed: getting from an idea to a clickable prototype in hours and handing it to a developer. Final decisions, brand and user testing are still human work.

What Claude Design makes possible

  1. Screen and landing page design

    A first version from a text description.

  2. Fast iteration

    Changing colour, structure and copy by instruction.

  3. Design system

    Colour, type and component rules.

  4. Responsive versions

    Desktop and mobile views.

  5. Prototype

    Clickable flow between pages.

  6. Developer handoff

    A structure ready for the codebase.

What Claude Design works with

  • Claude Code

    Anthropic's agentic coding tool. Works directly in your codebase.

    Open the guide
  • Figma

    Design, prototypes and design systems with your team in the browser.

    Open the guide
  • GitHub

    Code hosting, version control, teamwork and CI/CD.

    Open the guide
  • Webflow

    A visual site builder, CMS and hosting in one place.

    Open the guide

My experience

Projects where I used Claude Design:

  • [Project: brand, what I built, result %]
  • [Project: brand, what I built, result %]
See the cases

Claude Design resources

  • BRD for a digital product

  • Digital product service

  • Figma guide

Questions about Claude Design

Does Claude Design replace a designer?

No. It speeds up routine work and first drafts, and the designer spends more time on strategy, brand and quality.

Can the output be used in code?

Yes, the HTML output is a starting point for a developer. You can move it into a real project with Claude Code.

Will it match our brand?

When you provide colour, type and component rules up front, the result matches the brand.

Other tool guides