# How do you design with Claude Design?

Date: 2026-04-26 · Author: Robert Scales · https://guidetoartificialintelligence.com/en/learn/design-claude-design/

**Answer:** Start with a short brief that names the audience, the page's single goal and its sections, ask for two or three alternatives, and then refine one of them with comments and small requests until it handles real content and edge cases. When it is ready, use the handoff to Claude Code so a coding agent builds from the design and your notes instead of a screenshot.

Claude Design, the Anthropic Labs tool released in research preview on April 17, works best when you treat it like a fast junior designer: give it a clear brief, look at options side by side, and make decisions out loud so they are recorded. This guide follows one small project from first prompt to working code, a landing page for a weekend pottery workshop.

A few terms first. A **landing page** is a single web page built around one action, such as signing up. A **prototype** is a clickable model of a page or app used to test an idea before it is built for real. A **design system** is the set of colors, fonts and reusable pieces, like buttons and cards, that keeps a product consistent.

## Step 1: Write a brief, not a wish

Vague prompts produce generic pages. A good brief names who the page is for, the one thing they should do, the sections in order, and any constraints.

```prompt
Design a landing page for a two-day beginner pottery workshop at a
small community studio. Audience: adults with no experience, many over 50.
Single goal: reserve a seat. Sections, in order: headline with a photo
placeholder, what you'll make, schedule for both days, what's included,
the teacher, three short FAQs, reserve button. Warm, calm, easy to read:
large type, strong contrast, no stock-photo clichés. Show desktop and
mobile versions.
```

If your organization has set up a design system, or you have linked a codebase, Claude uses those colors and components automatically. Anthropic's tutorial notes that you can import a repository from GitHub or attach a local folder; for big projects, attach only the folder that holds your interface components, not the whole repository.

## Step 2: Ask for alternatives before polishing

It is cheaper to choose between rough options than to perfect the first one. Ask for two or three directions side by side.

```prompt
Give me three versions of the top half of this page: one with a large
photo and short headline, one with the schedule visible right away, and
one that leads with a quote from a past student. Keep everything else
the same so I can compare.
```

Look at each from the visitor's side. Which one tells a nervous beginner, in five seconds, what the workshop is and how to sign up? Pick one, and say why in the chat: "Going with version 2, because people asked about dates more than anything else." That sentence becomes useful later.

## Step 3: Refine in small, precise moves

Claude Design gives you several ways to change a design: chat for larger changes, comments pinned to a single element, direct edits to text, and sliders Claude generates for things like spacing. Use the smallest tool for the job. A comment on the reserve button ("make this stand out more, but keep it calm") changes one thing; a chat message is better for structural changes such as adding a section.

A good refinement checklist for any landing page:

| Check | Example request |
|---|---|
| Real content | "Replace placeholder text with this schedule and these prices." |
| Long text | "Show how the FAQ looks if an answer is four lines long." |
| Small screens | "Check the mobile version: is the button visible without scrolling?" |
| Accessibility | "Make sure text contrast and button size suit older readers." |
| Missing states | "Show the page when the workshop is sold out." |

Anthropic's tutorial recommends asking for empty, error and loading states before you hand anything to developers, and checking how the design copes with very little or very much content. Our sold-out version is that kind of check.

> **Try it:** Write a five-line brief for a page you actually need, such as an event, a product or a club. Ask Claude Design for three alternatives of the top section, choose one, and write one sentence explaining your choice before you refine it.

## Step 4: Share and review

Before building, show the prototype to someone who matches the audience. Share it inside your organization by link, or export it as a PDF or a standalone HTML file if the reviewer cannot sign in. Collect comments on the design itself rather than in a separate email thread, so the decisions stay next to the work. VentureBeat notes that Anthropic itself says multi-person editing is still limited in this preview, so plan on one person making the changes.

## How do you move a design into code?

Claude Design includes a handoff to **Claude Code**, Anthropic's coding agent. From the Export menu, choose the handoff option. According to Anthropic's tutorial, the tool bundles the design files, the conversation and a README that explains to the coding model how to read the designs. You then receive a prompt containing a link to that bundle, which you paste into Claude Code on your computer, or into another coding agent; there is also an option to send it to Claude Code on the web.

Three habits make that handoff much smoother. First, name things clearly while designing ("the ScheduleCard," "the reserve button"), because those names travel with the bundle. Second, keep your decisions in the chat, like the reason for choosing version 2, since the coding agent reads them as context. Third, link your real codebase if you have one; Claude Code then builds with the components you already use instead of inventing new ones.

For our pottery page, the request in Claude Code could be as simple as: "Build this landing page as a single HTML page with the reserve button linking to our booking form, and match the mobile layout exactly." Review the result in a browser on both a phone and a computer, and treat it like any first draft: check the text, the links and the form before you publish.

## Sources

- Using Claude Design for prototypes and UX: https://web.archive.org/web/20260422032206/https://claude.com/resources/tutorials/using-claude-design-for-prototypes-and-ux
- Introducing Claude Design by Anthropic Labs: https://www.anthropic.com/news/claude-design-anthropic-labs
- Anthropic just launched Claude Design, an AI tool that turns prompts into prototypes and challenges Figma: https://venturebeat.com/technology/anthropic-just-launched-claude-design-an-ai-tool-that-turns-prompts-into-prototypes-and-challenges-figma