Claude Design Tutorial: From Brand to Prototype

This Claude Design tutorial follows the exact steps I took the day it launched: point it at my brand, let it build a design system, prototype a landing page in three directions, refine the one I liked, and hand it to Claude Code to build.

Claude Design is Anthropic's tool for creating designs, prototypes, slides and one-pagers by describing them in plain English. You set up a design system from your brand once, then every project uses your colours, type and components, and finished designs can be handed to Claude Code to build.

The video above shows the whole run. Here is the written version.

What Claude Design is

Claude Design comes from Anthropic Labs, the team behind Claude Code. It is not a plugin for another design tool. It is its own product where you describe what you want and Claude builds it visually: slide decks, pitch decks, wireframes, marketing pages, one-pagers, brand assets and interactive prototypes.

From Anthropic's announcement:

• Launched April 17, 2026, as a research preview for Pro, Max, Team and Enterprise plans. Enterprise admins have to switch it on.
• It runs on Claude Opus 4.7 and counts against your normal subscription usage.
• Exports include PDF, PPTX, standalone HTML, Canva and a shareable link.
• A finished design can be packaged and passed to Claude Code in one step.

Step 1: Set up your design system

This is the step that sets Claude Design apart. During onboarding you give it your brand, and it builds a design system you reuse on every project:

• Connect a code repository if you have a website, so it can read your real colours, fonts and components.
• Upload logos, fonts and brand assets.
• Add a design file or point it at code on your computer.

Generation took about 15 minutes in my run. It came back with buttons, badges, forms, cards, a pricing tier, an FAQ row, stats and a brand watermark, all in my style. You can keep more than one design system, which matters if you run several brands: one per brand keeps each project on-style.

Give it your best material, not everything. A clean logo file, your real fonts and a repository or page that represents the brand at its best will produce a sharper system than a folder of every asset you have ever made. You can refine the system later, but the first version sets the tone for every project after it.

Step 2: Start a project

Choose what you are making. For a prototype you pick wireframe (quick ideas) or high fidelity (polished, with real brand components). Then describe it plainly. My prompt:

Create a landing page for [brand]'s free community. We help business
owners master AI tools like Claude Code to automate their work. Include
a hero section, three value props, a testimonial section and a call to
action to join.

Before building, it asked clarifying questions, such as how prominent the word "free" should be and whether I wanted one version or several. I asked for three hero variations.

You can also start from more than a text prompt. Claude Design accepts screenshots and images, Word, PowerPoint and Excel files, a code repository, and a web capture of an existing page. Starting from your current page and asking for "the same content, three stronger directions" is one of the fastest ways to get a useful result.

Step 3: Pick a direction and refine

It built three versions side by side: one close to my existing brand and two that pushed further. You can view them on a canvas or as full pages and switch between variants.

Refine with:

• Inline comments on a specific element ("make this headline shorter").
• Direct text edits.
• Adjustment controls for spacing, colour and layout.

Exploring several directions before building anything is where it saves the most time. Design has never been Claude Code's strongest step, so settling the look here first means the build starts from a decision, not a guess.

Step 4: Export or hand off to Claude Code

When it is ready:

• For decks and documents: export as PPTX, PDF or to Canva.
• For a quick page: export standalone HTML.
• For a real website: package it as a handoff bundle and pass it to Claude Code, which builds it in your project. My guide to building a website with Claude Code covers the build and deploy steps.

Prompts that work

The clearer the brief, the better the first round. These patterns worked well in my runs:

• Name the page type and the sections: "A landing page with a hero, three value props, a testimonial row and a call to action."
• Say who it is for and what they should do: "For business owners who want to learn Claude Code; the button should get them to join."
• Ask for variations on purpose: "Three hero variations: one close to our current site, two that push further."
• Point at real content: paste the actual headline, value props and testimonials so it designs around real words, not placeholder text.
• Refine with specifics: "Make the headline shorter and the button higher" beats "make it pop".

Mistakes to avoid

• Skipping the design system. Without it, every project starts from generic styling.
• Placeholder copy. Designs built around lorem ipsum fall apart when real text arrives.
• Treating the prototype as the product. Hand it to Claude Code or a developer to build it properly, with real data and accessibility.
• Big exploratory sessions on a tight plan. Usage counts against your limits; explore with a clear brief.
• Forgetting mobile. Check every direction at phone size before you pick one.

What it is good for, and where it is not

Good for: landing page directions, pitch decks, one-pagers, social assets, clickable prototypes and wireframes, especially for founders and marketers without a designer.

Not a full replacement for a design team on a large product, and it is a research preview, so features and connections are still arriving. Usage counts against your plan, so big exploration sessions use up limits faster.

Claude Design tutorial: FAQ

Is Claude Design free?

Claude Design is included with paid Claude plans (Pro, Max, Team and Enterprise) as a research preview, and its usage counts against your subscription limits. It is not available on the free plan.

Can Claude Design replace Figma?

Claude Design can cover much of the early design work, from wireframes to polished prototypes, and it can take in design files. Teams with an established design workflow will still use dedicated tools for detailed product design.

How do I get a Claude Design prototype into code?

Package the finished design as a handoff bundle and pass it to Claude Code with one instruction. Claude Code then builds it in your project, where you can refine and deploy it.

Can I use my own brand in Claude Design?

Claude Design builds a design system from your brand during onboarding: it reads your code repository, logos, fonts and design files, then applies your colours, type and components to every new project.

What can I make with Claude Design?

Claude Design makes landing pages, wireframes, interactive prototypes, pitch decks, one-pagers and social assets, using your brand's design system. Designs can be exported as PDF, PowerPoint, HTML or to Canva, or handed to Claude Code to build.

Build what you design

The AI Operator Kit includes a /build command and step-by-step plays for a website, an offer landing page and a pricing page, so the designs you settle on in Claude Design become working pages.